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

# Authentification React avec Didit : démarrage rapide

> Ajoutez l'authentification hébergée Didit à une application React : gestion des callbacks, états de chargement et accès validé côté serveur.

> [!WARNING]
>
> L’authentification est une nouveauté : la disponibilité du package React Authentication dépend de la release. Utilisez le parcours hébergé uniquement avec une application activée. Le catalogue de composants ci-dessous décrit le contrat à venir, et non une API de package actuellement publiée.

## Commencer avec l’authentification hébergée

1. Configurez l’application et copiez `auth.js` depuis le [guide de démarrage JavaScript](https://docs.didit.me/fr/authentication/quickstarts/javascript.md).
2. Faites pointer la route `/auth/callback` que vous avez enregistrée vers une page qui appelle `handleCallback()` une seule fois. Évitez la double exécution des effets, y compris le rejeu des effets en développement : un code ne peut être utilisé qu’une seule fois.
3. Gardez distincts les états de chargement, d’utilisateur déconnecté, d’utilisateur connecté et de session en échec. Affichez les erreurs de connexion sans journaliser les tokens ni les codes de rappel.
4. Validez chaque requête protégée sur votre backend. Masquer un composant ne constitue pas une autorisation.

```jsx SignInButton.jsx theme={null}
import { useState } from "react";
import { signIn } from "./auth.js";

export function SignInButton() {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  async function start() {
    setBusy(true);
    setError("");
    try {
      await signIn();
    } catch {
      setError("Could not start sign-in. Please try again.");
      setBusy(false);
    }
  }
  return <div>
    <button disabled={busy} onClick={start}>{busy ? "Opening sign-in…" : "Sign in"}</button>
    {error && <p role="alert">{error}</p>}
  </div>;
}
```

Appelez `getSession()` après le rappel pour alimenter la vue de l’utilisateur. Lors de la déconnexion, effacez les caches propres à l’utilisateur et gérez explicitement l’échec de la révocation côté serveur. L’utilitaire JavaScript minimal ne conserve pas les sessions après un rechargement de la page.

## Aperçu de la version du package React

Le package `@didit-protocol/auth-react` prévu fournit une racine `DiditAuth`, ainsi que `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` et `ConnectedAgents`. Les props des composants, le routage des rappels et les versions du package doivent être repris de la version publiée. Ne supposez pas que le SDK de vérification fournit ces composants.

Les signaux automatiques et `vendorData` dépendent de la version du cœur d’Authentication. D’ici là, utilisez la correspondance de votre backend à partir du `sub` validé. Consultez le [prompt d’intégration partagé](https://docs.didit.me/fr/integration/integration-prompt.md) pour la vérification et la surveillance associées à la connexion.

Testez une redirection annulée, une connexion lancée par un double clic, le rafraîchissement d’un rappel, une session expirée, la MFA et la déconnexion. Affichez les états de chargement et d’erreur sans montrer de données protégées provenant d’un utilisateur précédent.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.