Agrega el inicio de sesión a tu aplicación de Expo

Esta guía muestra cómo integrar Auth0 en cualquier aplicación de Expo con el SDK de Auth0 para React Native.

Esta guía de inicio rápido es para aplicaciones de Expo. Para integrar Auth0 en tu aplicación de React Native, consulta la guía de inicio rápido de React Native.

Usa IA para integrar Auth0

Si usas un asistente de programación con IA como Claude Code, Cursor o GitHub Copilot, puedes añadir la autenticación de Auth0 automáticamente en cuestión de minutos con agent skills.

Instala:

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-expo

Luego pídele a tu asistente de IA:

Add Auth0 authentication to my Expo app

Tu asistente de IA creará automáticamente tu aplicación en Auth0, obtendrá las credenciales, instalará el SDK react-native-auth0, configurará el plugin de Expo e implementará los flujos de inicio y cierre de sesión. Documentación completa de agent skills →

​

Primeros pasos

1. Crea un nuevo proyecto con Expo

   Cree un nuevo proyecto de Expo para esta guía de inicio rápido.

   En su terminal:

   npx create-expo-app Auth0ExpoSample --template blank
   cd Auth0ExpoSample
   

   Esto crea una aplicación mínima de Expo con la versión más reciente del SDK, lista para integrar módulos nativos. La marca --template blank proporciona un punto de partida limpio, sin código repetitivo adicional.

   Este SDK NO es compatible con Expo Go porque requiere código nativo personalizado. Debe usar npx expo run:ios o npx expo run:android para crear una build de desarrollo.

2. Instala el SDK de Auth0

   Añade el SDK de Auth0 para React Native a tu proyecto.

   npx expo install react-native-auth0
   

   Usar npx expo install garantiza la compatibilidad de versiones con tu versión del SDK de Expo. El SDK se configura automáticamente mediante el sistema de plugins de Expo.

3. Configura el plugin de Expo

   Configura el plugin de Auth0 para gestionar automáticamente la configuración nativa de iOS y Android.

   Actualiza tu app.json para incluir el plugin de Auth0:

   app.json

   {
     "expo": {
       "name": "Auth0ExpoSample",
       "slug": "auth0-expo-sample",
       "version": "1.0.0",
       "ios": {
         "bundleIdentifier": "com.auth0.samples.expo",
         "supportsTablet": true
       },
       "android": {
         "package": "com.auth0.samples.expo",
         "adaptiveIcon": {
           "foregroundImage": "./assets/images/adaptive-icon.png",
           "backgroundColor": "#ffffff"
         }
       },
       "plugins": [
         [
           "react-native-auth0",
           {
             "domain": "{yourDomain}",
             "customScheme": "auth0sample"
           }
         ]
       ]
     }
   }
   

   Reemplaza {yourDomain} por tu dominio de Auth0 (lo obtendrás en el siguiente paso).

   Importante: Debes definir bundleIdentifier para iOS y package para Android en tu app.json. Estos identificadores son necesarios para que el SDK de Auth0 configure correctamente los proyectos nativos. Si no especificas un esquema personalizado, el SDK usará el identificador del paquete de iOS como esquema de URL.

   customScheme debe estar en minúsculas y no puede contener caracteres especiales. Este valor se utiliza para construir las URL de devolución de llamada y debe pasarse a los métodos authorize() y clearSession().

4. Configura tu aplicación en Auth0

   Crea y configura una aplicación de Auth0 para que funcione con tu aplicación de Expo.

   1. Ve al Auth0 Dashboard
   2. Haz clic en Applications > Applications > Create Application
   3. En la ventana emergente, introduce un nombre para tu aplicación (por ejemplo, Auth0 Expo Sample), selecciona Native como tipo de aplicación y haz clic en Create
   4. Ve a la pestaña Settings en la página de detalles de la aplicación
   5. Anota los valores de dominio y ID de cliente
   6. Actualiza el valor domain en la configuración del plugin de tu app.json con tu dominio de Auth0

   Allowed Callback URLs:

   auth0sample://{yourDomain}/ios/com.auth0.samples.expo/callback,
   auth0sample://{yourDomain}/android/com.auth0.samples.expo/callback
   

   URL de cierre de sesión permitidas:

   auth0sample://{yourDomain}/ios/com.auth0.samples.expo/callback,
   auth0sample://{yourDomain}/android/com.auth0.samples.expo/callback
   

   Reemplaza {yourDomain} por tu dominio real de Auth0 (por ejemplo, dev-abc123.us.auth0.com).

   Allowed Callback URLs son una medida de seguridad fundamental para garantizar que los usuarios regresen de forma segura a tu aplicación después de autenticarse. Sin una URL que coincida, el proceso de inicio de sesión fallará y los usuarios verán una página de error de Auth0 en lugar de acceder a tu aplicación.

   Allowed Logout URLs son esenciales para ofrecer una experiencia fluida al cerrar sesión. Sin una URL que coincida, los usuarios no serán redirigidos de vuelta a tu aplicación después de cerrar sesión y, en su lugar, permanecerán en una página genérica de Auth0.

   El formato de la URL de callback es: {customScheme}://{yourDomain}/{platform}/{bundleIdentifier or packageName}/callback. El esquema de la URL usa el customScheme de tu app.json, pero la ruta siempre contiene el bundleIdentifier (iOS) o package (Android), no el esquema personalizado. Si no especificas un customScheme, el SDK usa {bundleIdentifier}.auth0 / {packageName}.auth0 como esquema de URL de forma predeterminada.

   Importante: Asegúrate de que el customScheme de tus URL de callback coincida exactamente con el valor de la configuración del plugin en tu app.json y de que la ruta contenga tu bundleIdentifier (iOS) o package (Android) reales. Si estos valores no coinciden, la autenticación fallará.

5. Configura el componente App

   Configura el componente principal de tu aplicación según el enfoque de implementación elegido.

   Basado en Hooks (con Provider)

   Reemplace el contenido de App.js y envuelva la aplicación con el componente Auth0Provider:

   App.js

   import React from 'react';
   import {Auth0Provider, useAuth0} from 'react-native-auth0';
   import {
     StyleSheet,
     Text,
     View,
     Button,
     Image,
     ActivityIndicator,
   } from 'react-native';
   
   function HomeScreen() {
     const {authorize, clearSession, user, isLoading} = useAuth0();
   
     const handleLogin = async () => {
       try {
         await authorize({customScheme: 'auth0sample', scope: 'openid profile email'});
       } catch (e) {
         console.error('Login error:', e);
       }
     };
   
     const handleLogout = async () => {
       try {
         await clearSession({customScheme: 'auth0sample'});
       } catch (e) {
         console.error('Logout error:', e);
       }
     };
   
     if (isLoading) {
       return (
         <View style={styles.container}>
           <ActivityIndicator size="large" color="#0066cc" />
           <Text style={styles.loadingText}>Loading...</Text>
         </View>
       );
     }
   
     return (
       <View style={styles.container}>
         <Text style={styles.title}>Auth0 Expo Sample</Text>
   
         {user ? (
           <View style={styles.profileContainer}>
             {user.picture && (
               <Image source={{uri: user.picture}} style={styles.avatar} />
             )}
             <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
             <Text style={styles.emailText}>{user.email}</Text>
             <View style={styles.buttonContainer}>
               <Button title="Log Out" onPress={handleLogout} color="#dc3545" />
             </View>
           </View>
         ) : (
           <View style={styles.loginContainer}>
             <Text style={styles.subtitle}>
               Tap the button below to log in
             </Text>
             <View style={styles.buttonContainer}>
               <Button title="Log In" onPress={handleLogin} color="#0066cc" />
             </View>
           </View>
         )}
       </View>
     );
   }
   
   export default function App() {
     return (
       <Auth0Provider domain="{yourDomain}" clientId="{yourClientId}">
         <HomeScreen />
       </Auth0Provider>
     );
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       padding: 20,
       backgroundColor: '#fff',
     },
     title: {
       fontSize: 28,
       fontWeight: 'bold',
       marginBottom: 20,
       color: '#333',
     },
     subtitle: {
       fontSize: 16,
       color: '#666',
       marginBottom: 30,
       textAlign: 'center',
     },
     loadingText: {
       marginTop: 10,
       fontSize: 16,
       color: '#666',
     },
     profileContainer: {
       alignItems: 'center',
     },
     avatar: {
       width: 100,
       height: 100,
       borderRadius: 50,
       marginBottom: 20,
     },
     welcomeText: {
       fontSize: 22,
       fontWeight: '600',
       marginBottom: 8,
       color: '#333',
     },
     emailText: {
       fontSize: 16,
       color: '#666',
       marginBottom: 30,
     },
     loginContainer: {
       alignItems: 'center',
     },
     buttonContainer: {
       width: 200,
       marginTop: 10,
     },
   });
   

   Reemplaza {yourDomain} por tu dominio de Auth0 y {yourClientId} por tu ID de cliente del Auth0 Dashboard.

   Auth0Provider inicializa el SDK y proporciona el contexto de autenticación a todos los componentes secundarios mediante el hook useAuth0. El parámetro customScheme debe coincidir con el valor de la configuración del plugin en tu app.json.

   Basado en clases (sin Provider)

   Reemplaza el contenido de App.js con un componente basado en clases:

   App.js

   import React, {Component} from 'react';
   import {
     View,
     Text,
     Button,
     StyleSheet,
     ActivityIndicator,
     Image,
   } from 'react-native';
   import Auth0, {Credentials} from 'react-native-auth0';
   
   const auth0 = new Auth0({
     domain: '{yourDomain}',
     clientId: '{yourClientId}',
   });
   
   interface User {
     name?: string;
     email?: string;
     picture?: string;
   }
   
   interface AppState {
     user: User | null;
     isLoading: boolean;
   }
   
   class App extends Component<{}, AppState> {
     constructor(props: {}) {
       super(props);
       this.state = {
         user: null,
         isLoading: true,
       };
     }
   
     async componentDidMount() {
       await this.checkAuthStatus();
     }
   
     checkAuthStatus = async () => {
       try {
         const hasValidCredentials = await auth0.credentialsManager.hasValidCredentials();
         if (hasValidCredentials) {
           const credentials = await auth0.credentialsManager.getCredentials();
           const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
           this.setState({user: userInfo, isLoading: false});
         } else {
           this.setState({isLoading: false});
         }
       } catch (e) {
         console.error(e);
         this.setState({isLoading: false});
       }
     };
   
     login = async () => {
       try {
         const credentials: Credentials = await auth0.webAuth.authorize({
           scope: 'openid profile email',
         }, {customScheme: 'auth0sample'});
         
         await auth0.credentialsManager.saveCredentials(credentials);
         const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
         this.setState({user: userInfo});
       } catch (e) {
         console.error(e);
       }
     };
   
     logout = async () => {
       try {
         await auth0.webAuth.clearSession({}, {customScheme: 'auth0sample'});
         await auth0.credentialsManager.clearCredentials();
         this.setState({user: null});
       } catch (e) {
         console.error(e);
       }
     };
   
     render() {
       const {user, isLoading} = this.state;
   
       if (isLoading) {
         return (
           <View style={styles.container}>
             <ActivityIndicator size="large" color="#0066cc" />
             <Text style={styles.loadingText}>Loading...</Text>
           </View>
         );
       }
   
       return (
         <View style={styles.container}>
           <Text style={styles.title}>Auth0 Expo Sample</Text>
   
           {user ? (
             <View style={styles.profileContainer}>
               {user.picture && (
                 <Image source={{uri: user.picture}} style={styles.avatar} />
               )}
               <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
               <Text style={styles.emailText}>{user.email}</Text>
               <View style={styles.buttonContainer}>
                 <Button title="Log Out" onPress={this.logout} color="#dc3545" />
               </View>
             </View>
           ) : (
             <View style={styles.loginContainer}>
               <Text style={styles.subtitle}>
                 Tap the button below to log in
               </Text>
               <View style={styles.buttonContainer}>
                 <Button title="Log In" onPress={this.login} color="#0066cc" />
               </View>
             </View>
           )}
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       padding: 20,
       backgroundColor: '#fff',
     },
     title: {
       fontSize: 28,
       fontWeight: 'bold',
       marginBottom: 20,
       color: '#333',
     },
     subtitle: {
       fontSize: 16,
       color: '#666',
       marginBottom: 30,
       textAlign: 'center',
     },
     loadingText: {
       marginTop: 10,
       fontSize: 16,
       color: '#666',
     },
     profileContainer: {
       alignItems: 'center',
     },
     avatar: {
       width: 100,
       height: 100,
       borderRadius: 50,
       marginBottom: 20,
     },
     welcomeText: {
       fontSize: 22,
       fontWeight: '600',
       marginBottom: 8,
       color: '#333',
     },
     emailText: {
       fontSize: 16,
       color: '#666',
       marginBottom: 30,
     },
     loginContainer: {
       alignItems: 'center',
     },
     buttonContainer: {
       width: 200,
       marginTop: 10,
     },
   });
   
   export default App;
   

   Reemplaza {yourDomain} con tu dominio de Auth0 y {yourClientId} con tu ID de cliente del Auth0 Dashboard.

   El enfoque basado en clases no requiere Auth0Provider, ya que utiliza directamente la instancia de la clase Auth0. La opción customScheme debe pasarse como segundo parámetro de authorize() y clearSession().

   El método authorize() abre el Universal Login de Auth0 en un navegador seguro (ASWebAuthenticationSession en iOS, Chrome Custom Tabs en Android). El método clearSession() cierra la sesión del usuario y borra tanto la sesión del navegador como las credenciales almacenadas. El parámetro customScheme debe coincidir con el valor de la configuración del complemento en app.json.

6. Ejecuta la aplicación

   Compila y ejecuta tu aplicación de Expo en un dispositivo o un emulador.

   Primero, genera los proyectos nativos de iOS y Android:

   npx expo prebuild
   

   A continuación, ejecútalo en tu plataforma de destino:

   Para iOS:

   npx expo run:ios
   

   Para Android:

   npx expo run:android
   

   Flujo esperado:

   1. La aplicación se inicia y muestra el botón “Iniciar sesión”
   2. Toca Iniciar sesión → Se abre el navegador con Auth0 Universal Login
   3. Completa el inicio de sesión (regístrate o inicia sesión)
   4. El navegador se cierra → Vuelve a la aplicación automáticamente
   5. Se muestra el perfil del usuario con nombre, correo electrónico y avatar

   Si haces cambios en la configuración del plugin en app.json, ejecuta npx expo prebuild --clean para regenerar los proyectos nativos con la configuración actualizada.

   El simulador de iOS requiere una cuenta válida de Apple Developer para ASWebAuthenticationSession. Si quieres hacer pruebas en el simulador sin una cuenta, usa un dispositivo físico o un emulador de Android.

Punto de control

Ahora deberías tener una experiencia de inicio de sesión con Auth0 totalmente funcional en tu dispositivo o emulador. La aplicación usa autenticación segura en el navegador y gestiona automáticamente las credenciales en el almacenamiento seguro del dispositivo.

---

​

Solución de problemas y temas avanzados

Problemas comunes y soluciones

​

”Invariant Violation: Native module cannot be null”

Este error se produce al intentar usar el SDK con Expo Go.

Solución:

El SDK de Auth0 requiere código nativo personalizado que no está disponible en Expo Go. En su lugar, usa una compilación de desarrollo:

npx expo run:ios
# o
npx expo run:android

​

Error de discrepancia en la URL de callback

Solución:

Verifica que estos tres elementos coincidan exactamente:

1. customScheme en la configuración del plugin de app.json
2. El parámetro customScheme que se pasa a authorize() y clearSession()
3. Las URL de callback en Auth0 Dashboard (Applications → Your App → Settings → Application URIs)

​

Error “PKCE not allowed”

Solución:

1. Ve a Auth0 Dashboard → Applications → Your Application
2. Cambia el tipo de aplicación a Native
3. Guarda los cambios y vuelve a intentarlo

​

Prebuild falla o el plugin no se aplica

Solución:

# Limpiar y regenerar proyectos nativos
npx expo prebuild --clean

​

La compilación de iOS falla con errores de Pod

Solución:

cd ios
pod install --repo-update
cd ..
npx expo run:ios

​

Error de cancelación por parte del usuario

Manéjalo correctamente en tu función de inicio de sesión:

const handleLogin = async () => {
  try {
    await authorize({customScheme: 'auth0sample', scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // El usuario cerró la pantalla de inicio de sesión; manéjalo correctamente
      console.log('Inicio de sesión cancelado por el usuario');
    } else {
      console.error('Error en el inicio de sesión:', e);
    }
  }
};

​

Cuadro de diálogo de alerta en iOS

En iOS, los usuarios ven un cuadro de diálogo de permisos: “App Name” Wants to Use “auth0.com” to Sign In. Este comportamiento es el esperado de ASWebAuthenticationSession. Los usuarios deben tocar Continuar para seguir.

Para personalizar este comportamiento, puedes usar sesiones efímeras (desactiva el SSO):

await authorize({customScheme: 'auth0sample', scope: 'openid profile email'}, {ephemeralSession: true});

Recuperar tokens de acceso

Usa el método getCredentials() para recuperar tokens para llamadas a la API:

import {useAuth0} from 'react-native-auth0';

const MyComponent = () => {
  const {getCredentials} = useAuth0();

  const callApi = async () => {
    try {
      const credentials = await getCredentials();
      const response = await fetch('https://your-api.com/endpoint', {
        headers: {
          Authorization: `Bearer ${credentials.accessToken}`,
        },
      });
      // Manejar la respuesta
    } catch (e) {
      console.error('No se pudieron obtener las credenciales', e);
    }
  };
};

Incluye el scope offline_access durante el inicio de sesión para recibir un token de actualización: authorize({customScheme: 'auth0sample', scope: 'openid profile email offline_access'}). Esto permite la renovación automática del token.

Comprobar el estado de autenticación al iniciar la aplicación

Usa hasValidCredentials() para comprobar si el usuario ya inició sesión:

import {useAuth0} from 'react-native-auth0';
import {useEffect} from 'react';

const App = () => {
  const {hasValidCredentials, getCredentials} = useAuth0();

  useEffect(() => {
    const checkAuth = async () => {
      const isLoggedIn = await hasValidCredentials();
      if (isLoggedIn) {
        const credentials = await getCredentials();
        // El usuario está autenticado; cargar sus datos
      }
    };
    checkAuth();
  }, []);
};

Implementación en producción con EAS Build

Para las compilaciones de producción, usa EAS Build en lugar de compilaciones de desarrollo locales.

Instala EAS CLI:

npm install -g eas-cli

Crea eas.json en la raíz de tu proyecto:

eas.json

{
  "cli": {
    "version": ">= 3.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

Compila para producción:

# Compilar para ambas plataformas
eas build --platform all

# O compilar para una plataforma específica
eas build --platform ios
eas build --platform android

​

Antes de implementar en producción

Usa URL de callback HTTPS para mejorar la seguridad:

https://{yourDomain}/ios/{bundleId}/callback
https://{yourDomain}/android/{packageName}/callback

Configura Android App Links en Auth0 Dashboard:

• Settings → Advanced Settings → Device Settings
• Agrega la huella digital SHA-256 de tu aplicación

Configura iOS Universal Links:

• Agrega la capacidad Associated Domains en Xcode
• Agrega webcredentials:{yourDomain} a Associated Domains

Revisa la configuración de seguridad en Auth0 Dashboard:

• Habilita OIDC Conformant en Advanced Settings
• Configura Token Expiration según sea necesario
• Configura Brute Force Protection
• Prueba en varios dispositivos y versiones del sistema operativo
• Implementa un manejo de errores adecuado para fallos de red

Para aplicaciones de producción, considera usar URL de callback HTTPS con Universal Links (iOS) y App Links (Android) en lugar de esquemas personalizados para mejorar la seguridad.

• Aplicación de ejemplo
• Guía de migración (v4 a v5)