Auth0 SDK React : authentification complète avec auth0-react

Intégrer Auth0 dans une application React avec le SDK officiel : installation, configuration, hooks useAuth0, protection des routes et gestion des tokens.

Par Auth0.Expert · 2025-03-10 · 12 min de lecture

React SPA auth0-react

Avant l'installation, voici le code pour ajouter le SDK Auth0 à votre projet React afin de gérer facilement l'authentification et les autorisations.

npm install @auth0/auth0-react
# ou
yarn add @auth0/auth0-react

---

Pour connecter votre application à Auth0, ce code configure le fournisseur Auth0Provider avec vos paramètres de sécurité et de session.

// index.js ou main.jsx
import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Auth0Provider
    domain="login.yourapp.com"
    clientId="YOUR_CLIENT_ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: 'https://api.yourapp.com',
      scope: 'openid email profile',
    }}
    cacheLocation="localstorage" // ou "memory" (plus sécurisé)
    useRefreshTokens={true}
  >
    <App />
  </Auth0Provider>
);

Ce bloc met en place la base pour que toutes les fonctionnalités Auth0 soient disponibles dans votre application React.

---

Cette section montre comment utiliser le hook useAuth0 pour gérer la connexion, la déconnexion, et afficher le profil de l'utilisateur.

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

function Profile() {
  const {
    isAuthenticated,
    isLoading,
    user,
    loginWithRedirect,
    logout,
    getAccessTokenSilently,
  } = useAuth0();

  if (isLoading) return <Spinner />;

  if (!isAuthenticated) {
    return <button onClick={() => loginWithRedirect()}>Connexion</button>;
  }

  return (
    <div>
      <img src={user.picture} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
        Déconnexion
      </button>
    </div>
  );
}

Ce code crée simplement un bouton de connexion/déconnexion et présente le profil utilisateur si la session est active.

---

Pour accéder à une API sécurisée avec le token utilisateur Auth0, voici le code à intégrer dans votre composant React.

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

function Dashboard() {
  const { getAccessTokenSilently } = useAuth0();
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const token = await getAccessTokenSilently({
        authorizationParams: {
          audience: 'https://api.yourapp.com',
          scope: 'read:data',
        },
      });

      const res = await fetch('https://api.yourapp.com/data', {
        headers: { Authorization: `Bearer ${token}` },
      });
      setData(await res.json());
    }

    fetchData();
  }, [getAccessTokenSilently]);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Ce bloc complète l'accès API en récupérant un token avec les bons scopes et en l'utilisant pour authentifier votre requête.

---

Avant de protéger des routes avec Auth0, il existe plusieurs méthodes pour s'assurer que seuls les utilisateurs authentifiés peuvent accéder à certains composants.

Avec withAuthenticationRequired (HOC)

Ce code applique un HOC pour forcer l'authentification sur une page et gérer le redirection lors du chargement.

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

const ProtectedPage = withAuthenticationRequired(Dashboard, {
  onRedirecting: () => <div>Chargement...</div>,
  loginOptions: {
    appState: { returnTo: '/dashboard' },
  },
});

// Dans votre router
<Route path="/dashboard" element={<ProtectedPage />} />

Route Guard personnalisée

Cette méthode crée un composant personnalisé pour vérifier l'état d'authentification et rediriger si besoin.

function PrivateRoute({ children }) {
  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      loginWithRedirect({
        appState: { returnTo: window.location.pathname },
      });
    }
  }, [isLoading, isAuthenticated, loginWithRedirect]);

  if (isLoading || !isAuthenticated) return <PageLoader />;
  return children;
}

Ces deux approches garantissent que vos routes sensibles ne sont jamais accessibles sans authentification.

---

Pour gérer le retour après une authentification réussie avec Auth0, utilisez ce code dans votre composant principal.

// App.jsx
import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { handleRedirectCallback } = useAuth0();

  useEffect(() => {
    if (window.location.search.includes('code=')) {
      handleRedirectCallback().then(({ appState }) => {
        // Rediriger vers la page demandée initialement
        navigate(appState?.returnTo || '/');
      });
    }
  }, []);
}

Ce bloc permet de traiter le callback Auth0 et de rediriger l'utilisateur vers la bonne page après connexion.

---

Voici un tableau qui compare les options de cache de session utilisées dans l’Auth0 SDK React pour une meilleure sécurité ou persistance.

| Option | memory | localstorage | |--------|----------|----------------| | Survit au refresh page | ❌ | ✅ | | Résistant XSS | ✅ | ❌ | | Recommandé si... | App sensible | App grand public |

Avec refresh tokens (useRefreshTokens: true) : même avec cacheLocation: memory, la session survit au refresh grâce au cookie de session Auth0.

---

> 💡 Besoin d'une intégration React Auth0 sur mesure ? Nos développeurs experts React livrent une implémentation sécurisée et testée en moins d'une semaine.

📧 [email protected]

Autres articles