Intégration Auth0 React Native

Ajoutez l'authentification à des applications mobiles React Native et Expo en utilisant react-native-auth0.

Prérequis

• Application React Native ou Expo
• Compte Auth0 et application configurée comme type Native
• Si vous n'avez pas encore configuré Auth0, utilisez d'abord la skill auth0-quickstart

Quand ne PAS utiliser

• Expo managed workflow - Utilisez la skill auth0-expo pour les applications Expo avec config plugin
• Applications React web - Utilisez la skill auth0-react pour les SPAs (Vite/CRA)
• React Server Components - Utilisez auth0-nextjs pour les applications Next.js
• Applications non-React native - Utilisez les SDKs spécifiques à la plateforme (Swift pour iOS, Kotlin pour Android)
• APIs Backend - Utilisez les bibliothèques de validation JWT pour votre langage serveur

Flux de démarrage rapide

1. Installer le SDK

Expo:

npx expo install react-native-auth0

React Native CLI:

npm install react-native-auth0
npx pod-install  # iOS uniquement

2. Configurer l'environnement

Pour une configuration automatisée avec Auth0 CLI, consultez le Setup Guide pour les scripts complets.

Pour une configuration manuelle:

Créez .env:

AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id

3. Configurer les plateformes natives

iOS - Mettez à jour ios/{YourApp}/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>

Android - Mettez à jour android/app/src/main/AndroidManifest.xml:

<activity
    android:name="com.auth0.android.provider.RedirectActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="YOUR_AUTH0_DOMAIN"
            android:pathPrefix="/android/${applicationId}/callback"
            android:scheme="${applicationId}" />
    </intent-filter>
</activity>

Expo - Mettez à jour app.json:

{
  "expo": {
    "scheme": "your-app-scheme",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

4. Ajouter l'authentification avec Auth0Provider

Encapsulez votre application avec Auth0Provider:

import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';

export default function Root() {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENT_ID}
    >
      <App />
    </Auth0Provider>
  );
}

5. Utiliser le hook useAuth0

import React from 'react';
import { View, Button, Text, ActivityIndicator } from 'react-native';
import { useAuth0 } from 'react-native-auth0';

export default function App() {
  const { user, authorize, clearSession, isLoading } = useAuth0();

  const login = async () => {
    try {
      await authorize({
        scope: 'openid profile email'
      });
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  const logout = async () => {
    try {
      await clearSession();
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  if (isLoading) {
    return <ActivityIndicator />;
  }

  return (
    <View>
      {user ? (
        <>
          <Text>Welcome, {user.name}!</Text>
          <Text>{user.email}</Text>
          <Button title="Logout" onPress={logout} />
        </>
      ) : (
        <Button title="Login" onPress={login} />
      )}
    </View>
  );
}

6. Tester l'authentification

Expo:

npx expo start

React Native:

npx react-native run-ios
# ou
npx react-native run-android

Documentation détaillée

• Setup Guide - Configuration automatisée, configuration native, deep linking
• Patterns Guide - Stockage sécurisé, authentification biométrique, actualisation des jetons
• API Reference - API SDK complète, méthodes, options de configuration

Erreurs courantes

Skills connexes

• auth0-quickstart - Configuration de base d'Auth0
• auth0-migration - Migrer depuis un autre fournisseur d'authentification
• auth0-mfa - Ajouter l'authentification multifacteur

Référence rapide

API du hook principal:

• useAuth0() - Hook principal pour l'authentification
• authorize() - Initier la connexion
• clearSession() - Déconnexion
• user - Objet profil utilisateur
• getCredentials() - Obtenir les jetons pour les appels API
• isLoading - État de chargement

Cas d'usage courants:

• Connexion/Déconnexion → Voir Étape 5 ci-dessus
• Stockage sécurisé des jetons → Automatique avec Auth0Provider
• Authentification biométrique → Patterns Guide
• Appels API avec jetons → Patterns Guide
• Actualisation des jetons → Automatique avec getCredentials()

Références

• Documentation du SDK Auth0 React Native
• Quickstart Auth0 React Native
• Référentiel GitHub du SDK