@zautha/ui

Prebuilt Zautha components: sign-in and sign-up (with the instance’s social providers), the page providers come back to (AuthenticateWithRedirectCallback), user button, user profile and OAuth consent. They work under a strict Content Security Policy (no inline scripts or styles) and follow your instance’s branding from the dashboard. A site with a Content Security Policy must also allow frame-src https://accounts.zautha.com for the bot protection of production instances (see Bot protection in @zautha/js).

Install

npm i @zautha/js @zautha/ui

Quickstart

import { Zautha } from "@zautha/js";
import { ui } from "@zautha/ui";
import "@zautha/ui/styles.css";

const zautha = new Zautha("pk_test_…", { ui });
await zautha.load();
zautha.mountSignIn(document.getElementById("sign-in"));

With React, use the same components through @zautha/react.

AuthenticateWithRedirectCallback finishes a social sign-in or sign-up on the page the provider sends the user back to and goes on to the flow’s redirectUrlComplete (or its own redirectUrlComplete option). With no target at all it stays on its waiting card once signed in: pass redirectUrlComplete, or go on yourself from onEvent (sign_in.completed, sign_up.completed). It does not finish an account connection: UserProfile on its own page does.

Customize with appearance (new Zautha(pk, { ui, appearance })): a theme (auto, light, dark, or shadcn from @zautha/ui/themes), CSS variables and per-element classes. Localizations (English, Turkish) come from @zautha/ui/localizations.

Impersonation band

In an impersonation session the SDK mounts a band at the bottom of the page by itself (you never mount it): “You are signed in as {email} (impersonation).” with “End session” (signs out). It is a role="status" region, takes no focus and cannot be turned off; style it through the element keys impersonationBand and impersonationBandAction and localize it through impersonationBand. A write an impersonation session may not make shows “This can’t be done in an impersonation session.” (impersonation_forbidden).