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

# Autenticación en React: inicio rápido

> Añade la autenticación alojada de Didit a tu aplicación React con gestión de callbacks, estados de carga y acceso validado en el servidor.

> [!WARNING]
>
> La autenticación es nueva: el paquete de autenticación para React depende de la versión. Usa el flujo alojado solo con una aplicación habilitada. El catálogo de componentes que aparece más abajo describe el contrato previsto, no la API de un paquete publicado actualmente.

## Empieza con la autenticación alojada

1. Configura la aplicación y copia `auth.js` de la [guía de inicio rápido de JavaScript](https://docs.didit.me/es/authentication/quickstarts/javascript.md).
2. Dirige tu ruta `/auth/callback` registrada a una página que llame a `handleCallback()` una sola vez. Protégete contra efectos duplicados, incluida la repetición de efectos en desarrollo: cada código es de un solo uso.
3. Mantén diferenciados los estados de carga, sesión no iniciada, sesión iniciada y sesión fallida. Muestra los errores de inicio de sesión sin registrar tokens ni códigos de callback.
4. Valida cada solicitud protegida en tu backend. Ocultar un componente no es autorización.

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

Llama a `getSession()` después del callback para cargar la vista de usuario. Al cerrar sesión, borra las cachés específicas del usuario y gestiona de forma explícita un fallo en la revocación del servidor. El helper mínimo de JavaScript no conserva las sesiones tras recargar la página.

## Vista previa del lanzamiento del paquete para React

El paquete previsto `@didit-protocol/auth-react` proporciona un componente raíz `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` y `ConnectedAgents`. Las props de los componentes, el enrutamiento del callback y las versiones del paquete deben tomarse de la versión publicada. No des por hecho que el SDK de verificación incluye estos componentes.

Las señales automáticas y `vendorData` dependen del lanzamiento del núcleo de autenticación. Hasta entonces, usa la correspondencia de tu backend a partir del `sub` validado. Consulta el [prompt de integración compartido](https://docs.didit.me/es/integration/integration-prompt.md) para la verificación y la monitorización junto con el inicio de sesión.

Prueba una redirección cancelada, un doble clic en el inicio de sesión, la recarga del callback, una sesión expirada, MFA y el cierre de sesión. Renderiza los estados de carga y de error sin mostrar datos protegidos de un usuario anterior.


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