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

# React-Schnellstart für Didit-Authentifizierung

> Didit Authentifizierung in React-Apps einbinden: Callback-Verarbeitung, Ladezustände und serverseitig validierter Zugriff.

> [!WARNING]
>
> Die Authentifizierung ist neu: Das React-Authentifizierungspaket hängt vom Release ab. Verwenden Sie den gehosteten Ablauf nur mit einer aktivierten Anwendung. Der Komponentenkatalog unten beschreibt die kommende Schnittstelle, nicht eine derzeit veröffentlichte Paket-API.

## Mit gehosteter Authentifizierung beginnen

1. Konfigurieren Sie die Anwendung und kopieren Sie `auth.js` aus dem [JavaScript-Schnellstart](https://docs.didit.me/de/authentication/quickstarts/javascript.md).
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.

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

Rufen Sie nach dem Callback `getSession()` auf, um Ihre Benutzeransicht zu befüllen. Bei der Abmeldung leeren Sie benutzerspezifische Caches und behandeln einen fehlgeschlagenen serverseitigen Widerruf ausdrücklich. Der minimale JavaScript-Helfer speichert Sitzungen nach einem Neuladen nicht.

## Release-Vorschau des React-Pakets

Das geplante Paket `@didit-protocol/auth-react` stellt eine `DiditAuth`-Wurzelkomponente sowie `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` und `ConnectedAgents` bereit. Komponenten-Props, Callback-Routing und Paketversionen müssen aus dem veröffentlichten Release übernommen werden. Gehen Sie nicht davon aus, dass das Verifizierungs-SDK diese Komponenten bereitstellt.

Automatische Signale und `vendorData` hängen vom Authentication-Core-Release ab. Bis dahin verwenden Sie die Zuordnung in Ihrem Backend auf Basis des validierten `sub`. Der [gemeinsame Integrations-Prompt](https://docs.didit.me/de/integration/integration-prompt.md) beschreibt Verifizierung und Überwachung zusammen mit der Anmeldung.

Testen Sie einen abgebrochenen Redirect, eine durch Doppelklick ausgelöste Anmeldung, das Neuladen der Callback-Seite, eine abgelaufene Sitzung, MFA und die Abmeldung. Zeigen Sie sowohl den Ladezustand als auch den Fehlerzustand an, ohne geschützte Daten eines vorherigen Benutzers darzustellen.


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