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

# React quickstart

> Add hosted Authentication to a React application with callback handling, loading states and server-validated access.

<Warning>
  Early access: the React Authentication package is release-dependent. Use the hosted flow only with an enabled application. The component catalogue below describes the upcoming contract, not a currently published package API.
</Warning>

## Start with hosted authentication

1. Configure the application and copy `auth.js` from the [JavaScript quickstart](/authentication/quickstarts/javascript).
2. Route your registered `/auth/callback` to a page that calls `handleCallback()` once. Guard against duplicate effects, including development effect replay: a code is single-use.
3. Keep loading, signed-out, signed-in and failed-session states distinct. Show sign-in errors without logging tokens or callback codes.
4. Validate every protected request on your backend. Hiding a component is not authorization.

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

Call `getSession()` after the callback to populate your user view. On sign-out, clear user-specific caches and handle a failed server revocation explicitly. The minimal JavaScript helper does not persist sessions after reload.

## React package release preview

The planned `@didit-protocol/auth-react` package provides a `DiditAuth` root, `useAuth`, `useUser`, `SignIn`, `SignUp`, `UserButton`, `SignedIn`, `SignedOut` and `ConnectedAgents`. Component props, callback routing and package versions must be taken from the published release. Do not assume the verification SDK supplies these components.

Automatic signals and `vendorData` depend on the Authentication core release. Until then, use your backend's mapping from the validated `sub`. See the [shared integration prompt](/integration/integration-prompt) for verification and monitoring alongside sign-in.

Test a canceled redirect, double-clicked sign-in, callback refresh, expired session, MFA and logout. Render both loading and error states without showing protected data from a previous user.


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