Ajouter la connexion à votre application React Native

Ce guide explique comment intégrer Auth0 à n’importe quelle application React Native à l’aide du SDK Auth0 pour React Native.

Ce Quickstart concerne le framework React Native. Pour intégrer Auth0 à votre application Expo, consultez le Quickstart Expo.

Utiliser l’IA pour intégrer Auth0

Si vous utilisez un assistant IA de codage comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification avec Auth0 en quelques minutes à l’aide des agent skills.

Installer :

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

Ensuite, demandez à votre assistant IA :

Add Auth0 authentication to my React Native app

Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera react-native-auth0, configurera les dépendances natives et mettra en place votre flux d’authentification. Documentation complète sur les agent skills →

​

Pour commencer

1. Créer un nouveau projet React Native

   Créez un nouveau projet React Native pour ce Quickstart.

   Dans votre terminal :

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

   Configurez votre projet avec :

   • Nom: Auth0ReactNativeSample
   • Package Name: com.auth0.samples.reactnative

   Vous créerez ainsi une application React Native avec la dernière version stable. Le SDK Auth0 nécessite React Native 0.78.0+ et React 19.0.0+.

2. Installer le SDK d’Auth0

   Ajoutez le SDK React Native d’Auth0 à votre projet.

   npm install react-native-auth0
   

   Pour iOS, installez les dépendances natives :

   cd ios && pod install && cd ..
   

   Le SDK assure automatiquement la liaison sur les deux plateformes. L’étape pod install installe les modules natifs iOS requis (Auth0.swift, JWTDecode, SimpleKeychain).

3. Configurer votre application Auth0

   Créez et configurez une application Auth0 pour qu’elle fonctionne avec votre application React Native.

   1. Accédez au Auth0 Dashboard
   2. Cliquez sur Applications > Applications > Create Application
   3. Dans la fenêtre contextuelle, saisissez un nom pour votre application (p. ex., Auth0 React Native Sample), sélectionnez Native comme type d’application, puis cliquez sur Create
   4. Allez à l’onglet Settings dans la page Application Details
   5. Notez les valeurs de Domain et de Client ID

   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
   

   URLs de déconnexion autorisées :

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

   Remplacez {yourDomain} par votre Auth0 domain réel (p. ex., dev-abc123.us.auth0.com).

   Les Allowed Callback URLs constituent une mesure de sécurité essentielle pour s’assurer que les utilisateurs sont redirigés de façon sécuritaire vers votre application après l’authentification. Sans URL correspondante, le processus de login échouera et les utilisateurs verront une page d’erreur Auth0 au lieu d’accéder à votre application.

   Les Allowed Logout URLs sont essentielles pour offrir une expérience utilisateur fluide lors de la déconnexion. Sans URL correspondante, les utilisateurs ne seront pas redirigés vers votre application après la déconnexion et resteront plutôt sur une page Auth0 générique.

   Le schéma d’URL inclut .auth0 après votre identifiant de bundle afin que le callback soit acheminé vers votre application précise. Pour ce Quickstart, l’identifiant de bundle est org.reactjs.native.example.auth0reactnativesample.

   Important : Le schéma de l’URL de callback doit inclure .auth0 après votre identifiant de bundle (p. ex., org.reactjs.native.example.auth0reactnativesample.auth0://). Cela est nécessaire pour que le SDK puisse traiter correctement le callback d’authentification.

4. Configurer les plateformes natives

   Configurez iOS et Android pour prendre en charge le callback d’authentification.

   Configuration Android :

   Ouvrez android/app/build.gradle et ajoutez les espaces réservés du manifeste dans defaultConfig :

   android/app/build.gradle

   android {
       defaultConfig {
           applicationId "com.auth0reactnativesample"
           // ... autre configuration
           
           // Ajouter les espaces réservés du manifeste Auth0
           manifestPlaceholders = [
               auth0Domain: "{yourDomain}",
               auth0Scheme: "${applicationId}.auth0"
           ]
       }
   }
   

   Remplacez {yourDomain} par votre domaine Auth0 (par ex. dev-abc123.us.auth0.com).

   Configuration d’iOS :

   AppDelegate.mm (Objective-C)

   Ouvrez ios/Auth0ReactNativeSample/AppDelegate.mm et ajoutez la méthode de gestion des URL :

   ios/Auth0ReactNativeSample/AppDelegate.mm

   #import <React/RCTLinkingManager.h>
   
   // Ajoutez cette méthode dans le bloc @implementation
   - (BOOL)application:(UIApplication *)app
               openURL:(NSURL *)url
               options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
   {
     return [RCTLinkingManager application:app openURL:url options:options];
   }
   

   AppDelegate.swift (Swift)

   Ouvrez ios/Auth0ReactNativeSample/AppDelegate.swift et ajoutez la méthode de gestion des URL :

   ios/Auth0ReactNativeSample/AppDelegate.swift

   import React
   
   // Ajoutez cette méthode dans la classe AppDelegate
   func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
     return RCTLinkingManager.application(app, open: url, options: options)
   }
   

   Ouvrez ios/Auth0ReactNativeSample/Info.plist et ajoutez le schéma d’URL. Ajoutez ce qui suit avant la balise de fermeture </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>
   

   Le schéma d’URL utilise votre identifiant de bundle, suivi de .auth0. Cela garantit que le callback est redirigé vers votre application après la fin de l’authentification dans le navigateur.

5. Configuration du composant d’application

   Configurez le composant principal de votre application selon l’approche de mise en œuvre choisie.

   Avec Hooks (et Provider)

   Remplacez le contenu de App.tsx et enveloppez votre application dans le composant 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;
   

   Remplacez {yourDomain} par votre domaine Auth0 et {yourClientId} par votre Client ID dans l’Auth0 Dashboard.

   Auth0Provider initialise le SDK et fournit le contexte d’authentification à tous les composants enfants par l’intermédiaire du hook useAuth0.

   Avec classe (sans Provider)

   Remplacez le contenu de App.tsx par un conteneur simple pour votre composant basé sur une classe :

   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;
   

   L’approche basée sur une classe ne nécessite pas Auth0Provider, puisqu’elle utilise directement l’instance de classe Auth0. La configuration Auth0 se trouvera dans le composant MainScreen.

6. Implement Login et Logout

   Créez un composant d’écran qui gère la connexion et la déconnexion. Vous pouvez choisir entre une approche basée sur les hooks (recommandée) ou une approche basée sur les classes.

   Avec Hooks (recommandé)

   Créez src/MainScreen.tsx avec le 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;
   

   À base de classes

   Créez src/MainScreen.tsx en utilisant directement la classe 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;
   

   Remplacez {yourDomain} par votre domaine Auth0 et {yourClientId} par votre Client ID provenant du Auth0 Dashboard.

   La méthode authorize() (hooks) ou auth0.webAuth.authorize() (class) ouvre l’Universal Login d’Auth0 dans un navigateur sécurisé (ASWebAuthenticationSession sur iOS, Chrome Custom Tabs sur Android). La méthode clearSession() déconnecte l’utilisateur et efface la session du navigateur ainsi que les identifiants stockés.

7. Lancez votre application

   Compilez et exécutez votre application React Native sur un appareil ou un émulateur.

   Pour iOS (macOS requis) :

   npx react-native run-ios
   

   Pour Android :

   npx react-native run-android
   

   Déroulement attendu :

   1. L’application se lance et affiche le bouton “Se connecter”
   2. Touchez Se connecter → Le navigateur s’ouvre avec Auth0 Universal Login
   3. Terminez la connexion (créer un compte ou se connecter)
   4. Le navigateur se ferme → Retour automatique à l’application
   5. Le profil utilisateur s’affiche avec le nom, l’adresse courriel et l’avatar

   Le simulateur iOS nécessite un compte Apple Developer valide pour ASWebAuthenticationSession. Pour effectuer des tests sur le simulateur sans compte, utilisez plutôt un appareil physique ou un émulateur Android.

Point de contrôle

Vous devriez maintenant disposer d’une expérience de connexion avec Auth0 entièrement fonctionnelle sur votre appareil ou votre émulateur. L’application utilise l’authentification sécurisée dans le navigateur et gère automatiquement les identifiants.

---

​

Résolution des problèmes et options avancées

Problèmes courants et solutions

​

Erreur « URL de rappel non valide »

Solution :

1. Vérifiez que l’URL exacte (y compris le suffixe .auth0) figure dans Allowed URL de rappel de votre Auth0 Dashboard
2. Assurez-vous que les URL iOS et Android ont toutes deux été ajoutées
3. Vérifiez que {yourDomain} est remplacé par votre véritable domaine Auth0

​

L’application ne revient pas après la connexion (iOS)

Correctif :

1. Vérifiez que Info.plist contient l’entrée CFBundleURLSchemes avec $(PRODUCT_BUNDLE_IDENTIFIER).auth0
2. Vérifiez que AppDelegate.mm inclut la méthode de gestion des URL
3. Assurez-vous que le schéma d’URL correspond à votre identifiant de bundle

​

La compilation Android échoue

Correctif :

1. Ajoutez les espaces réservés du manifeste auth0Domain et auth0Scheme à build.gradle
2. Synchronisez le projet avec les fichiers Gradle
3. Nettoyez la compilation : ./gradlew clean

​

Erreur « PKCE non autorisé »

Correctif :

1. Accédez à Auth0 Dashboard → Applications → votre application
2. Remplacez le type d’application par Native
3. Enregistrez les modifications et réessayez

​

L’installation de Pod échoue (iOS)

Correctif :

1. Mettez à jour CocoaPods : sudo gem install cocoapods
2. Mettez à jour le dépôt Pod : pod install --repo-update
3. Si le problème persiste, supprimez Podfile.lock et le dossier ios/Pods, puis exécutez de nouveau pod install

​

Erreur d’annulation par l’utilisateur

Gérez-la correctement dans votre fonction de login :

const login = async () => {
  try {
    await authorize({scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // L’utilisateur a fermé l’écran de connexion - gérez cela correctement
      console.log('Login cancelled by user');
    } else {
      console.error('Login failed:', e);
    }
  }
};

​

Boîte de dialogue d’alerte iOS

Sur iOS, les utilisateurs voient une boîte de dialogue d’autorisation : “App Name” Wants to Use “auth0.com” to Sign In. Il s’agit du comportement attendu de ASWebAuthenticationSession. Les utilisateurs doivent appuyer sur Continue pour poursuivre.

Pour personnaliser ce comportement, vous pouvez utiliser des sessions éphémères (désactive SSO) :

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

Récupérer les jetons d’accès

Utilisez la méthode getCredentials() pour récupérer les jetons nécessaires aux appels d’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}`,
        },
      });
      // Gérer la réponse
    } catch (e) {
      console.error('Failed to get credentials', e);
    }
  };
};

Incluez le scope offline_access pendant la connexion pour recevoir un refresh token : authorize({scope: 'openid profile email offline_access'}). Cela permet le renouvellement automatique du jeton.

Vérifier l’état de l’authentification au lancement de l’application

Utilisez hasValidCredentials() pour vérifier si l’utilisateur est déjà connecté :

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();
        // L’utilisateur est authentifié, chargez ses données
      }
    };
    checkAuth();
  }, []);
};

Déploiement en production

​

Avant de déployer en production

Utilisez des URL de rappel HTTPS pour une sécurité accrue :

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

Configurez Android App Links dans Auth0 Dashboard :

• Settings → Advanced Settings → Device Settings
• Ajoutez l’empreinte SHA-256 de votre application

Configurez les Universal Links iOS :

• Ajoutez la capacité Associated Domains dans Xcode
• Ajoutez webcredentials:{yourDomain} à Associated Domains

Activez l’authentification biométrique pour les applications sensibles à l’aide de localAuthenticationOptions dans Auth0Provider

Vérifiez les paramètres de sécurité dans Auth0 Dashboard :

• Activez OIDC Conformant dans Advanced Settings
• Configurez l’expiration du jeton de façon appropriée
• Configurez Brute Force Protection
• Testez sur plusieurs appareils et versions du système d’exploitation
• Mettez en place une gestion appropriée des erreurs en cas de problème réseau

• Exemple d’application
• Guide de migration (v4 vers v5)