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

# Quickstart React per l'autenticazione

> Aggiungi l'autenticazione ospitata di Didit a un'applicazione React con gestione dei callback, stati di caricamento e accesso validato lato server.

> [!WARNING]
>
> L'autenticazione è una novità: il pacchetto React Authentication dipende dalla release. Usa il flusso ospitato solo con un'applicazione abilitata. Il catalogo dei componenti qui sotto descrive il contratto previsto, non un'API di pacchetto attualmente pubblicata.

## Inizia con l'autenticazione ospitata

1. Configura l'applicazione e copia `auth.js` dalla [guida rapida JavaScript](https://docs.didit.me/it/authentication/quickstarts/javascript.md).
2. Indirizza il tuo `/auth/callback` registrato a una pagina che chiama `handleCallback()` una sola volta. Proteggiti dagli effetti duplicati, incluso la riesecuzione degli effetti in sviluppo: un codice è monouso.
3. Mantieni distinti gli stati di caricamento, di disconnessione, di connessione e di sessione con errore. Mostra gli errori di accesso senza registrare token o codici di callback.
4. Valida ogni richiesta protetta sul tuo backend. Nascondere un componente non equivale ad autorizzazione.

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

Chiama `getSession()` dopo il callback per popolare la vista dell'utente. Alla disconnessione, cancella le cache specifiche dell'utente e gestisci esplicitamente il caso in cui la revoca sul server fallisce. L'helper JavaScript minimo non conserva le sessioni dopo il ricaricamento.

## Anteprima della release del pacchetto React

Il pacchetto previsto `@didit-protocol/auth-react` fornisce un componente radice `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` e `ConnectedAgents`. Le props dei componenti, l'instradamento dei callback e le versioni del pacchetto devono essere ricavati dalla release pubblicata. Non presumere che l'SDK di verifica fornisca questi componenti.

I segnali automatici e `vendorData` dipendono dalla release del core di Authentication. Fino ad allora, usa la mappatura del tuo backend a partire dal `sub` validato. Consulta la [guida all'integrazione condivisa](https://docs.didit.me/it/integration/integration-prompt.md) per la verifica e il monitoraggio insieme all'accesso.

Testa un reindirizzamento annullato, un accesso con doppio clic, l'aggiornamento della pagina di callback, una sessione scaduta, MFA e il logout. Mostra gli stati di caricamento e di errore senza visualizzare dati protetti di un utente precedente.


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