pnpm add @rebellion-systems/authensee-embed

import { open } from "@rebellion-systems/authensee-embed";

@rebellion-systems/authensee-ui
├── theme/         AuthenSeeThemeProvider, useTheme(), DEFAULT_THEME, themeToCssVars
├── primitives/    Button, Card, ProgressBar, Logo, ErrorDisplay, SuccessDisplay
├── questions/     TextInput, RecognitionGrid, DoodleCanvas, SequenceInput, MapPicker,
│                  QuestionInput (dispatcher)
├── sdk/           AuthenSeeProvider, useAuthenSee(), useProofProgress()
├── flows/         EnrollmentFlow, AuthenticationFlow, QuestionStep
└── styles/        globals.css — design-token CSS variables

import { AuthenSeeProvider } from "@rebellion-systems/authensee-ui";
 
<AuthenSeeProvider
  sessionToken="sess_…"
  serverUrl="https://api.authensee.com"
  theme={{
    primary: "#FF7B1A",
    background: "#000",
    foreground: "#FFF",
    fontHeading: "Space Grotesk, sans-serif",
  }}
>
  {children}
</AuthenSeeProvider>

import { Button, Card, ProgressBar, ErrorDisplay } from "@rebellion-systems/authensee-ui";
 
<Card>
  <ProgressBar current={2} total={3} label="Step 2 of 3 — Recall your answer" />
  {error ? (
    <ErrorDisplay code="INVALID_PROOF" message="Try again" onRetry={handleRetry} />
  ) : (
    <Button variant="primary" loading={busy} onClick={handleSubmit}>
      Authenticate →
    </Button>
  )}
</Card>

import { QuestionInput } from "@rebellion-systems/authensee-ui";
 
<QuestionInput
  typeId={question.typeId}
  questionText={question.text}
  options={question.options}
  symbols={question.symbols}
  onChange={(answer) => setAnswer(answer)}
/>

import { AuthenSeeProvider } from "@rebellion-systems/authensee-ui";
 
<AuthenSeeProvider
  sessionToken={session.sessionToken}
  serverUrl={session.serverUrl}
  theme={session.theme}
  debug={false}
>
  {children}
</AuthenSeeProvider>

import { useAuthenSee } from "@rebellion-systems/authensee-ui";
 
function EnrolButton() {
  const { sdk, isInitialized } = useAuthenSee();
  if (!isInitialized) return <p>Initializing…</p>;
  return (
    <Button onClick={() => sdk.enroll(/* … */)}>
      Continue
    </Button>
  );
}

import { useProofProgress } from "@rebellion-systems/authensee-ui";
 
function ProofSpinner() {
  const { phase, provingTimeMs, error } = useProofProgress();
  if (phase === "generating") return <p>Generating proof…</p>;
  if (phase === "complete") return <p>Proof in {provingTimeMs}ms ✓</p>;
  if (phase === "failure") return <ErrorDisplay code={error.code} message={error.message} />;
  return null;
}

import { AuthenSeeProvider, EnrollmentFlow } from "@rebellion-systems/authensee-ui";
import { browserPasskey } from "@rebellion-systems/authensee-ui/passkey";
 
const passkey = browserPasskey({ rpId: "auth.acme.com", rpName: "Acme" });
 
<AuthenSeeProvider sessionToken="sess_…" serverUrl="https://api.authensee.com">
  <EnrollmentFlow
    externalUserId="user_123"
    questions={[
      { typeId: 1, text: "If you had to name a future cat, what would you call it?" },
    ]}
    passkey={passkey}
    onComplete={(result) => console.log("Enrolled:", result.merkleRoot)}
    onError={(err) => console.error(err)}
  />
</AuthenSeeProvider>

import { AuthenticationFlow } from "@rebellion-systems/authensee-ui";
 
<AuthenSeeProvider sessionToken="sess_…" serverUrl="https://api.authensee.com">
  <AuthenticationFlow
    externalUserId="user_123"
    questions={[{ typeId: 1, text: "Recall the future-cat name" }]}
    passkey={passkey}
    onComplete={(result) => console.log("JWT:", result.token)}
    onError={(err) => console.error(err.code, err.message)}
  />
</AuthenSeeProvider>

import type { PasskeyHandlers, CreatedPasskey, PasskeyCreateArgs } from "@rebellion-systems/authensee-ui";
 
const reactNativePasskey: PasskeyHandlers = {
  rpId: "auth.acme.com",
  rpName: "Acme",
  create: async ({ challengeBytes, userId, userName }) => {
    // your react-native-passkeys glue here
    return { credentialId, pubkeyX, pubkeyY };
  },
  sign: async (challengeBytes) => {
    // your react-native-passkeys glue here
    return { signature, authenticatorData, clientDataJSON, expectedOrigin, rpId, actionHash };
  },
};
 
<EnrollmentFlow passkey={reactNativePasskey} ... />

"use client";
 
import {
  AuthenSeeProvider,
  Button,
  TextInput,
  ErrorDisplay,
  useAuthenSee,
} from "@rebellion-systems/authensee-ui";
import { browserPasskey } from "@rebellion-systems/authensee-ui/passkey";
 
function EnrolPage({ session }: { session: { token: string; serverUrl: string; externalUserId: string } }) {
  return (
    <AuthenSeeProvider sessionToken={session.token} serverUrl={session.serverUrl}>
      <EnrolForm externalUserId={session.externalUserId} />
    </AuthenSeeProvider>
  );
}
 
function EnrolForm({ externalUserId }: { externalUserId: string }) {
  const { sdk, isInitialized } = useAuthenSee();
  const [answer, setAnswer] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [busy, setBusy] = React.useState(false);
 
  const onSubmit = async () => {
    if (!sdk) return;
    setBusy(true);
    try {
      await sdk.identify(externalUserId);
 
      const passkey = browserPasskey({
        rpId: window.location.hostname,
        rpName: "Acme",
      });
      const challengeBytes = new Uint8Array(32);
      crypto.getRandomValues(challengeBytes);
      const created = await passkey.create({
        userId: sdk.getPersona()!.id,
        userName: externalUserId,
        challengeBytes,
      });
 
      await sdk.enroll("security_questions", {
        questions: [{ text: "Name a future cat", answer }],
        passkey: {
          credentialId: created.credentialId,
          pubkeyX: created.pubkeyX,
          pubkeyY: created.pubkeyY,
          rpId: window.location.hostname,
        },
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  };
 
  if (!isInitialized) return <p>Initializing…</p>;
  return (
    <div>
      <TextInput questionText="Name a future cat" onChange={(a) => setAnswer(a?.value ?? "")} />
      <Button variant="primary" onClick={onSubmit} loading={busy} disabled={!answer.trim()}>
        Continue →
      </Button>
      {error && <ErrorDisplay code="INVALID_PROOF" message={error} />}
    </div>
  );
}