@demystify/id-react

React bindings for @demystify/id-browser.

Guide: docs/51 — UI Integration

npm install @demystify/id-react

import { DemystifyProvider, ContinueWithDemystify, useDemystify } from "@demystify/id-react";

<DemystifyProvider clientId="acme-app" redirectUri="https://app.acme.com/auth/callback">
  <App />
</DemystifyProvider>

const { session, signIn, signOut, loading } = useDemystify();

The provider completes the callback automatically when a page loads carrying ?code=, so a callback route needs no code of its own.

<ContinueWithDemystify> renders a real <button> with a 44px target, marks itself aria-busy rather than disabled while redirecting (so a keyboard user is not stranded mid-interaction), keeps its focus ring, and styles for light and dark. Props: label, busyLabel, variant ("solid" | "outline"), icon, className, style, onError.

If your product has a backend, prefer the BFF pattern (docs/51 §3) — this is a public client and the token lives in the page.