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

# Início rápido React para autenticação

> Integre a autenticação hospedada da Didit numa aplicação React com tratamento de callbacks, estados de carregamento e acesso validado no servidor.

> [!WARNING]
>
> A autenticação é uma novidade: o pacote React Authentication depende da versão publicada. Use o fluxo alojado apenas com uma aplicação ativada. O catálogo de componentes abaixo descreve o contrato previsto, e não uma API de pacote atualmente publicada.

## Começar com a autenticação alojada

1. Configure a aplicação e copie `auth.js` do [guia de início rápido de JavaScript](https://docs.didit.me/pt/authentication/quickstarts/javascript.md).
2. Encaminhe o `/auth/callback` registado para uma página que chame `handleCallback()` uma única vez. Proteja-se contra efeitos duplicados, incluindo a repetição de efeitos em desenvolvimento: um código só pode ser usado uma vez.
3. Mantenha distintos os estados de carregamento, de sessão terminada, de sessão iniciada e de falha da sessão. Mostre os erros de início de sessão sem registar tokens nem códigos de callback.
4. Valide cada pedido protegido no seu backend. Ocultar um componente não é autorização.

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

Chame `getSession()` após o callback para preencher a vista do utilizador. No encerramento de sessão, limpe as caches específicas de cada utilizador e trate explicitamente a falha na revogação no servidor. O auxiliar JavaScript mínimo não persiste as sessões após um recarregamento da página.

## Pré-visualização da versão do pacote React

O pacote `@didit-protocol/auth-react` previsto disponibiliza um componente raiz `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` e `ConnectedAgents`. As propriedades dos componentes, o encaminhamento do callback e as versões do pacote devem ser obtidas da versão publicada. Não assuma que o SDK de verificação fornece estes componentes.

Os sinais automáticos e o `vendorData` dependem da versão do núcleo de Authentication. Até lá, use o mapeamento do seu backend a partir do `sub` validado. Consulte o [prompt de integração partilhado](https://docs.didit.me/pt/integration/integration-prompt.md) para a verificação e a monitorização em conjunto com o início de sessão.

Teste um redirecionamento cancelado, um início de sessão com duplo clique, a atualização da página de callback, uma sessão expirada, MFA e o encerramento de sessão. Apresente os estados de carregamento e de erro sem mostrar dados protegidos de um utilizador anterior.


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