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

# Autenticação no React: guia rápido

> Adicione a autenticação hospedada da Didit a uma aplicação React com tratamento de callback, estados de carregamento e acesso validado no servidor.

> [!WARNING]
>
> A autenticação é um recurso novo: o pacote de autenticação para React depende da versão. Use o fluxo hospedado apenas com uma aplicação habilitada. O catálogo de componentes abaixo descreve o contrato futuro, não a API de um pacote já publicado.

## Comece com a autenticação hospedada

1. Configure a aplicação e copie `auth.js` do [guia de início rápido de JavaScript](https://docs.didit.me/pt-br/authentication/quickstarts/javascript.md).
2. Direcione o seu `/auth/callback` registrado para uma página que chame `handleCallback()` uma única vez. Proteja-se contra efeitos duplicados, incluindo a reexecução de efeitos em desenvolvimento: um código é de uso único.
3. Mantenha distintos os estados de carregamento, desconectado, conectado e sessão com falha. Mostre os erros de login sem registrar tokens nem códigos de callback.
4. Valide cada requisição protegida 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 exibir os dados do usuário. Ao encerrar a sessão, limpe os caches específicos do usuário e trate explicitamente uma falha na revogação no servidor. O helper mínimo de JavaScript não mantém as sessões após recarregar a página.

## Prévia do lançamento do pacote React

O pacote planejado `@didit-protocol/auth-react` oferece uma raiz `DiditAuth`, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` e `ConnectedAgents`. As props dos componentes, o roteamento de callback e as versões do pacote devem ser obtidos da versão publicada. Não presuma que o SDK de verificação fornece esses componentes.

Os sinais automáticos e `vendorData` dependem do lançamento do núcleo de autenticação. Até lá, use o mapeamento do seu backend a partir do `sub` validado. Consulte o [prompt de integração compartilhado](https://docs.didit.me/pt-br/integration/integration-prompt.md) para verificação e monitoramento junto com o login.

Teste um redirecionamento cancelado, um login com clique duplo, a atualização do callback, uma sessão expirada, MFA e logout. Renderize os estados de carregamento e de erro sem mostrar dados protegidos de um usuário anterior.


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