Ajouter l’authentification à votre application Expo

Ce guide montre comment intégrer Auth0 à toute application Expo à l’aide du SDK React Native d’Auth0.

Ce guide de démarrage rapide s’adresse aux applications Expo. Pour intégrer Auth0 à votre application React Native, consultez le guide de démarrage rapide React Native.

Utiliser l’IA pour intégrer Auth0

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

Installation :

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

Demandez ensuite à votre assistant IA :

Add Auth0 authentication to my Expo app

Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera le SDK react-native-auth0, configurera le plugiciel Expo et mettra en place les flux de connexion et de déconnexion. Documentation complète sur les agent skills →

​

Pour commencer

1. Créer un nouveau projet Expo

   Créez un nouveau projet Expo pour suivre ce guide de démarrage rapide.

   Dans votre terminal :

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

   Cela crée une application Expo minimale avec la dernière version du SDK, prête pour l’intégration de modules natifs. L’indicateur --template blank fournit un point de départ propre, sans code de base supplémentaire.

   Ce SDK N’est PAS compatible avec Expo Go car il nécessite du code natif personnalisé. Vous devez utiliser npx expo run:ios ou npx expo run:android pour créer une version de développement.

2. Installez le SDK Auth0

   Ajoutez le SDK Auth0 pour React Native à votre projet.

   npx expo install react-native-auth0
   

   L’utilisation de npx expo install garantit la compatibilité des versions avec celle de votre SDK Expo. Le SDK se configure automatiquement par l’intermédiaire du système de plugins d’Expo.

3. Configurer le plugin Expo

   Configurez le plugiciel Auth0 pour gérer automatiquement la configuration native sur iOS et Android.

   Mettez à jour votre fichier app.json pour y inclure le plugiciel 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"
           }
         ]
       ]
     }
   }
   

   Remplacez {yourDomain} par votre Domaine Auth0 (vous l’obtiendrez à l’étape suivante).

   Important : Vous devez définir bundleIdentifier pour iOS et package pour Android dans votre fichier app.json. Ces identifiants sont requis pour que le SDK Auth0 puisse configurer correctement les projets natifs. Si vous ne précisez pas de schéma personnalisé, le SDK utilisera l’identifiant de bundle comme schéma d’URL.

   Le customScheme doit être en minuscules et ne contenir aucun caractère spécial. Cette valeur sert à construire les URL de rappel et doit être transmise aux méthodes authorize() et clearSession().

4. Configurez votre application Auth0

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

   1. Accédez au Auth0 Dashboard
   2. Cliquez sur Applications > Applications > Create Application
   3. Dans la fenêtre contextuelle, entrez un nom pour votre application (p. ex., Auth0 Expo Sample), sélectionnez Native comme type d’application, puis cliquez sur Create
   4. Dans la page Application Details, ouvrez l’onglet Settings
   5. Prenez en note les valeurs de Domaine et de ID client
   6. Mettez à jour la valeur domain dans la configuration du plugin de votre fichier app.json avec votre domaine Auth0

   Allowed Callback URLs:

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

   URL de déconnexion autorisées :

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

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

   Allowed Callback URLs sont une mesure de sécurité essentielle pour garantir que les utilisateurs sont redirigés de façon sécuritaire 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 lors de 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 Auth0 générique.

   Le format de l’URL de rappel est : {customScheme}://{yourDomain}/{platform}/{bundleIdentifier or packageName}/callback. Le schéma d’URL utilise le customScheme de votre app.json, mais le chemin contient toujours le bundleIdentifier (iOS) ou le package (Android) — et non le schéma personnalisé. Si vous ne précisez pas de customScheme, le SDK utilise par défaut {bundleIdentifier}.auth0 / {packageName}.auth0 comme schéma d’URL.

   Important : Assurez-vous que le customScheme dans vos URL de rappel correspond exactement à la valeur indiquée dans la configuration du plugiciel de votre app.json, et que le chemin contient votre véritable bundleIdentifier (iOS) ou package (Android). Toute discordance entraînera l’échec de l’authentification.

5. Configurer le composant App

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

   Basé sur Hooks (avec Provider)

   Remplacez le contenu de App.js et entourez votre application du composant 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,
     },
   });
   

   Remplacez {yourDomain} par votre Domaine Auth0 et {yourClientId} par votre ID client indiqué 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. Le paramètre customScheme doit correspondre à la valeur définie dans la configuration du plugin app.json.

   Basé sur des classes (sans Provider)

   Remplacez le contenu de App.js par un composant à base de classe :

   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;
   

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

   L’approche fondée sur les classes ne nécessite pas Auth0Provider, puisqu’elle utilise directement l’instance de la classe Auth0. L’option customScheme doit être passée comme deuxième paramètre à authorize() et à clearSession().

   La méthode authorize() ouvre 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 stockés. Le paramètre customScheme doit correspondre à la valeur définie dans la configuration du plugin de votre fichier app.json.

6. Lancez votre application

   Lancez votre application Expo sur un appareil ou un émulateur.

   Commencez par générer les projets natifs iOS et Android :

   npx expo prebuild
   

   Ensuite, exécutez sur la plateforme cible :

   Pour iOS :

   npx expo run:ios
   

   Pour Android :

   npx expo run:android
   

   Flux attendu :

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

   Si vous modifiez la configuration du plugin dans app.json, exécutez npx expo prebuild --clean pour régénérer les projets natifs avec la configuration mise à jour.

   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 avoir 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 informations d’identification dans l’espace de stockage sécurisé de l’appareil.

---

​

Dépannage et éléments avancés

Problèmes courants et solutions

​

”Violation d’invariant : le module natif ne peut pas être nul”

Cette erreur se produit lorsque vous essayez d’utiliser le SDK avec Expo Go.

Solution :

Le SDK Auth0 requiert du code natif personnalisé qui n’est pas disponible dans Expo Go. Utilisez plutôt une version de développement :

npx expo run:ios
# ou
npx expo run:android

​

Erreur de non-correspondance de l’URL de rappel

Solution :

Vérifiez que les trois éléments suivants correspondent exactement :

1. customScheme dans la configuration du plugiciel dans app.json
2. le paramètre customScheme passé à authorize() et clearSession()
3. les URL de rappel dans Auth0 Dashboard (Applications → Your App → Settings → Application URIs)

​

Erreur “PKCE not allowed”

Correctif :

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

​

Le prebuild échoue ou le plugiciel n’est pas appliqué

Correctif :

# Nettoyer et régénérer les projets natifs
npx expo prebuild --clean

​

La build iOS échoue avec des erreurs Pod

Correctif :

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

​

Erreur d’annulation par l’utilisateur

Gérez cette situation correctement dans votre fonction de connexion :

const handleLogin = async () => {
  try {
    await authorize({customScheme: 'auth0sample', scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // L’utilisateur a fermé l’écran de connexion - gérer la situation correctement
      console.log('Connexion annulée par l’utilisateur');
    } else {
      console.error('Échec de la connexion :', e);
    }
  }
};

​

Boîte de dialogue 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 (cela désactive le SSO) :

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

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

Utilisez la méthode getCredentials() pour récupérer les jetons à utiliser dans les 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}`,
        },
      });
      // Traiter la réponse
    } catch (e) {
      console.error('Impossible de récupérer les informations d’identification', e);
    }
  };
};

Incluez le scope offline_access pendant la connexion pour recevoir un Jeton d’actualisation : authorize({customScheme: 'auth0sample', scope: 'openid profile email offline_access'}). Cela permet le renouvellement automatique du jeton.

Vérifier l’état d’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 avec EAS Build

Pour les builds de production, utilisez EAS Build plutôt que des builds de développement locaux.

Installez EAS CLI :

npm install -g eas-cli

Créez eas.json à la racine de votre projet :

eas.json

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

Créez le build de production :

# Créer le build pour les deux plateformes
eas build --platform all

# Ou créer le build pour une plateforme précise
eas build --platform ios
eas build --platform android

​

Avant le déploiement en production

Utilisez des URL de rappel HTTPS pour renforcer la sécurité :

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

Configurez les Android App Links dans Auth0 Dashboard :

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

Configurez les iOS Universal Links :

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

Passez en revue les paramètres de sécurité dans Auth0 Dashboard :

• Activez OIDC Conformant dans Advanced Settings
• Configurez Token Expiration de manière appropriée
• Configurez Brute Force Protection
• Testez sur plusieurs appareils et versions du système d’exploitation
• Mettez en place une gestion adéquate des erreurs en cas d’échec réseau

Pour les applications de production, envisagez d’utiliser des URL de rappel HTTPS avec Universal Links (iOS) et App Links (Android) plutôt que des schémas personnalisés pour renforcer la sécurité.

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