React quickstart

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.

Start with hosted authentication

Configure the application and copy auth.js from the JavaScript quickstart.
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.
Keep loading, signed-out, signed-in and failed-session states distinct. Show sign-in errors without logging tokens or callback codes.
Validate every protected request on your backend. Hiding a component is not authorization.

SignInButton.jsx

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

Guides

Authentication

Model Context Protocol (MCP)

Web SDKs

Native SDKs

Integrations

Start with hosted authentication

React package release preview

​Start with hosted authentication

​React package release preview

Start with hosted authentication

React package release preview