> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter l’authentification à votre application Expo

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

export const HowToSchema = () => <script type="application/ld+json">
    {'{"@context":"https://schema.org","@type":"HowTo"}'}
  </script>;

<HowToSchema />

<Tip>
  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](https://auth0.com/docs/quickstart/native/react-native/interactive).
</Tip>

<Accordion title="Utiliser l’IA pour intégrer Auth0" icon="microchip-ai" iconType="solid" defaultOpen>
  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](https://agentskills.io/home).

  **Installation :**

  ```bash theme={null}
  npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-expo
  ```

  **Demandez ensuite à votre assistant IA :**

  ```text theme={null}
  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 →](/fr-CA/docs/quickstart/agent-skills)
</Accordion>

<div id="get-started">
  ## Pour commencer
</div>

<Steps>
  <Step title="Créer un nouveau projet Expo" stepNumber={1}>
    Créez un nouveau projet Expo pour suivre ce guide de démarrage rapide.

    **Dans votre terminal :**

    ```bash theme={null}
    npx create-expo-app Auth0ExpoSample --template blank
    cd Auth0ExpoSample
    ```

    <Tip>
      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.
    </Tip>

    <Warning>
      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.
    </Warning>
  </Step>

  <Step title="Installez le SDK Auth0" stepNumber={2}>
    Ajoutez le SDK Auth0 pour React Native à votre projet.

    ```bash theme={null}
    npx expo install react-native-auth0
    ```

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="Configurer le plugin Expo" stepNumber={3}>
    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 :

    ```json app.json lines theme={null}
    {
      "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).

    <Warning>
      **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.
    </Warning>

    <Info>
      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()`.
    </Info>
  </Step>

  <Step title="Configurez votre application Auth0" stepNumber={4}>
    Créez et configurez une application Auth0 pour qu’elle fonctionne avec votre application Expo.

    1. Accédez au [Auth0 Dashboard](https://manage.auth0.com/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`).

    <Info>
      **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.
    </Info>

    <Warning>
      **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.
    </Warning>
  </Step>

  <Step title="Configurer le composant App" stepNumber={5}>
    Configurez votre composant d'application principal selon l'approche d'implémentation choisie.

    <Tabs>
      <Tab title="Basé sur Hooks (avec Provider)">
        Remplacez le contenu de `App.js` et entourez votre application du composant `Auth0Provider` :

        ```jsx App.js lines theme={null}
        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.

        <Tip>
          `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`.
        </Tip>
      </Tab>

      <Tab title="Basé sur des classes (sans Provider)">
        Remplacez le contenu de `App.js` par un composant à base de classe :

        ```jsx App.js lines theme={null}
        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.

        <Tip>
          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()`.
        </Tip>
      </Tab>
    </Tabs>

    <Info>
      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`.
    </Info>
  </Step>

  <Step title="Lancez votre application" stepNumber={6}>
    Lancez votre application Expo sur un appareil ou un émulateur.

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

    ```bash theme={null}
    npx expo prebuild
    ```

    **Ensuite, exécutez sur la plateforme cible :**

    **Pour iOS :**

    ```bash theme={null}
    npx expo run:ios
    ```

    **Pour Android :**

    ```bash theme={null}
    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

    <Tip>
      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.
    </Tip>

    <Warning>
      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.
    </Warning>
  </Step>
</Steps>

<Check>
  **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.
</Check>

***

<div id="troubleshooting-advanced">
  ## Dépannage et éléments avancés
</div>

<Accordion title="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 :

  ```bash theme={null}
  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 :**

  ```bash theme={null}
  # Nettoyer et régénérer les projets natifs
  npx expo prebuild --clean
  ```

  ### La build iOS échoue avec des erreurs Pod

  **Correctif :**

  ```bash theme={null}
  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 :

  ```jsx expandable theme={null}
  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) :

  ```jsx theme={null}
  await authorize({customScheme: 'auth0sample', scope: 'openid profile email'}, {ephemeralSession: true});
  ```
</Accordion>

<Accordion title="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 :

  ```jsx expandable lines theme={null}
  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);
      }
    };
  };
  ```

  <Tip>
    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.
  </Tip>
</Accordion>

<Accordion title="Vérifier l’état d’authentification au lancement de l’application">
  Utilisez `hasValidCredentials()` pour vérifier si l’utilisateur est déjà connecté :

  ```jsx expandable lines theme={null}
  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();
    }, []);
  };
  ```
</Accordion>

<Accordion title="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 :**

  ```bash theme={null}
  npm install -g eas-cli
  ```

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

  ```json eas.json lines theme={null}
  {
    "cli": {
      "version": ">= 3.0.0"
    },
    "build": {
      "development": {
        "developmentClient": true,
        "distribution": "internal"
      },
      "preview": {
        "distribution": "internal"
      },
      "production": {}
    }
  }
  ```

  **Créez le build de production :**

  ```bash theme={null}
  # 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é :

  ```text theme={null}
  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

  <Tip>
    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é.
  </Tip>
</Accordion>

* [Application exemple](https://github.com/auth0-samples/auth0-react-native-sample/tree/master/00-Login-Expo)
* [Guide de migration (v4 vers v5)](https://github.com/auth0/react-native-auth0/blob/master/MIGRATION_GUIDE.md)