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

# Inici ràpid d'autenticació amb React

> Afegeix l'autenticació allotjada de Didit a una aplicació React amb gestió de callbacks, estats de càrrega i accés validat al servidor.

> [!WARNING]
>
> L'Authentication és nou: el paquet React d'Authentication depèn del llançament. Utilitza el flux allotjat només amb una aplicació habilitada. El catàleg de components següent descriu el contracte previst, no una API del paquet publicada actualment.

## Comença amb l'autenticació allotjada

1. Configura l'aplicació i copia `auth.js` des de la [guia ràpida de JavaScript](https://docs.didit.me/ca/authentication/quickstarts/javascript.md).
2. Enruta el teu `/auth/callback` registrat a una pàgina que crida `handleCallback()` una sola vegada. Protegeix-te dels efectes duplicats, inclosa la repetició d'efectes en desenvolupament: un codi només es pot usar una vegada.
3. Mantén diferenciats els estats de càrrega, de sessió tancada, de sessió iniciada i de sessió fallida. Mostra els errors d'inici de sessió sense registrar tokens ni codis de callback.
4. Valida cada sol·licitud protegida al teu backend. Amagar un component no és autorització.

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

Crida `getSession()` després del callback per omplir la vista de l'usuari. En tancar la sessió, esborra les memòries cau específiques de l'usuari i gestiona explícitament una revocació fallida al servidor. L'ajudant mínim de JavaScript no persisteix les sessions després de recarregar la pàgina.

## Previsualització del llançament del paquet React

El paquet planificat `@didit-protocol/auth-react` proporciona un element arrel `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` i `ConnectedAgents`. Les props dels components, l'encaminament del callback i les versions del paquet s'han de prendre de la versió publicada. No donis per suposat que el SDK de verificació proporciona aquests components.

Els senyals automàtics i `vendorData` depenen de la versió del nucli d'Authentication. Fins llavors, utilitza el mapeig del teu backend a partir del `sub` validat. Consulta la [indicació d'integració compartida](https://docs.didit.me/ca/integration/integration-prompt.md) per a la verificació i el monitoratge juntament amb l'inici de sessió.

Prova una redirecció cancel·lada, un doble clic a l'inici de sessió, la recàrrega del callback, una sessió caducada, MFA i el tancament de sessió. Mostra els estats de càrrega i d'error sense mostrar dades protegides d'un usuari anterior.


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