Ajouter la connexion à votre application React Native

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

Ce guide de démarrage rapide porte sur le framework React Native. Pour intégrer Auth0 à votre application Expo, consultez le guide de démarrage rapide pour Expo.

Utiliser l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes à l’aide des compétences d’agent.

Installer :

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

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 jetons, installera react-native-auth0, configurera les dépendances natives et mettra en place votre flux d’authentification. Documentation complète sur les compétences d’agent →

​

Pour commencer

1. Créer un nouveau projet React Native

   Créez un nouveau projet React Native pour ce guide de démarrage.

   Dans votre terminal :

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

   Configurez votre projet avec :

   • Nom : Auth0ReactNativeSample
   • Nom du package : com.auth0.samples.reactnative

   Cette commande crée 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 Auth0

   Ajoutez le SDK Auth0 pour React Native à votre projet.

   npm install react-native-auth0
   

   Pour iOS, installez les dépendances natives :

   cd ios && pod install && cd ..
   

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

3. Configurez votre application Auth0

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

   1. Accédez au tableau de bord Auth0
   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. Ouvrez l’onglet Settings dans la page des détails de l’application
   5. Prenez en note les valeurs Domain et Client ID

   URL de rappel autorisées :

   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 domaine Auth0 réel (p. ex., dev-abc123.us.auth0.com).

   Les URL de rappel autorisées sont une mesure de sécurité essentielle pour s’assurer que les utilisateurs sont redirigés en toute sécurité vers votre application après l’authentification. Sans URL correspondante, le processus de connexion échouera et les utilisateurs verront une page d’erreur Auth0 au lieu d’accéder à votre application.

   Les URL de déconnexion autorisées sont essentielles pour offrir une expérience utilisateur fluide à la déconnexion. Sans URL correspondante, les utilisateurs ne seront pas redirigés vers votre application après la déconnexion et se retrouveront plutôt sur une page générique d’Auth0.

   Le schéma d’URL inclut .auth0 après votre identifiant de bundle pour que l’URL de rappel soit redirigée vers votre application. Pour ce guide de démarrage rapide, l’identifiant de bundle est org.reactjs.native.example.auth0reactnativesample.

   Important : Le schéma de l’URL de rappel 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 gérer correctement le rappel d’authentification.

4. Configurer les plateformes natives

   Configurez iOS et Android pour prendre en charge le rappel 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 (p. 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 ceci 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 l’identifiant de votre bundle, suivi de .auth0. Cela garantit que l’URL de rappel est acheminée vers votre application une fois l’authentification terminée dans le navigateur.

5. Configurer le composant App

   Configurez le composant principal de votre application selon l’approche d’implémentation choisie.

   Basée sur les hooks (avec 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 ID client dans le tableau de bord Auth0.

   Auth0Provider initialise le SDK et fournit le contexte d’authentification à tous les composants enfants au moyen du hook useAuth0.

   Basée sur les classes (sans Provider)

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

   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 les classes ne nécessite pas Auth0Provider, puisqu’elle utilise directement une instance de la classe Auth0. La configuration Auth0 se trouvera dans le composant MainScreen.

6. Mettre en place la connexion et la déconnexion

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

   Basé sur des hooks (recommandé)

   Créez src/MainScreen.tsx à l’aide du 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;
   

   Basé sur des classes

   Créez src/MainScreen.tsx en utilisant la classe Auth0 directement :

   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 ID client depuis le tableau de bord Auth0.

   La méthode authorize() (hooks) ou auth0.webAuth.authorize() (classe) ouvre l’interface 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 fois la session du navigateur et les identifiants enregistrés.

7. Exécutez votre application

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

   Pour iOS (macOS requis) :

   npx react-native run-ios
   

   Pour Android :

   npx react-native run-android
   

   Déroulement attendu :

   1. L’app se lance et affiche le bouton “Se connecter”
   2. Touchez Se connecter → Le navigateur s’ouvre sur Auth0 Universal Login
   3. Terminez la connexion (création de compte ou ouverture de session)
   4. Le navigateur se ferme → Retour automatique à l’app
   5. Le profil de l’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 tester sur le simulateur sans compte, utilisez plutôt un appareil physique ou un émulateur Android.

Vérification

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

---

​

Dépannage et options avancées

Problèmes courants et solutions

​

Erreur « Callback URL mismatch »

Solution :

1. Vérifiez que l’URL exacte (y compris le suffixe .auth0) figure dans Allowed Callback URLs de votre tableau de bord Auth0
2. Assurez-vous que les URL iOS et Android ont toutes les 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 comprend 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 de manifeste auth0Domain et auth0Scheme à build.gradle
2. Synchronisez le projet avec les fichiers Gradle
3. Nettoyez la compilation : ./gradlew clean

​

Erreur « PKCE not allowed »

Correctif :

1. Allez dans Auth0 Dashboard → Applications → Your Application
2. Changez le type d’application pour Native
3. Enregistrez les modifications et réessayez

​

L’installation des pods échoue (iOS)

Correctif :

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

​

Erreur d’annulation par l’utilisateur

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

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érer 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 (ce qui désactive le SSO) :

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

Récupération des 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 la portée offline_access pendant la connexion pour recevoir un jeton d’actualisation : authorize({scope: 'openid profile email offline_access'}). Cela permet le renouvellement automatique des jetons.

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é, charger ses données
      }
    };
    checkAuth();
  }, []);
};

Déploiement en production

​

Avant le déploiement en production

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

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

Configurez les liens d’application Android dans le tableau de bord Auth0 :

• Paramètres → Paramètres avancés → Paramètres de l’appareil
• Ajoutez l’empreinte SHA-256 de votre application

Configurez les liens universels iOS :

• Ajoutez la capacité Associated Domains dans Xcode
• Ajoutez webcredentials:{yourDomain} aux 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 le tableau de bord Auth0 :

• Activez OIDC Conformant dans les paramètres avancés
• Configurez l’expiration du jeton de façon appropriée
• Activez la protection contre les attaques par force brute
• Testez sur plusieurs appareils et versions du système d’exploitation
• Prévoyez une gestion adéquate des erreurs en cas d’échec du réseau

• Application exemple
• Guide de migration (v4 vers v5)