@zanii-id/react

The "Continue with Zanii ID" button for React applications.

npm install @zanii-id/react

Server-rendered apps (default)

The button is a plain link to your own backend's login route, which owns the OAuth flow and the client secret:

import { ZaniiLoginButton } from "@zanii-id/react";

<ZaniiLoginButton href="/auth/login" />

Single-page apps

For a true SPA with no backend, the browser acts as a public OAuth client and runs PKCE itself with WebCrypto:

<ZaniiLoginButton
  mode="spa"
  issuer="https://id.zanii.agency"
  clientId="cli_..."
  redirectUri="https://app.example.com/callback"
/>

State and nonce live in sessionStorage, and sign-in is a full-page redirect — never a popup or an iframe.

The browser is a public client

The component throws if any prop looks like a credential:

<ZaniiLoginButton clientSecret="..." />   // throws immediately

A secret in browser code is a deployment mistake, so it fails loudly at development time rather than shipping.

Styling and accessibility

Renders a native <a> or <button>: real focus ring, 44px minimum target, aria-busy while redirecting, and an error slot. Style it with className or the exposed CSS variables — appearance is yours, security behaviour is not a prop.

import "@zanii-id/react/styles.css";

Licence

Apache-2.0. See LICENSE.