~2 min read

Browser SDK

@tnuser/qyzar-client runs in the visitor’s browser. It connects to Qyzar, can show verification and captcha, and sets session cookies when the user passes.

Install & minimal wrap

npm install @tnuser/qyzar-client

import { Qyzar } from "@tnuser/qyzar-client";

<Qyzar projectId={projectId} clientToken={tokenFromYourServer}>
  <App />
</Qyzar>

clientToken must come from your server — see Client tokens.

Main exports

Name	Use for	Don't use for
Qyzar	Easiest setup: one wrapper with verification UI, captcha, and live connection.	Heavy custom layouts — compose lower-level pieces instead.
QyzarSiteLayout	Providers only (project context, blocking, live connection) without forcing captcha/verifier UI.	Replacing server session checks.
ConnectVerifier	Runs connect/verify when you build your own shell around the SDK.	Calling from the server.
CaptchaHost	Shows captcha UI when the server challenges the visitor.	Skipping captcha when your project requires it.
QyzarVerifyingOverlay	Full-screen “verifying” state while checks run.	Server-side rendering of secrets.
getConnectSessionId / getConnectSessionToken	After verify — send values to your server to remint a client token.	Proving the user is trusted on your API (use session verify on the server).
setConnectSessionCookies / clearConnectSessionCookies	Advanced: manual cookie control on your origin (rare).	Normal apps — the SDK sets cookies after verify.
WebSocketProvider / useWebSocket	Custom apps that need low-level access to the live connection.	Most sites — use Qyzar or QyzarSiteLayout instead.
useVerificationBlockingSetter	Toggle whether the UI blocks until verification finishes.	Bypassing verification on protected pages.
useInteractionEntropyCollector	Custom captcha or entropy flows (advanced).	Typical Qyzar + CaptchaHost setup.
useVisitorSessionLiveStream	Entropy-enabled projects: visitor screen stream for live view (dashboard feature).	Standard verification-only sites.
reverifyConnectViaWebSocket	Trigger a new verify (e.g. after risk signals).	Initial page load — ConnectVerifier handles that.

Low-level / advanced

You usually do not need these if you use Qyzar.

Name	Use for	Don't use for
parseWsMessageDefault / waitForWsMessage	Building custom live-connection clients.	Normal React integration.
shape-captcha / entropy helpers	Custom captcha implementations.	Default CaptchaHost usage.

Session cookies after verify

ConnectVerifier saves qyzar_session_id and qyzar_session_token on document.cookie when verify succeeds, and refreshes them on reverify heartbeats.

import {
  getConnectSessionId,
  getConnectSessionToken,
} from "@tnuser/qyzar-client";

// In a client component or effect, after the user has verified:
const sessionId = getConnectSessionId();
const sessionToken = getConnectSessionToken();

if (sessionId && sessionToken) {
  await fetch("/api/your-remint-route", {
    method: "POST",
    credentials: "include",
    body: JSON.stringify({ sessionId, sessionToken }),
  });
}

What the SDK does not do

Does not replace session verification on your API.
Does not store your project secret — only accepts a client token.
Does not work off your domain — run it on the same site where cookies should live.