Añade Login a tu aplicación de React Native

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

Este inicio rápido es para el framework React Native. Para integrar Auth0 en tu aplicación de Expo, consulta el inicio rápido de Expo.

Usa IA para integrar Auth0

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

Instala:

npx skills add https://github.com/auth0/agent-skills --skill auth0-react-native

Luego, pídele a tu asistente de IA:

Add Auth0 authentication to my React Native app

Tu asistente de IA creará automáticamente tu aplicación en Auth0, obtendrá las credenciales, instalará react-native-auth0, configurará las dependencias nativas y preparará tu flujo de autenticación. Documentación completa de agent skills →

​

Primeros pasos

1. Crea un proyecto nuevo de React Native

   Cree un nuevo proyecto de React Native para este inicio rápido.

   En su terminal:

   npx @react-native-community/cli init Auth0ReactNativeSample
   cd Auth0ReactNativeSample
   

   Configura tu proyecto con:

   • Nombre: Auth0ReactNativeSample
   • Nombre del paquete: com.auth0.samples.reactnative

   Esto crea una aplicación React Native con la versión estable más reciente. El SDK de Auth0 requiere React Native 0.78.0+ y React 19.0.0+.

2. Instala el SDK de Auth0

   Agrega el SDK de Auth0 para React Native a tu proyecto.

   npm install react-native-auth0
   

   Para iOS, instala las dependencias nativas:

   cd ios && pod install && cd ..
   

   El SDK realiza el enlazado automático en ambas plataformas. El paso pod install instala los módulos nativos de iOS necesarios (Auth0.swift, JWTDecode, SimpleKeychain).

3. Configure su aplicación de Auth0

   Cree y configure una aplicación de Auth0 para que funcione con su aplicación de React Native.

   1. Vaya al Auth0 Dashboard
   2. Haga clic en Applications > Applications > Create Application
   3. En la ventana emergente, escriba un nombre para su aplicación (p. ej., Auth0 React Native Sample), seleccione Native como tipo de aplicación y haga clic en Create
   4. Vaya a la pestaña Settings de la página Application Details
   5. Tome nota de los valores de dominio y ID de cliente

   Allowed Callback URLs:

   org.reactjs.native.example.auth0reactnativesample.auth0://{yourDomain}/ios/org.reactjs.native.example.auth0reactnativesample/callback,
   com.auth0reactnativesample.auth0://{yourDomain}/android/com.auth0reactnativesample/callback
   

   URL permitidas para cierre de sesión:

   org.reactjs.native.example.auth0reactnativesample.auth0://{yourDomain}/ios/org.reactjs.native.example.auth0reactnativesample/callback,
   com.auth0reactnativesample.auth0://{yourDomain}/android/com.auth0reactnativesample/callback
   

   Reemplace {yourDomain} por su 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 su aplicación después de autenticarse. Si no hay 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 su aplicación.

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

   El esquema de la URL incluye .auth0 después de su identificador de paquete para garantizar que el callback se dirija a su aplicación específica. Para este inicio rápido, el identificador de paquete es org.reactjs.native.example.auth0reactnativesample.

   Importante: El esquema de la URL de callback debe incluir .auth0 después de su identificador de paquete (por ejemplo, org.reactjs.native.example.auth0reactnativesample.auth0://). Esto es necesario para que el SDK procese correctamente el callback de autenticación.

4. Configurar plataformas nativas

   Configure tanto iOS como Android para gestionar el callback de autenticación.

   Configuración de Android:

   Abra android/app/build.gradle y agregue los placeholders del Manifest dentro de defaultConfig:

   android/app/build.gradle

   android {
       defaultConfig {
           applicationId "com.auth0reactnativesample"
           // ... otra configuración
           
           // Agregar los marcadores de posición del Manifest de Auth0
           manifestPlaceholders = [
               auth0Domain: "{yourDomain}",
               auth0Scheme: "${applicationId}.auth0"
           ]
       }
   }
   

   Reemplace {yourDomain} por su dominio de Auth0 (por ejemplo, dev-abc123.us.auth0.com).

   Configuración de iOS:

   AppDelegate.mm (Objective-C)

   Abra ios/Auth0ReactNativeSample/AppDelegate.mm y agregue el método para gestionar URL:

   ios/Auth0ReactNativeSample/AppDelegate.mm

   #import <React/RCTLinkingManager.h>
   
   // Agregue este método dentro del bloque @implementation
   - (BOOL)application:(UIApplication *)app
               openURL:(NSURL *)url
               options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
   {
     return [RCTLinkingManager application:app openURL:url options:options];
   }
   

   AppDelegate.swift (Swift)

   Abra ios/Auth0ReactNativeSample/AppDelegate.swift y agregue el método para gestionar URL:

   ios/Auth0ReactNativeSample/AppDelegate.swift

   import React
   
   // Agregue este método dentro de la clase AppDelegate
   func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
     return RCTLinkingManager.application(app, open: url, options: options)
   }
   

   Abra ios/Auth0ReactNativeSample/Info.plist y agregue el esquema de URL. Agregue esto antes de la etiqueta de cierre </dict>:

   ios/Auth0ReactNativeSample/Info.plist

   <key>CFBundleURLTypes</key>
   <array>
     <dict>
       <key>CFBundleTypeRole</key>
       <string>None</string>
       <key>CFBundleURLName</key>
       <string>auth0</string>
       <key>CFBundleURLSchemes</key>
       <array>
         <string>$(PRODUCT_BUNDLE_IDENTIFIER).auth0</string>
       </array>
     </dict>
   </array>
   

   El esquema de URL usa tu identificador de bundle con .auth0 al final. Esto garantiza que la devolución de llamada se dirija a tu aplicación específica una vez completada la autenticación en el navegador.

5. Configurar el componente App

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

   Basado en Hooks (con Provider)

   Reemplaza el contenido de App.tsx y envuelve tu aplicación con el componente Auth0Provider:

   App.tsx

   import React from 'react';
   import {Auth0Provider} from 'react-native-auth0';
   import {SafeAreaView, StyleSheet} from 'react-native';
   import MainScreen from './src/MainScreen';
   
   const App = () => {
     return (
       <Auth0Provider
         domain="{yourDomain}"
         clientId="{yourClientId}">
         <SafeAreaView style={styles.container}>
           <MainScreen />
         </SafeAreaView>
       </Auth0Provider>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#fff',
     },
   });
   
   export default App;
   

   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.

   Basado en clases (sin Provider)

   Reemplaza el contenido de App.tsx por un contenedor sencillo para tu componente basado en clases:

   App.tsx

   import React from 'react';
   import {SafeAreaView, StyleSheet} from 'react-native';
   import MainScreen from './src/MainScreen';
   
   const App = () => {
     return (
       <SafeAreaView style={styles.container}>
         <MainScreen />
       </SafeAreaView>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#fff',
     },
   });
   
   export default App;
   

   El enfoque basado en clases no requiere Auth0Provider, ya que usa directamente la instancia de la clase Auth0. La configuración de Auth0 estará en el componente MainScreen.

6. Implementa Login y Logout

   Crea un componente de pantalla que gestione el Login y el Logout. Puedes elegir entre un enfoque basado en hooks (recomendado) o uno basado en clases.

   Con Hooks (recomendado)

   Crea src/MainScreen.tsx con el hook useAuth0:

   src/MainScreen.tsx

   import React from 'react';
   import {
     View,
     Text,
     Button,
     StyleSheet,
     ActivityIndicator,
     Image,
   } from 'react-native';
   import {useAuth0} from 'react-native-auth0';
   
   const MainScreen = () => {
     const {authorize, clearSession, user, isLoading} = useAuth0();
   
     const login = async () => {
       try {
         await authorize({scope: 'openid profile email'});
       } catch (e) {
         console.error(e);
       }
     };
   
     const logout = async () => {
       try {
         await clearSession();
       } catch (e) {
         console.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 React Native</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={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={login} color="#0066cc" />
             </View>
           </View>
         )}
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       padding: 20,
     },
     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 MainScreen;
   

   Basado en clases

   Crea src/MainScreen.tsx usando directamente la clase Auth0:

   src/MainScreen.tsx

   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 MainScreenState {
     user: User | null;
     isLoading: boolean;
   }
   
   class MainScreen extends Component<{}, MainScreenState> {
     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',
         });
         
         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();
         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 React Native</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,
     },
     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 MainScreen;
   

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

   El método authorize() (hooks) o auth0.webAuth.authorize() (class) abre 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.

7. Ejecuta tu aplicación

   Compila y ejecuta la aplicación de React Native en un dispositivo o emulador.

   Para iOS (requiere macOS):

   npx react-native run-ios
   

   Para Android:

   npx react-native run-android
   

   Flujo esperado:

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

   El simulador de iOS requiere una cuenta válida de Apple Developer para ASWebAuthenticationSession. Para 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 Login de Auth0 completamente funcional en ejecución en tu dispositivo o emulador. La aplicación usa autenticación segura en el navegador y administra automáticamente las credenciales.

---

​

Solución de problemas y aspectos avanzados

Problemas comunes y soluciones

​

Error “Callback URL mismatch”

Solución:

1. Verifica que la URL exacta (incluido el sufijo .auth0) esté en Allowed Callback URLs en tu Auth0 Dashboard
2. Asegúrate de haber agregado las URL de iOS y Android
3. Comprueba que {yourDomain} se haya sustituido por tu dominio real de Auth0

​

La aplicación no vuelve después del Login (iOS)

Solución:

1. Comprueba que Info.plist incluya la entrada CFBundleURLSchemes con $(PRODUCT_BUNDLE_IDENTIFIER).auth0
2. Verifica que AppDelegate.mm incluya el método para gestionar la URL
3. Asegúrate de que el esquema de URL coincida con tu identificador de bundle

​

La compilación de Android falla

Solución:

1. Agrega los placeholders del manifiesto auth0Domain y auth0Scheme a build.gradle
2. Sincroniza el proyecto con los archivos de Gradle
3. Limpia la compilación: ./gradlew clean

​

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

​

La instalación de Pod falla (iOS)

Solución:

1. Actualiza CocoaPods: sudo gem install cocoapods
2. Actualiza el repositorio de pods: pod install --repo-update
3. Si el problema persiste, elimina Podfile.lock y la carpeta ios/Pods, y luego ejecuta pod install de nuevo

​

Error de cancelación del usuario

Manéjalo correctamente en tu función de Login:

const login = async () => {
  try {
    await authorize({scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // El usuario cerró la pantalla de login: manéjalo correctamente
      console.log('Login cancelled by user');
    } else {
      console.error('Login failed:', e);
    }
  }
};

​

Alerta de iOS

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

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

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

Obtener tokens de acceso

Usa el método getCredentials() para obtener 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('Failed to get credentials', e);
    }
  };
};

Incluye el scope offline_access durante el Login para recibir un token de actualización: authorize({scope: 'openid profile email offline_access'}). Esto habilita la renovación automática de tokens.

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, carga sus datos
      }
    };
    checkAuth();
  }, []);
};

Implementación en producción

​

Antes de implementar en producción

Usa URL de callback con 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

Habilita la autenticación biométrica para aplicaciones sensibles con localAuthenticationOptions en Auth0Provider

Revisa la configuración de seguridad en Auth0 Dashboard:

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

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