React-Schnellstart für Didit-Authentifizierung

​

Mit gehosteter Authentifizierung beginnen

1. Konfigurieren Sie die Anwendung und kopieren Sie auth.js aus dem JavaScript-Schnellstart.
2. Leiten Sie Ihre registrierte /auth/callback-Route zu einer Seite, die handleCallback() genau einmal aufruft. Verhindern Sie doppelte Effekte, auch die Wiederholung von Effekten während der Entwicklung: Ein Code kann nur einmal verwendet werden.
3. Halten Sie die Zustände für das Laden, den abgemeldeten Zustand, den angemeldeten Zustand und einen fehlgeschlagenen Sitzungszustand getrennt. Zeigen Sie Fehler bei der Anmeldung an, ohne Token oder Callback-Codes zu protokollieren.
4. Validieren Sie jede geschützte Anfrage in Ihrem Backend. Das Ausblenden einer Komponente ist keine Autorisierung.

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>;
}

​

Release-Vorschau des React-Pakets