Ajouter la connexion à votre application React

Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations du profil utilisateur dans une application monopage (SPA) utilisant React, à l’aide du SDK React d’Auth0.

Utilisez l’IA pour intégrer Auth0

Si vous utilisez un assistant de codage par IA 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-react

Demandez ensuite à votre assistant IA :

Add Auth0 authentication to my React app

Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera @auth0/auth0-react, configurera Auth0Provider et créera tous les composants nécessaires. Documentation complète sur les agent skills →

Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

• Node.js 20 LTS ou une version ultérieure
• npm 10+ ou yarn 1.22+ ou pnpm 8+

Vérifiez l’installation : node --version && npm --version

Compatibilité des versions de React : Ce guide de démarrage rapide fonctionne avec React 18.x et les versions ultérieures.

​

Premiers pas

Ce guide de démarrage rapide vous montre comment ajouter l’authentification Auth0 à une application React. Vous créerez une application monopage sécurisée avec des fonctionnalités de connexion, de déconnexion et de profil utilisateur à l’aide du SDK React d’Auth0.

1. Créer un projet

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

   npm create vite@latest auth0-react -- --template react-ts
   

   Ouvrez le projet

   cd auth0-react
   
2. Installez le SDK React d’Auth0

   npm add @auth0/auth0-react && npm install
   
3. Configurez votre application Auth0

   La prochaine étape consiste à créer une nouvelle application dans votre locataire Auth0 et à ajouter les variables d’environnement à votre projet.

   Vous avez trois options pour configurer votre application Auth0 : utiliser l’outil Quick Setup (recommandé), exécuter une commande CLI ou la configurer manuellement dans le Dashboard :

   Quick Setup (recommandé)

   Créez une application Auth0 et copiez le fichier .env prérempli avec les bonnes valeurs de configuration.

   CLI

   Exécutez la commande suivante à la racine de votre projet pour créer une application Auth0 et générer un fichier .env :

   Mac

   # Installer Auth0 CLI (si ce n’est pas déjà fait)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configurer l’application Auth0 et générer le fichier .env
   auth0 qs setup --app --type spa --framework react --build-tool vite --name "My App" --port 5173
   

   # Installer Auth0 CLI (si ce n’est pas déjà fait)
   scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
   scoop install auth0
   
   # Configurer l’application Auth0 et générer le fichier .env
   auth0 qs setup --app --type spa --framework react --build-tool vite --name "My App" --port 5173
   

   Cette commande permet de :

   1. Vérifier si vous êtes authentifié (et demander une connexion au besoin)
   2. Créer une application monopage Auth0 configurée pour http://localhost:5173
   3. Générer un fichier .env contenant VITE_AUTH0_DOMAIN et VITE_AUTH0_CLIENT_ID

   Dashboard

   Avant de commencer, créez un fichier .env à la racine de votre projet

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Accédez à l’Auth0 Dashboard
   2. Cliquez sur Applications > Applications > Create Application
   3. Dans la fenêtre contextuelle, entrez un nom pour votre application, sélectionnez Single Page Web Application comme type d’application, puis cliquez sur Create
   4. Ouvrez l’onglet Settings de la page Application Details
   5. Remplacez YOUR_AUTH0_APP_DOMAIN et YOUR_AUTH0_APP_CLIENT_ID dans le fichier .env par les valeurs Domaine et ID client du dashboard

   Enfin, dans l’onglet Settings de la page Application Details, configurez les URL suivantes :

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

   Allowed Callback URLs est une mesure de sécurité essentielle pour que les utilisateurs soient 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.

   Allowed Logout URLs est essentiel pour offrir une expérience 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.

   Allowed Web Origins est essentiel pour l’authentification silencieuse. Sans cela, les utilisateurs seront déconnectés lorsqu’ils actualiseront la page ou reviendront plus tard dans votre application.

   Vérifiez que votre fichier .env existe : cat .env (Mac/Linux) ou type .env (Windows)

4. Ajouter le fournisseur

   src/main.tsx

   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import './index.css'; // Importation du fichier CSS principal
   import App from './App.tsx';
   import { Auth0Provider } from '@auth0/auth0-react';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <Auth0Provider
         domain={import.meta.env.VITE_AUTH0_DOMAIN}
         clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
         authorizationParams={{
           redirect_uri: window.location.origin
         }}
       >
         <App />
       </Auth0Provider>
     </StrictMode>
   );
   

5. Créer des composants de connexion, de déconnexion et de profil

   Créer des fichiers

   Mac/Linux

   touch src/LoginButton.tsx && touch src/LogoutButton.tsx && touch src/Profile.tsx
   

   New-Item -ItemType File -Path src/LoginButton.tsx
   New-Item -ItemType File -Path src/LogoutButton.tsx
   New-Item -ItemType File -Path src/Profile.tsx
   

   Et ajoutez les extraits de code suivants

6. Lancez votre application

   npm run dev
   

   Si le port 5173 est déjà utilisé, exécutez : npm run dev -- --port 5174, puis mettez à jour les URL de rappel de votre application Auth0 à http://localhost:5174

Vérification

Vous devriez maintenant avoir une page de connexion Auth0 entièrement fonctionnelle accessible sur votre localhost

---

​

Utilisation avancée

Protéger des routes avec React Router

Utilisez l’état d’authentification d’Auth0 pour protéger certaines routes de votre application :

src/App.jsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Profile from './components/Profile';
import Dashboard from './components/Dashboard';
import LoginButton from './components/LoginButton';

function ProtectedRoute({ children }) {
  const { isAuthenticated, isLoading } = useAuth0();
  
  if (isLoading) return <div>Loading...</div>;
  
  return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginButton />} />
        <Route 
          path="/profile" 
          element={
            <ProtectedRoute>
              <Profile />
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

Appeler des API protégées

Configurez votre Auth0Provider pour inclure une audience d’API et utiliser la méthode getAccessTokenSilently :

src/main.jsx

import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "YOUR_API_IDENTIFIER"
    }}
  >
    <App />
  </Auth0Provider>
);

Effectuez ensuite des appels authentifiés à l’API :

src/components/ApiCall.jsx

import { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function ApiCall() {
  const { getAccessTokenSilently } = useAuth0();
  const [apiResponse, setApiResponse] = useState(null);

  const callProtectedApi = async () => {
    try {
      const token = await getAccessTokenSilently();
      
      const response = await fetch('/api/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      const data = await response.json();
      setApiResponse(data);
    } catch (error) {
      console.error('API call failed:', error);
    }
  };

  return (
    <div>
      <button onClick={callProtectedApi}>Call API</button>
      {apiResponse && <pre>{JSON.stringify(apiResponse, null, 2)}</pre>}
    </div>
  );
}

export default ApiCall;

Utiliser Auth0 avec des hooks personnalisés

Créez des hooks personnalisés réutilisables pour les scénarios d’authentification courants :

src/hooks/useAuthenticatedUser.js

import { useAuth0 } from '@auth0/auth0-react';
import { useEffect, useState } from 'react';

export function useAuthenticatedUser() {
  const { user, isAuthenticated, isLoading, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    if (isAuthenticated && !isLoading) {
      getAccessTokenSilently()
        .then(token => setAccessToken(token))
        .catch(console.error);
    }
  }, [isAuthenticated, isLoading, getAccessTokenSilently]);

  return {
    user,
    accessToken,
    isAuthenticated,
    isLoading
  };
}

Utilisation dans les composants :

src/components/UserDashboard.jsx

import { useAuthenticatedUser } from '../hooks/useAuthenticatedUser';

function UserDashboard() {
  const { user, accessToken, isLoading } = useAuthenticatedUser();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user?.name}</h1>
      <p>Access Token: {accessToken ? 'Available' : 'Not available'}</p>
    </div>
  );
}