Authentification React avec Didit : démarrage rapide

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

Configurez l’application et copiez auth.js depuis le guide de démarrage JavaScript.
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.
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.
Validez chaque requête protégée sur votre backend. Masquer un composant ne constitue pas une autorisation.

SignInButton.jsx

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é 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.

Dernière modification le 7 novembre 2026

Guides