@demystify/id-browser

"Continue with Demystify" from the front end — Authorization Code + PKCE as a public client.

Guide: docs/51 — UI Integration

npm install @demystify/id-browser

import { createDemystifyClient } from "@demystify/id-browser";

const demystify = createDemystifyClient({
  clientId: "acme-app",
  redirectUri: "https://app.acme.com/auth/callback",   // must be on the allow-list, exact match
});

await demystify.signIn();                               // on the button
const { session } = await demystify.handleCallback();   // on the callback route
demystify.getSession();
await demystify.signOut({ postLogoutRedirectUri: "https://app.acme.com/" });

React bindings: @demystify/id-react.

If your product has a backend, don't use this

Use the BFF pattern (docs/51 §3): exchange the code on your server and keep the session in an httpOnly cookie. A token held in JavaScript is readable by any script that reaches the page. This package exists for apps that genuinely have no server — it is not the safer option.

What it deliberately does not do

• Never persists a token. No localStorage, no sessionStorage. Only the PKCE verifier is stored, and only until the callback consumes it.
• Never holds a client secret. A secret shipped to a browser is not a secret.
• session.claims is unverified — for rendering only. The browser cannot meaningfully check a signature. Authorisation belongs on a server using @demystify/id-verify.
• A reload ends the session. signIn({ prompt: "none" }) re-establishes it silently against the issuer's own session — a top-level navigation, not an iframe, because browsers block third-party iframes.

mode: "popup" keeps the page mounted. Call it directly from a click handler or the popup is blocked.