34:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 35:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 36:T1aae,"use client"; import { Check } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AcceptInvite } from "@/components/scalar-ui/auth/accept-invite"; import { AuthHeader, AuthLayout, ScreenTransition, type AuthLayoutKind } from "@/components/scalar-ui/auth/auth-ui"; import { CheckEmail } from "@/components/scalar-ui/auth/check-email"; import { WorkspacePicker } from "@/components/scalar-ui/auth/choose-workspace"; import { INVITE, WORKSPACES, type Account, type Org } from "@/components/scalar-ui/auth/data"; import { LoginForm } from "@/components/scalar-ui/auth/login"; import { SavePasskeyPrompt } from "@/components/scalar-ui/auth/passkey"; import { ForgotPassword, ResetPassword } from "@/components/scalar-ui/auth/reset-password"; import { SessionNotice } from "@/components/scalar-ui/auth/session"; import { SignUpForm } from "@/components/scalar-ui/auth/sign-up"; import { SsoSignIn } from "@/components/scalar-ui/auth/sso"; import { TwoFactorChallenge } from "@/components/scalar-ui/auth/two-factor"; export type AuthScreen = "login" | "two-factor" | "save-passkey" | "workspaces" | "signup" | "verify-code" | "magic-link" | "forgot" | "reset" | "sso" | "locked" | "invite" | "signed-in" | "signed-out"; export const AUTH_SCREENS: { id: AuthScreen; label: string }[] = [ { id: "login", label: "Log in" }, { id: "signup", label: "Sign up" }, { id: "verify-code", label: "Email code" }, { id: "magic-link", label: "Magic link" }, { id: "two-factor", label: "Two-step" }, { id: "save-passkey", label: "Save passkey" }, { id: "forgot", label: "Forgot password" }, { id: "reset", label: "New password" }, { id: "sso", label: "SSO" }, { id: "workspaces", label: "Workspaces" }, { id: "invite", label: "Invite" }, { id: "locked", label: "Locked" }, { id: "signed-out", label: "Signed out" }, ]; export interface AuthFlowProps { layout?: AuthLayoutKind; /** Control the screen from outside, e.g. a jump menu. */ screen?: AuthScreen; onScreenChange?: (screen: AuthScreen) => void; defaultScreen?: AuthScreen; className?: string; } /** * Every auth screen wired into one flow: email-first log in that routes to a password, SSO or sign up; two-step * verification; a passkey prompt; magic links and codes; password reset; workspace choice; invites; and the signed-out * and locked screens. Each screen is its own file in auth/ for use on its own. */ export function AuthFlow({ layout = "split", screen: screenProp, onScreenChange, defaultScreen = "login", className }: AuthFlowProps) { const [own, setOwn] = useState(defaultScreen); const screen = screenProp ?? own; const go = (s: AuthScreen) => (setOwn(s), onScreenChange?.(s)); const [email, setEmail] = useState("maya@northwind.co"); const [account, setAccount] = useState | null>(null); const [org, setOrg] = useState(); const [workspace, setWorkspace] = useState(WORKSPACES[0].name); const signedIn = (a: Pick, viaPassword = false) => { setAccount(a); setEmail(a.email); go(viaPassword && !a.passkey ? "save-passkey" : "workspaces"); }; const body = (() => { switch (screen) { case "login": return ( signedIn(a, method === "password")} onTwoFactor={(a) => (setAccount(a), setEmail(a.email), go("two-factor"))} onSso={(e, o) => (setEmail(e), setOrg(o), go("sso"))} onSignUp={(e) => (e && setEmail(e), go("signup"))} onForgot={(e) => (setEmail(e), go("forgot"))} onMagicLink={(e) => (setEmail(e), go("magic-link"))} onLocked={() => go("locked")} /> ); case "two-factor": return go("login")} onVerified={() => signedIn(account ?? { email, name: "Maya Chen", passkey: false }, true)} />; case "save-passkey": return go("workspaces")} onSkip={() => go("workspaces")} />; case "signup": return (setEmail(e), go("verify-code"))} onProviderSignedIn={(a) => signedIn(a)} onLogIn={(e) => (e && setEmail(e), go("login"))} />; case "verify-code": return signedIn({ email, name: email.split("@")[0], passkey: false }, true)} onChangeEmail={() => go("signup")} />; case "magic-link": return signedIn({ email, name: "Maya Chen", passkey: true })} onChangeEmail={() => go("login")} />; case "forgot": return go("login")} />; case "reset": return go("login")} onSavePasskey={() => go("save-passkey")} />; case "sso": return (setOrg(undefined), go("login"))} onSignedIn={(who) => signedIn({ ...who, passkey: true })} />; case "workspaces": return (setWorkspace(w.name), go("signed-in"))} onJoin={() => go("invite")} onCreate={() => (setWorkspace("your new workspace"), go("signed-in"))} onSwitchAccount={() => go("login")} />; case "invite": return (setWorkspace(INVITE.workspace), go("signed-in"))} onDecline={() => go("workspaces")} onSwitchAccount={() => go("login")} />; case "locked": return go("forgot")} onLogIn={() => go("login")} />; case "signed-out": return go("login")} onSwitchAccount={() => (setEmail(""), go("login"))} />; case "signed-in": return (

} title={`Opening ${workspace}`} description="You're signed in. In a real app this is where the dashboard loads." />

); } })(); return ( {body} ); } export default AuthFlow; 37:T1434c,

"use client";

import { Check } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AcceptInvite } from "@/components/scalar-ui/auth/accept-invite";
import { AuthHeader, AuthLayout, ScreenTransition, type AuthLayoutKind } from "@/components/scalar-ui/auth/auth-ui";
import { CheckEmail } from "@/components/scalar-ui/auth/check-email";
import { WorkspacePicker } from "@/components/scalar-ui/auth/choose-workspace";
import { INVITE, WORKSPACES, type Account, type Org } from "@/components/scalar-ui/auth/data";
import { LoginForm } from "@/components/scalar-ui/auth/login";
import { SavePasskeyPrompt } from "@/components/scalar-ui/auth/passkey";
import { ForgotPassword, ResetPassword } from "@/components/scalar-ui/auth/reset-password";
import { SessionNotice } from "@/components/scalar-ui/auth/session";
import { SignUpForm } from "@/components/scalar-ui/auth/sign-up";
import { SsoSignIn } from "@/components/scalar-ui/auth/sso";
import { TwoFactorChallenge } from "@/components/scalar-ui/auth/two-factor";

export type AuthScreen = "login" | "two-factor" | "save-passkey" | "workspaces" | "signup" | "verify-code" | "magic-link" | "forgot" | "reset" | "sso" | "locked" | "invite" | "signed-in" | "signed-out";

export const AUTH_SCREENS: { id: AuthScreen; label: string }[] = [
  { id: "login", label: "Log in" },
  { id: "signup", label: "Sign up" },
  { id: "verify-code", label: "Email code" },
  { id: "magic-link", label: "Magic link" },
  { id: "two-factor", label: "Two-step" },
  { id: "save-passkey", label: "Save passkey" },
  { id: "forgot", label: "Forgot password" },
  { id: "reset", label: "New password" },
  { id: "sso", label: "SSO" },
  { id: "workspaces", label: "Workspaces" },
  { id: "invite", label: "Invite" },
  { id: "locked", label: "Locked" },
  { id: "signed-out", label: "Signed out" },
];

export interface AuthFlowProps {
  layout?: AuthLayoutKind;
  /** Control the screen from outside, e.g. a jump menu. */
  screen?: AuthScreen;
  onScreenChange?: (screen: AuthScreen) => void;
  defaultScreen?: AuthScreen;
  className?: string;
}

/**
 * Every auth screen wired into one flow: email-first log in that routes to a password, SSO or sign up; two-step
 * verification; a passkey prompt; magic links and codes; password reset; workspace choice; invites; and the signed-out
 * and locked screens. Each screen is its own file in auth/ for use on its own.
 */
export function AuthFlow({ layout = "split", screen: screenProp, onScreenChange, defaultScreen = "login", className }: AuthFlowProps) {
  const [own, setOwn] = useState<AuthScreen>(defaultScreen);
  const screen = screenProp ?? own;
  const go = (s: AuthScreen) => (setOwn(s), onScreenChange?.(s));
  const [email, setEmail] = useState("maya@northwind.co");
  const [account, setAccount] = useState<Pick<Account, "email" | "name" | "passkey"> | null>(null);
  const [org, setOrg] = useState<Org | undefined>();
  const [workspace, setWorkspace] = useState(WORKSPACES[0].name);

  const signedIn = (a: Pick<Account, "email" | "name" | "passkey">, viaPassword = false) => {
    setAccount(a);
    setEmail(a.email);
    go(viaPassword && !a.passkey ? "save-passkey" : "workspaces");
  };

  const body = (() => {
    switch (screen) {
      case "login":
        return (
          <LoginForm
            defaultEmail={email}
            onSignedIn={(a, method) => signedIn(a, method === "password")}
            onTwoFactor={(a) => (setAccount(a), setEmail(a.email), go("two-factor"))}
            onSso={(e, o) => (setEmail(e), setOrg(o), go("sso"))}
            onSignUp={(e) => (e && setEmail(e), go("signup"))}
            onForgot={(e) => (setEmail(e), go("forgot"))}
            onMagicLink={(e) => (setEmail(e), go("magic-link"))}
            onLocked={() => go("locked")}
          />
        );
      case "two-factor":
        return <TwoFactorChallenge onBack={() => go("login")} onVerified={() => signedIn(account ?? { email, name: "Maya Chen", passkey: false }, true)} />;
      case "save-passkey":
        return <SavePasskeyPrompt onDone={() => go("workspaces")} onSkip={() => go("workspaces")} />;
      case "signup":
        return <SignUpForm variant="two-step" defaultEmail={email === "maya@northwind.co" ? "" : email} onCreated={(e) => (setEmail(e), go("verify-code"))} onProviderSignedIn={(a) => signedIn(a)} onLogIn={(e) => (e && setEmail(e), go("login"))} />;
      case "verify-code":
        return <CheckEmail email={email} mode="code" allowSwitch={false} onVerified={() => signedIn({ email, name: email.split("@")[0], passkey: false }, true)} onChangeEmail={() => go("signup")} />;
      case "magic-link":
        return <CheckEmail email={email} mode="link" onVerified={() => signedIn({ email, name: "Maya Chen", passkey: true })} onChangeEmail={() => go("login")} />;
      case "forgot":
        return <ForgotPassword defaultEmail={email} onBack={() => go("login")} />;
      case "reset":
        return <ResetPassword email={email} onDone={() => go("login")} onSavePasskey={() => go("save-passkey")} />;
      case "sso":
        return <SsoSignIn defaultEmail={email} org={org} onBack={() => (setOrg(undefined), go("login"))} onSignedIn={(who) => signedIn({ ...who, passkey: true })} />;
      case "workspaces":
        return <WorkspacePicker email={account?.email ?? email} workspaces={WORKSPACES} invites={[INVITE]} onOpen={(w) => (setWorkspace(w.name), go("signed-in"))} onJoin={() => go("invite")} onCreate={() => (setWorkspace("your new workspace"), go("signed-in"))} onSwitchAccount={() => go("login")} />;
      case "invite":
        return <AcceptInvite invite={INVITE} account={account ?? { email, name: "Maya Chen" }} onJoined={() => (setWorkspace(INVITE.workspace), go("signed-in"))} onDecline={() => go("workspaces")} onSwitchAccount={() => go("login")} />;
      case "locked":
        return <SessionNotice kind="locked" email={email} onReset={() => go("forgot")} onLogIn={() => go("login")} />;
      case "signed-out":
        return <SessionNotice kind="signed-out" onLogIn={() => go("login")} onSwitchAccount={() => (setEmail(""), go("login"))} />;
      case "signed-in":
        return (
          <div>
            <AuthHeader icon={<Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} />} title={`Opening ${workspace}`} description="You're signed in. In a real app this is where the dashboard loads." />
            <Button variant="outline" onClick={() => (setAccount(null), go("signed-out"))} className="w-full">
              Sign out
            </Button>
          </div>
        );
    }
  })();

  return (
    <AuthLayout layout={layout} className={className}>
      <ScreenTransition id={screen}>{body}</ScreenTransition>
    </AuthLayout>
  );
}

export default AuthFlow;

38:T11f2,/** * Fake auth API for the demo. Every function waits a little and answers from the lists below; replace them with calls * to your own backend or auth provider and the screens keep working. */ export type Account = { email: string; name: string; password: string; twoFactor: boolean; passkey: boolean; avatar?: string }; export type Org = { name: string; provider: string; domain: string; enforced: boolean }; export type Workspace = { id: string; name: string; role: "Owner" | "Admin" | "Member" | "Guest"; members: number; tint: string; plan: string }; export type Invite = { workspace: string; from: string; fromEmail: string; role: string; members: number; expires: string; tint: string }; export type Identity = { kind: "password"; account: Account } | { kind: "sso"; org: Org } | { kind: "new" }; export type PasswordResult = { ok: true; account: Account } | { ok: false; error: string; locked?: boolean }; export const DEMO_CODE = "123456"; export const RECOVERY_CODE = "4f9k-2m7q"; export const ACCOUNTS: Account[] = [ { email: "maya@northwind.co", name: "Maya Chen", password: "harbour-light", twoFactor: true, passkey: true, avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=faces&auto=format&q=75" }, { email: "jon@studio.dev", name: "Jon Park", password: "orchard-42", twoFactor: false, passkey: false }, ]; export const ORGS: Org[] = [{ name: "Acme Inc.", provider: "Okta", domain: "acme.com", enforced: true }]; export const WORKSPACES: Workspace[] = [ { id: "nw", name: "Northwind", role: "Owner", members: 24, tint: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950", plan: "Business" }, { id: "hl", name: "Halcyon Studio", role: "Member", members: 8, tint: "bg-amber-400 text-amber-950", plan: "Pro" }, { id: "pf", name: "Pathfinder Labs", role: "Guest", members: 61, tint: "bg-sky-500 text-white", plan: "Enterprise" }, ]; export const INVITE: Invite = { workspace: "Fieldnote", from: "Priya Raman", fromEmail: "priya@fieldnote.so", role: "Editor", members: 12, expires: "in 6 days", tint: "bg-emerald-500 text-white" }; export const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); let attempts = 0; const MAX_ATTEMPTS = 5; export const findAccount = (email: string) => ACCOUNTS.find((a) => a.email === email.trim().toLowerCase()); /** Looks up an email to decide which sign-in method to offer. */ export async function identify(email: string): Promise { await wait(650); const domain = email.split("@")[1]?.toLowerCase(); const org = ORGS.find((o) => o.domain === domain); if (org) return { kind: "sso", org }; const account = findAccount(email); return account ? { kind: "password", account } : { kind: "new" }; } export async function signInWithPassword(email: string, password: string): Promise { await wait(800); const account = findAccount(email); if (attempts >= MAX_ATTEMPTS) return { ok: false, error: "Too many attempts. Try again in 15 minutes or reset your password.", locked: true }; if (account && account.password === password) { attempts = 0; return { ok: true, account }; } attempts++; const left = MAX_ATTEMPTS - attempts; if (left <= 0) return { ok: false, error: "Too many attempts. Try again in 15 minutes or reset your password.", locked: true }; return { ok: false, error: `That password isn't right. ${left} ${left === 1 ? "try" : "tries"} left.` }; } export async function signInWithPasskey(): Promise { await wait(1400); return ACCOUNTS[0]; } export async function signInWithProvider(provider: "google" | "github"): Promise { await wait(1100); return provider === "google" ? ACCOUNTS[0] : ACCOUNTS[1]; } export async function verifyCode(code: string) { await wait(700); return code === DEMO_CODE || code.toLowerCase() === RECOVERY_CODE; } export async function sendEmail(email: string) { await wait(700); return email; } export async function createAccount(input: { name: string; email: string; password: string }) { await wait(900); if (findAccount(input.email)) return { ok: false as const, error: "There's already an account with this email. Log in instead?" }; return { ok: true as const, email: input.email }; } export async function savePasskey() { await wait(1200); return true; } export async function startSso(org: Org) { await wait(1600); return { email: `alex@${org.domain}`, name: "Alex Rivera" }; } export function isEmail(value: string) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); } 39:Td60e,

/**
 * Fake auth API for the demo. Every function waits a little and answers from the lists below; replace them with calls
 * to your own backend or auth provider and the screens keep working.
 */

export type Account = { email: string; name: string; password: string; twoFactor: boolean; passkey: boolean; avatar?: string };
export type Org = { name: string; provider: string; domain: string; enforced: boolean };
export type Workspace = { id: string; name: string; role: "Owner" | "Admin" | "Member" | "Guest"; members: number; tint: string; plan: string };
export type Invite = { workspace: string; from: string; fromEmail: string; role: string; members: number; expires: string; tint: string };

export type Identity = { kind: "password"; account: Account } | { kind: "sso"; org: Org } | { kind: "new" };
export type PasswordResult = { ok: true; account: Account } | { ok: false; error: string; locked?: boolean };

export const DEMO_CODE = "123456";
export const RECOVERY_CODE = "4f9k-2m7q";

export const ACCOUNTS: Account[] = [
  { email: "maya@northwind.co", name: "Maya Chen", password: "harbour-light", twoFactor: true, passkey: true, avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=160&h=160&fit=crop&crop=faces&auto=format&q=75" },
  { email: "jon@studio.dev", name: "Jon Park", password: "orchard-42", twoFactor: false, passkey: false },
];

export const ORGS: Org[] = [{ name: "Acme Inc.", provider: "Okta", domain: "acme.com", enforced: true }];

export const WORKSPACES: Workspace[] = [
  { id: "nw", name: "Northwind", role: "Owner", members: 24, tint: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950", plan: "Business" },
  { id: "hl", name: "Halcyon Studio", role: "Member", members: 8, tint: "bg-amber-400 text-amber-950", plan: "Pro" },
  { id: "pf", name: "Pathfinder Labs", role: "Guest", members: 61, tint: "bg-sky-500 text-white", plan: "Enterprise" },
];

export const INVITE: Invite = { workspace: "Fieldnote", from: "Priya Raman", fromEmail: "priya@fieldnote.so", role: "Editor", members: 12, expires: "in 6 days", tint: "bg-emerald-500 text-white" };

export const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

let attempts = 0;
const MAX_ATTEMPTS = 5;

export const findAccount = (email: string) => ACCOUNTS.find((a) => a.email === email.trim().toLowerCase());

/** Looks up an email to decide which sign-in method to offer. */
export async function identify(email: string): Promise<Identity> {
  await wait(650);
  const domain = email.split("@")[1]?.toLowerCase();
  const org = ORGS.find((o) => o.domain === domain);
  if (org) return { kind: "sso", org };
  const account = findAccount(email);
  return account ? { kind: "password", account } : { kind: "new" };
}

export async function signInWithPassword(email: string, password: string): Promise<PasswordResult> {
  await wait(800);
  const account = findAccount(email);
  if (attempts >= MAX_ATTEMPTS) return { ok: false, error: "Too many attempts. Try again in 15 minutes or reset your password.", locked: true };
  if (account && account.password === password) {
    attempts = 0;
    return { ok: true, account };
  }
  attempts++;
  const left = MAX_ATTEMPTS - attempts;
  if (left <= 0) return { ok: false, error: "Too many attempts. Try again in 15 minutes or reset your password.", locked: true };
  return { ok: false, error: `That password isn't right. ${left} ${left === 1 ? "try" : "tries"} left.` };
}

export async function signInWithPasskey(): Promise<Account> {
  await wait(1400);
  return ACCOUNTS[0];
}

export async function signInWithProvider(provider: "google" | "github"): Promise<Account> {
  await wait(1100);
  return provider === "google" ? ACCOUNTS[0] : ACCOUNTS[1];
}

export async function verifyCode(code: string) {
  await wait(700);
  return code === DEMO_CODE || code.toLowerCase() === RECOVERY_CODE;
}

export async function sendEmail(email: string) {
  await wait(700);
  return email;
}

export async function createAccount(input: { name: string; email: string; password: string }) {
  await wait(900);
  if (findAccount(input.email)) return { ok: false as const, error: "There's already an account with this email. Log in instead?" };
  return { ok: true as const, email: input.email };
}

export async function savePasskey() {
  await wait(1200);
  return true;
}

export async function startSso(org: Org) {
  await wait(1600);
  return { email: `alex@${org.domain}`, name: "Alex Rivera" };
}

export function isEmail(value: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
}

3a:T3b1f,"use client"; import { AnimatePresence, motion } from "motion/react"; import { AlertCircle, ArrowLeft, Loader2 } from "lucide-react"; import { useEffect, useId, useState, type ComponentProps, type ReactNode } from "react"; import { Button } from "@/components/scalar-ui/button"; import { cn } from "@/lib/utils"; export type AuthLayoutKind = "centered" | "split" | "bleed"; export function Brand({ className }: { className?: string }) { return ( Northwind ); } function Aside() { return (

{[ ["Q4 launch plan", "12 tasks · due Friday", "w-[72%]"], ["Pricing page refresh", "In review · 3 comments", "w-[48%]"], ["Onboarding emails", "Shipped", "w-full"], ].map(([title, meta, w], i) => (

{title}

{meta}

))}

); } export interface AuthLayoutProps { /** centered: a card in the middle · split: the form beside a panel · bleed: no card, the form on a soft background. */ layout?: AuthLayoutKind; children: ReactNode; /** Replaces the panel in the split layout. */ aside?: ReactNode; className?: string; } /** The page around every auth screen. Phones always get the plain single column. */ export function AuthLayout({ layout = "centered", children, aside, className }: AuthLayoutProps) { const footer = (

e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white"> Terms · e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white"> Privacy · e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white"> Help

); if (layout === "split") { return (

{children}

{footer}

{aside ??

); } return (

{layout === "bleed" &&

}

{layout === "centered" ?

{children}

}

{footer}

); } /** Slides between screens of a flow; give each screen a different `id`. */ export function ScreenTransition({ id, children }: { id: string; children: ReactNode }) { return ( {children} ); } export function AuthHeader({ icon, title, description, align = "left", className }: { icon?: ReactNode; title: ReactNode; description?: ReactNode; align?: "left" | "center"; className?: string }) { return (

{icon && ( {icon} )}

{title}

{description &&

{description}

}

); } export interface AuthFieldProps { label: ReactNode; /** Something on the right of the label, e.g. "Forgot password?". */ action?: ReactNode; error?: ReactNode; hint?: ReactNode; children: (props: { id: string; "aria-invalid"?: boolean; "aria-describedby"?: string }) => ReactNode; className?: string; } /** Label, control, then either the error or a hint. The control gets the id and aria props it needs. */ export function AuthField({ label, action, error, hint, children, className }: AuthFieldProps) { const id = useId(); const described = error ? `${id}-error` : hint ? `${id}-hint` : undefined; return (

{label} {action}

{children({ id, "aria-invalid": error ? true : undefined, "aria-describedby": described })} {error ? ( {error} ) : hint ? ( {hint} ) : null}

); } /** Full-width submit that keeps its width while showing a spinner. */ export function SubmitButton({ loading = false, children, className, disabled, ...props }: ComponentProps & { loading?: boolean }) { return ( ); } export function OrDivider({ children = "or" }: { children?: ReactNode }) { return (

{children}

); } function GoogleMark() { return ( ); } function GithubMark() { return ( ); } export type Provider = "google" | "github"; /** Two provider buttons side by side. Keep it to two or three: a wall of logos makes people hesitate. */ export function ProviderButtons({ onSelect, loading, disabled }: { onSelect: (p: Provider) => void; loading?: Provider | null; disabled?: boolean }) { const items: { id: Provider; label: string; mark: ReactNode }[] = [ { id: "google", label: "Google", mark: }, { id: "github", label: "GitHub", mark: }, ]; return (

{items.map((p) => ( ))}

); } /** The identified email with a way back to change it. */ export function EmailChip({ email, onChange }: { email: string; onChange?: () => void }) { return (

{email} {onChange && ( )}

); } export function FormError({ children }: { children?: ReactNode }) { return ( {children && (

{children}

)} ); } /** "Don't have an account? Sign up" under a form. */ export function AuthSwitch({ children, className }: { children: ReactNode; className?: string }) { return

{children}

; } export function TextLink({ className, ...props }: ComponentProps<"button">) { return ); } export function Countdown({ seconds, children }: { seconds: number; children: ReactNode }) { return seconds > 0 ? Resend in 0:{String(seconds).padStart(2, "0")} : <>{children}; } /** Seconds left before "Resend" unlocks, and a function to start again. */ export function useCountdown(from = 30, running = true) { const [left, setLeft] = useState(running ? from : 0); useEffect(() => { if (left <= 0) return; const t = setTimeout(() => setLeft((n) => n - 1), 1000); return () => clearTimeout(t); }, [left]); return [left, () => setLeft(from)] as const; } 3b:T23706,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { AlertCircle, ArrowLeft, Loader2 } from "lucide-react";
import { useEffect, useId, useState, type ComponentProps, type ReactNode } from "react";
import { Button } from "@/components/scalar-ui/button";
import { cn } from "@/lib/utils";

export type AuthLayoutKind = "centered" | "split" | "bleed";

export function Brand({ className }: { className?: string }) {
  return (
    <span className={cn("flex items-center gap-2 text-[15px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white", className)}>
      <svg viewBox="0 0 24 24" className="size-6" aria-hidden>
        <rect width="24" height="24" rx="7" className="fill-neutral-950 dark:fill-white" />
        <path d="M7 16.5V7.5l10 9V7.5" fill="none" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="stroke-white dark:stroke-neutral-950" />
      </svg>
      Northwind
    </span>
  );
}

function Aside() {
  return (
    <div className="relative flex h-full flex-col justify-between overflow-hidden rounded-[22px] bg-neutral-950 p-8 text-white dark:bg-neutral-900 dark:ring-1 dark:ring-white/[0.08]">
      <div aria-hidden className="absolute inset-0 bg-[radial-gradient(rgb(255_255_255/0.09)_1px,transparent_1px)] [background-size:18px_18px] [mask-image:linear-gradient(to_bottom,black,transparent_75%)]" />
      <div className="relative flex flex-col gap-2.5">
        {[
          ["Q4 launch plan", "12 tasks · due Friday", "w-[72%]"],
          ["Pricing page refresh", "In review · 3 comments", "w-[48%]"],
          ["Onboarding emails", "Shipped", "w-full"],
        ].map(([title, meta, w], i) => (
          <div key={title} className="w-[min(100%,300px)] rounded-[14px] bg-white/[0.06] p-3.5 ring-1 ring-white/[0.08] backdrop-blur-sm" style={{ marginLeft: i * 28 }}>
            <p className="text-[13px] font-medium">{title}</p>
            <p className="text-[11.5px] text-white/50">{meta}</p>
            <div className="mt-2.5 h-1 rounded-full bg-white/10">
              <div className={cn("h-full rounded-full bg-white/70", w)} />
            </div>
          </div>
        ))}
      </div>
      <figure className="relative">
        <blockquote className="text-[17px] font-medium leading-snug tracking-[-0.01em]">"We moved four tools into Northwind in a week. Planning meetings got shorter and nothing falls through the cracks now."</blockquote>
        <figcaption className="mt-4 flex items-center gap-3">
          <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=faces&auto=format&q=75" alt="" className="size-9 rounded-full object-cover ring-1 ring-white/20" />
          <span>
            <span className="block text-[13px] font-medium">Daniel Okafor</span>
            <span className="block text-[12px] text-white/50">Head of Product, Lumen</span>
          </span>
        </figcaption>
      </figure>
    </div>
  );
}

export interface AuthLayoutProps {
  /** centered: a card in the middle · split: the form beside a panel · bleed: no card, the form on a soft background. */
  layout?: AuthLayoutKind;
  children: ReactNode;
  /** Replaces the panel in the split layout. */
  aside?: ReactNode;
  className?: string;
}

/** The page around every auth screen. Phones always get the plain single column. */
export function AuthLayout({ layout = "centered", children, aside, className }: AuthLayoutProps) {
  const footer = (
    <p className="text-center text-[12px] text-neutral-500">
      <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white">
        Terms
      </a>
      <span className="mx-2 text-neutral-300 dark:text-neutral-700">·</span>
      <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white">
        Privacy
      </a>
      <span className="mx-2 text-neutral-300 dark:text-neutral-700">·</span>
      <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-neutral-900 dark:hover:text-white">
        Help
      </a>
    </p>
  );
  if (layout === "split") {
    return (
      <div className={cn("@container flex h-full min-h-[600px] w-full bg-white dark:bg-neutral-950", className)}>
        <div className="flex min-w-0 flex-1 flex-col px-6 py-6 @[860px]:px-10">
          <Brand />
          <div className="mx-auto flex w-full max-w-[360px] flex-1 flex-col justify-center py-10">{children}</div>
          {footer}
        </div>
        <div className="hidden w-[46%] shrink-0 p-3 @[860px]:block">{aside ?? <Aside />}</div>
      </div>
    );
  }
  return (
    <div className={cn("@container relative flex h-full min-h-[600px] w-full flex-col items-center overflow-y-auto px-4 py-8", layout === "centered" ? "bg-neutral-50 dark:bg-neutral-950" : "bg-white dark:bg-neutral-950", className)}>
      {layout === "bleed" && <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 h-[60%] bg-[radial-gradient(60%_60%_at_50%_0%,rgb(0_0_0/0.05),transparent)] dark:bg-[radial-gradient(60%_60%_at_50%_0%,rgb(255_255_255/0.07),transparent)]" />}
      <div className="relative flex w-full max-w-[400px] flex-1 flex-col justify-center gap-6">
        <Brand className="self-center" />
        {layout === "centered" ? <div className="rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-20px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.06] @[440px]:p-8 dark:bg-neutral-900 dark:ring-white/[0.08]">{children}</div> : <div className="px-1">{children}</div>}
      </div>
      <div className="relative mt-8">{footer}</div>
    </div>
  );
}

/** Slides between screens of a flow; give each screen a different `id`. */
export function ScreenTransition({ id, children }: { id: string; children: ReactNode }) {
  return (
    <AnimatePresence mode="wait" initial={false}>
      <motion.div key={id} initial={{ opacity: 0, x: 10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -10 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }}>
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

export function AuthHeader({ icon, title, description, align = "left", className }: { icon?: ReactNode; title: ReactNode; description?: ReactNode; align?: "left" | "center"; className?: string }) {
  return (
    <div className={cn("mb-6", align === "center" && "text-center", className)}>
      {icon && (
        <span className={cn("mb-4 flex size-11 items-center justify-center rounded-[14px] bg-white text-neutral-700 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08)] dark:bg-neutral-800 dark:text-neutral-200 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1)] [&_svg]:size-5", align === "center" && "mx-auto")}>{icon}</span>
      )}
      <h1 className="text-[22px] font-semibold tracking-[-0.025em] text-neutral-950 dark:text-white">{title}</h1>
      {description && <p className="mt-1.5 text-[13.5px] leading-relaxed text-neutral-500 dark:text-neutral-400">{description}</p>}
    </div>
  );
}

export interface AuthFieldProps {
  label: ReactNode;
  /** Something on the right of the label, e.g. "Forgot password?". */
  action?: ReactNode;
  error?: ReactNode;
  hint?: ReactNode;
  children: (props: { id: string; "aria-invalid"?: boolean; "aria-describedby"?: string }) => ReactNode;
  className?: string;
}

/** Label, control, then either the error or a hint. The control gets the id and aria props it needs. */
export function AuthField({ label, action, error, hint, children, className }: AuthFieldProps) {
  const id = useId();
  const described = error ? `${id}-error` : hint ? `${id}-hint` : undefined;
  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      <div className="flex items-baseline justify-between gap-3">
        <label htmlFor={id} className="text-[13px] font-medium text-neutral-800 dark:text-neutral-200">
          {label}
        </label>
        {action}
      </div>
      {children({ id, "aria-invalid": error ? true : undefined, "aria-describedby": described })}
      <AnimatePresence initial={false} mode="popLayout">
        {error ? (
          <motion.p key="e" id={`${id}-error`} initial={{ opacity: 0, y: -3 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="text-[12px] text-red-600 dark:text-red-400">
            {error}
          </motion.p>
        ) : hint ? (
          <motion.p key="h" id={`${id}-hint`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-[12px] text-neutral-500">
            {hint}
          </motion.p>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

/** Full-width submit that keeps its width while showing a spinner. */
export function SubmitButton({ loading = false, children, className, disabled, ...props }: ComponentProps<typeof Button> & { loading?: boolean }) {
  return (
    <Button type="submit" disabled={disabled || loading} aria-busy={loading || undefined} className={cn("relative w-full disabled:opacity-100", className)} {...props}>
      <span className={cn("flex items-center gap-2 transition-opacity", loading && "opacity-0")}>{children}</span>
      {loading && (
        <span className="absolute inset-0 flex items-center justify-center">
          <Loader2 className="animate-spin" />
        </span>
      )}
    </Button>
  );
}

export function OrDivider({ children = "or" }: { children?: ReactNode }) {
  return (
    <div className="my-5 flex items-center gap-3 text-[12px] text-neutral-400">
      <span className="h-px flex-1 bg-black/[0.07] dark:bg-white/[0.08]" />
      {children}
      <span className="h-px flex-1 bg-black/[0.07] dark:bg-white/[0.08]" />
    </div>
  );
}

function GoogleMark() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden>
      <path fill="#4285F4" d="M22.6 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.6c2.1-1.9 3.3-4.8 3.3-8Z" />
      <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.7c-1 .7-2.2 1-3.7 1-2.9 0-5.3-1.9-6.2-4.5H2.1v2.8A11 11 0 0 0 12 23Z" />
      <path fill="#FBBC05" d="M5.8 14.1a6.6 6.6 0 0 1 0-4.2V7.1H2.1a11 11 0 0 0 0 9.8l3.7-2.8Z" />
      <path fill="#EA4335" d="M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2A11 11 0 0 0 2.1 7.1l3.7 2.8C6.7 7.3 9.1 5.4 12 5.4Z" />
    </svg>
  );
}

function GithubMark() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden className="fill-current">
      <path d="M12 1.5a10.5 10.5 0 0 0-3.3 20.5c.5.1.7-.2.7-.5v-1.9c-2.9.6-3.5-1.2-3.5-1.2-.5-1.2-1.2-1.5-1.2-1.5-1-.7 0-.6 0-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.5 1.1 3.1.9.1-.7.4-1.1.7-1.4-2.3-.3-4.8-1.2-4.8-5.2 0-1.1.4-2.1 1.1-2.8-.1-.3-.5-1.3.1-2.8 0 0 .9-.3 2.9 1.1a10 10 0 0 1 5.2 0c2-1.4 2.9-1.1 2.9-1.1.6 1.5.2 2.5.1 2.8.7.7 1.1 1.7 1.1 2.8 0 4-2.5 4.9-4.8 5.2.4.3.7 1 .7 2v2.9c0 .3.2.6.7.5A10.5 10.5 0 0 0 12 1.5Z" />
    </svg>
  );
}

export type Provider = "google" | "github";

/** Two provider buttons side by side. Keep it to two or three: a wall of logos makes people hesitate. */
export function ProviderButtons({ onSelect, loading, disabled }: { onSelect: (p: Provider) => void; loading?: Provider | null; disabled?: boolean }) {
  const items: { id: Provider; label: string; mark: ReactNode }[] = [
    { id: "google", label: "Google", mark: <GoogleMark /> },
    { id: "github", label: "GitHub", mark: <GithubMark /> },
  ];
  return (
    <div className="grid grid-cols-2 gap-2">
      {items.map((p) => (
        <Button key={p.id} variant="outline" disabled={disabled || !!loading} onClick={() => onSelect(p.id)} aria-label={`Continue with ${p.label}`} className="w-full disabled:opacity-60">
          {loading === p.id ? <Loader2 className="animate-spin" /> : p.mark}
          {p.label}
        </Button>
      ))}
    </div>
  );
}

/** The identified email with a way back to change it. */
export function EmailChip({ email, onChange }: { email: string; onChange?: () => void }) {
  return (
    <div className="mb-5 flex items-center gap-2 rounded-full bg-neutral-950/[0.04] py-1 pl-3 pr-1 text-[13px] text-neutral-700 dark:bg-white/[0.06] dark:text-neutral-300">
      <span className="min-w-0 flex-1 truncate">{email}</span>
      {onChange && (
        <button type="button" onClick={onChange} className="h-7 shrink-0 rounded-full px-2.5 text-[12px] font-medium text-neutral-900 outline-none hover:bg-white focus-visible:bg-white dark:text-white dark:hover:bg-white/[0.1] dark:focus-visible:bg-white/[0.1]">
          Change
        </button>
      )}
    </div>
  );
}

export function FormError({ children }: { children?: ReactNode }) {
  return (
    <AnimatePresence initial={false}>
      {children && (
        <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className="overflow-hidden">
          <p role="alert" className="mb-4 flex gap-2 rounded-[12px] bg-red-50 px-3 py-2.5 text-[12.5px] leading-5 text-red-800 ring-1 ring-red-500/15 dark:bg-red-500/10 dark:text-red-200 dark:ring-red-400/20">
            <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-red-600 dark:text-red-400" />
            <span>{children}</span>
          </p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

/** "Don't have an account? Sign up" under a form. */
export function AuthSwitch({ children, className }: { children: ReactNode; className?: string }) {
  return <p className={cn("mt-6 text-center text-[13px] text-neutral-500", className)}>{children}</p>;
}

export function TextLink({ className, ...props }: ComponentProps<"button">) {
  return <button type="button" className={cn("rounded-[4px] font-medium text-neutral-950 underline decoration-neutral-950/20 underline-offset-4 outline-none hover:decoration-neutral-950 focus-visible:decoration-neutral-950 dark:text-white dark:decoration-white/25 dark:hover:decoration-white", className)} {...props} />;
}

export function BackButton({ onClick, children = "Back" }: { onClick: () => void; children?: ReactNode }) {
  return (
    <button type="button" onClick={onClick} className="-ml-2 mb-4 flex h-8 items-center gap-1.5 rounded-[9px] px-2 text-[13px] font-medium text-neutral-500 outline-none hover:bg-neutral-950/[0.04] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.06] dark:hover:text-white">
      <ArrowLeft className="size-3.5" />
      {children}
    </button>
  );
}

export function Countdown({ seconds, children }: { seconds: number; children: ReactNode }) {
  return seconds > 0 ? <span className="tabular-nums text-neutral-400">Resend in 0:{String(seconds).padStart(2, "0")}</span> : <>{children}</>;
}

/** Seconds left before "Resend" unlocks, and a function to start again. */
export function useCountdown(from = 30, running = true) {
  const [left, setLeft] = useState(running ? from : 0);
  useEffect(() => {
    if (left <= 0) return;
    const t = setTimeout(() => setLeft((n) => n - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);
  return [left, () => setLeft(from)] as const;
}

3c:T1d15,"use client"; import { KeyRound, Mail } from "lucide-react"; import { useId, useState, type FormEvent } from "react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; import { Input } from "@/components/scalar-ui/input"; import { PasswordInput } from "@/components/scalar-ui/password-input"; import { AuthField, AuthHeader, AuthSwitch, EmailChip, FormError, OrDivider, ProviderButtons, ScreenTransition, SubmitButton, TextLink, type Provider } from "@/components/scalar-ui/auth/auth-ui"; import { identify, isEmail, signInWithPassword, signInWithProvider, type Account, type Org } from "@/components/scalar-ui/auth/data"; import { PasskeyButton } from "@/components/scalar-ui/auth/passkey"; export interface LoginFormProps { defaultEmail?: string; /** Signed in and done, with how: a password (no two-step), a passkey or a provider. */ onSignedIn: (account: Account, method: "password" | "passkey" | "provider") => void; /** The password was right and the account has two-factor on. */ onTwoFactor: (account: Account) => void; /** The email belongs to an organisation that signs in with SSO. */ onSso: (email: string, org?: Org) => void; onSignUp: (email?: string) => void; onForgot: (email: string) => void; onMagicLink: (email: string) => void; onLocked?: () => void; } /** * Email first: the address decides what comes next (a password, the company's SSO, or creating an account). A passkey * and two providers sit below for people who skip the email. */ export function LoginForm({ defaultEmail = "", onSignedIn, onTwoFactor, onSso, onSignUp, onForgot, onMagicLink, onLocked }: LoginFormProps) { const [step, setStep] = useState<"email" | "password">("email"); const [email, setEmail] = useState(defaultEmail); const [password, setPassword] = useState(""); const [account, setAccount] = useState(null); const [busy, setBusy] = useState(false); const [provider, setProvider] = useState(null); const [emailError, setEmailError] = useState(null); const [unknown, setUnknown] = useState(false); const [error, setError] = useState(null); const [remember, setRemember] = useState(true); const checkId = useId(); const submitEmail = async (e: FormEvent) => { e.preventDefault(); setUnknown(false); if (!isEmail(email)) return setEmailError("Enter an email like name@company.com"); setEmailError(null); setBusy(true); const who = await identify(email); setBusy(false); if (who.kind === "sso") return onSso(email, who.org); if (who.kind === "new") return setUnknown(true); setAccount(who.account); setStep("password"); }; const submitPassword = async (e: FormEvent) => { e.preventDefault(); if (!password) return setError("Enter your password."); setBusy(true); const result = await signInWithPassword(email, password); setBusy(false); if (!result.ok) { setError(result.error); if (result.locked) onLocked?.(); return; } setError(null); if (result.account.twoFactor) onTwoFactor(result.account); else onSignedIn(result.account, "password"); }; const withProvider = async (p: Provider) => { setProvider(p); onSignedIn(await signInWithProvider(p), "provider"); }; return ( {step === "email" ? ( <>

onSignedIn(a, "passkey")} disabled={busy || !!provider} />

Company account? onSso(email)}>Use single sign-on

New to Northwind? onSignUp()}>Create an account ) : ( <> {account?.avatar &&

} Welcome back, {account?.name.split(" ")[0]} } /> (setStep("email"), setPassword(""), setError(null))} />

{account?.passkey && ( (setStep("email"), setError(null))} className="flex items-center gap-1.5 font-normal text-neutral-600 dark:text-neutral-300"> Use your passkey instead )} onMagicLink(email)} className="font-normal text-neutral-600 dark:text-neutral-300"> Email me a sign-in link

)} ); } 3d:T12d64,

"use client";

import { KeyRound, Mail } from "lucide-react";
import { useId, useState, type FormEvent } from "react";
import { Checkbox } from "@/components/scalar-ui/checkbox";
import { Input } from "@/components/scalar-ui/input";
import { PasswordInput } from "@/components/scalar-ui/password-input";
import { AuthField, AuthHeader, AuthSwitch, EmailChip, FormError, OrDivider, ProviderButtons, ScreenTransition, SubmitButton, TextLink, type Provider } from "@/components/scalar-ui/auth/auth-ui";
import { identify, isEmail, signInWithPassword, signInWithProvider, type Account, type Org } from "@/components/scalar-ui/auth/data";
import { PasskeyButton } from "@/components/scalar-ui/auth/passkey";

export interface LoginFormProps {
  defaultEmail?: string;
  /** Signed in and done, with how: a password (no two-step), a passkey or a provider. */
  onSignedIn: (account: Account, method: "password" | "passkey" | "provider") => void;
  /** The password was right and the account has two-factor on. */
  onTwoFactor: (account: Account) => void;
  /** The email belongs to an organisation that signs in with SSO. */
  onSso: (email: string, org?: Org) => void;
  onSignUp: (email?: string) => void;
  onForgot: (email: string) => void;
  onMagicLink: (email: string) => void;
  onLocked?: () => void;
}

/**
 * Email first: the address decides what comes next (a password, the company's SSO, or creating an account). A passkey
 * and two providers sit below for people who skip the email.
 */
export function LoginForm({ defaultEmail = "", onSignedIn, onTwoFactor, onSso, onSignUp, onForgot, onMagicLink, onLocked }: LoginFormProps) {
  const [step, setStep] = useState<"email" | "password">("email");
  const [email, setEmail] = useState(defaultEmail);
  const [password, setPassword] = useState("");
  const [account, setAccount] = useState<Account | null>(null);
  const [busy, setBusy] = useState(false);
  const [provider, setProvider] = useState<Provider | null>(null);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [unknown, setUnknown] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [remember, setRemember] = useState(true);
  const checkId = useId();

  const submitEmail = async (e: FormEvent) => {
    e.preventDefault();
    setUnknown(false);
    if (!isEmail(email)) return setEmailError("Enter an email like name@company.com");
    setEmailError(null);
    setBusy(true);
    const who = await identify(email);
    setBusy(false);
    if (who.kind === "sso") return onSso(email, who.org);
    if (who.kind === "new") return setUnknown(true);
    setAccount(who.account);
    setStep("password");
  };

  const submitPassword = async (e: FormEvent) => {
    e.preventDefault();
    if (!password) return setError("Enter your password.");
    setBusy(true);
    const result = await signInWithPassword(email, password);
    setBusy(false);
    if (!result.ok) {
      setError(result.error);
      if (result.locked) onLocked?.();
      return;
    }
    setError(null);
    if (result.account.twoFactor) onTwoFactor(result.account);
    else onSignedIn(result.account, "password");
  };

  const withProvider = async (p: Provider) => {
    setProvider(p);
    onSignedIn(await signInWithProvider(p), "provider");
  };

  return (
    <ScreenTransition id={step}>
      {step === "email" ? (
        <>
          <AuthHeader title="Log in to Northwind" description="Welcome back. Use your work email to continue." />
          <form onSubmit={submitEmail} noValidate className="flex flex-col gap-4">
            <AuthField
              label="Email"
              error={emailError}
              hint={
                unknown ? (
                  <span className="text-neutral-700 dark:text-neutral-300">
                    There's no account for this email yet.{" "}
                    <TextLink onClick={() => onSignUp(email)}>Create one</TextLink>
                  </span>
                ) : undefined
              }
            >
              {(field) => (
                <Input
                  {...field}
                  type="email"
                  autoComplete="username webauthn"
                  autoFocus
                  placeholder="name@company.com"
                  value={email}
                  invalid={!!emailError}
                  onChange={(e) => (setEmail(e.target.value), setEmailError(null), setUnknown(false))}
                  leading={<Mail />}
                />
              )}
            </AuthField>
            <SubmitButton loading={busy}>Continue</SubmitButton>
          </form>
          <OrDivider />
          <div className="flex flex-col gap-2">
            <PasskeyButton onSignedIn={(a) => onSignedIn(a, "passkey")} disabled={busy || !!provider} />
            <ProviderButtons onSelect={withProvider} loading={provider} disabled={busy} />
          </div>
          <p className="mt-4 text-center text-[12.5px] text-neutral-500">
            Company account? <TextLink onClick={() => onSso(email)}>Use single sign-on</TextLink>
          </p>
          <AuthSwitch>
            New to Northwind? <TextLink onClick={() => onSignUp()}>Create an account</TextLink>
          </AuthSwitch>
        </>
      ) : (
        <>
          <AuthHeader
            title={
              <span className="flex items-center gap-3">
                {account?.avatar && <img src={account.avatar} alt="" className="size-9 rounded-full object-cover ring-1 ring-black/[0.06] dark:ring-white/[0.1]" />}
                Welcome back, {account?.name.split(" ")[0]}
              </span>
            }
          />
          <EmailChip email={email} onChange={() => (setStep("email"), setPassword(""), setError(null))} />
          <form onSubmit={submitPassword} noValidate className="flex flex-col gap-4">
            <FormError>{error}</FormError>
            <AuthField label="Password" action={<TextLink onClick={() => onForgot(email)} className="text-[12.5px] font-normal text-neutral-500 no-underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white">Forgot password?</TextLink>}>
              {(field) => <PasswordInput {...field} autoComplete="current-password" autoFocus capsLockHint value={password} invalid={!!error} onChange={(e) => (setPassword(e.target.value), setError(null))} />}
            </AuthField>
            <div className="flex items-center gap-2.5 text-[13px] text-neutral-700 dark:text-neutral-300">
              <Checkbox id={checkId} checked={remember} onCheckedChange={(v) => setRemember(v === true)} />
              <label htmlFor={checkId}>Stay signed in for 30 days</label>
            </div>
            <SubmitButton loading={busy}>Log in</SubmitButton>
          </form>
          <div className="mt-5 flex flex-col items-center gap-2 text-[12.5px] text-neutral-500">
            {account?.passkey && (
              <TextLink onClick={() => (setStep("email"), setError(null))} className="flex items-center gap-1.5 font-normal text-neutral-600 dark:text-neutral-300">
                <KeyRound className="size-3.5" />
                Use your passkey instead
              </TextLink>
            )}
            <TextLink onClick={() => onMagicLink(email)} className="font-normal text-neutral-600 dark:text-neutral-300">
              Email me a sign-in link
            </TextLink>
          </div>
        </>
      )}
    </ScreenTransition>
  );
}

3e:T129f,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, ChevronDown, KeyRound, Loader2, ScanFace } from "lucide-react"; import { useRef, useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader } from "@/components/scalar-ui/auth/auth-ui"; import { savePasskey, signInWithPasskey, type Account } from "@/components/scalar-ui/auth/data"; /** Starts a passkey sign-in. While the device prompt is open it says so and offers Cancel. */ export function PasskeyButton({ onSignedIn, disabled }: { onSignedIn: (account: Account) => void; disabled?: boolean }) { const [waiting, setWaiting] = useState(false); const attempt = useRef(0); const start = async () => { const id = ++attempt.current; setWaiting(true); const account = await signInWithPasskey(); if (id !== attempt.current) return; setWaiting(false); onSignedIn(account); }; return (

{waiting && ( )}

); } /** The prompt after a password login: save a passkey now or later. Plain words, no protocol names. */ export function SavePasskeyPrompt({ onDone, onSkip }: { onDone: () => void; onSkip: () => void }) { const [state, setState] = useState<"idle" | "saving" | "saved">("idle"); const [more, setMore] = useState(false); const save = async () => { setState("saving"); await savePasskey(); setState("saved"); setTimeout(onDone, 900); }; return (

{state === "saved" ? : } } title={state === "saved" ? "Passkey saved" : "Log in faster next time"} description={state === "saved" ? "Next time, just use your face, fingerprint or screen lock." : "Save a passkey on this device and sign in with your face, fingerprint or screen lock. No password to remember or type."} />

{more && ( A passkey replaces your password with the lock you already use on this phone or computer. It can't be guessed or phished, and it stays on your device. )}

); } 3f:Tc313,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronDown, KeyRound, Loader2, ScanFace } from "lucide-react";
import { useRef, useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader } from "@/components/scalar-ui/auth/auth-ui";
import { savePasskey, signInWithPasskey, type Account } from "@/components/scalar-ui/auth/data";

/** Starts a passkey sign-in. While the device prompt is open it says so and offers Cancel. */
export function PasskeyButton({ onSignedIn, disabled }: { onSignedIn: (account: Account) => void; disabled?: boolean }) {
  const [waiting, setWaiting] = useState(false);
  const attempt = useRef(0);
  const start = async () => {
    const id = ++attempt.current;
    setWaiting(true);
    const account = await signInWithPasskey();
    if (id !== attempt.current) return;
    setWaiting(false);
    onSignedIn(account);
  };
  return (
    <div className="relative">
      <Button variant="outline" onClick={start} disabled={disabled || waiting} className="w-full disabled:opacity-100">
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span key={waiting ? "w" : "i"} initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} transition={{ duration: 0.18 }} className="flex items-center gap-2">
            {waiting ? <Loader2 className="animate-spin" /> : <KeyRound />}
            {waiting ? "Waiting for your device…" : "Sign in with a passkey"}
          </motion.span>
        </AnimatePresence>
      </Button>
      {waiting && (
        <button type="button" onClick={() => (attempt.current++, setWaiting(false))} className="absolute right-2 top-1/2 h-7 -translate-y-1/2 rounded-[8px] px-2 text-[12px] font-medium text-neutral-500 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
          Cancel
        </button>
      )}
    </div>
  );
}

/** The prompt after a password login: save a passkey now or later. Plain words, no protocol names. */
export function SavePasskeyPrompt({ onDone, onSkip }: { onDone: () => void; onSkip: () => void }) {
  const [state, setState] = useState<"idle" | "saving" | "saved">("idle");
  const [more, setMore] = useState(false);
  const save = async () => {
    setState("saving");
    await savePasskey();
    setState("saved");
    setTimeout(onDone, 900);
  };
  return (
    <div>
      <AuthHeader
        icon={
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.span key={state === "saved" ? "ok" : "face"} initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", bounce: 0.4, duration: 0.4 }} className="flex">
              {state === "saved" ? <Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} /> : <ScanFace />}
            </motion.span>
          </AnimatePresence>
        }
        title={state === "saved" ? "Passkey saved" : "Log in faster next time"}
        description={state === "saved" ? "Next time, just use your face, fingerprint or screen lock." : "Save a passkey on this device and sign in with your face, fingerprint or screen lock. No password to remember or type."}
      />
      <div className="flex flex-col gap-2">
        <Button onClick={save} disabled={state !== "idle"} className="w-full disabled:opacity-100">
          {state === "saving" ? <Loader2 className="animate-spin" /> : state === "saved" ? <Check /> : <KeyRound />}
          {state === "saving" ? "Follow the prompt on your device…" : state === "saved" ? "Saved" : "Save a passkey"}
        </Button>
        <Button variant="ghost" onClick={onSkip} disabled={state !== "idle"} className="w-full">
          Not now
        </Button>
      </div>
      <button type="button" onClick={() => setMore((m) => !m)} aria-expanded={more} className="mx-auto mt-4 flex items-center gap-1 text-[12.5px] text-neutral-500 outline-none hover:text-neutral-900 dark:hover:text-white">
        What's a passkey?
        <ChevronDown className={more ? "size-3.5 rotate-180 transition-transform" : "size-3.5 transition-transform"} />
      </button>
      <AnimatePresence initial={false}>
        {more && (
          <motion.p initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden text-center text-[12.5px] leading-relaxed text-neutral-500">
            <span className="block pt-2">A passkey replaces your password with the lock you already use on this phone or computer. It can't be guessed or phished, and it stays on your device.</span>
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  );
}

40:Tf10,"use client"; import { ShieldCheck } from "lucide-react"; import { useId, useState, type FormEvent } from "react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; import { Input } from "@/components/scalar-ui/input"; import { InputOTP } from "@/components/scalar-ui/input-otp"; import { AuthField, AuthHeader, BackButton, FormError, ScreenTransition, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui"; import { verifyCode } from "@/components/scalar-ui/auth/data"; /** The second step after a password: an authenticator code, or a recovery code if the phone is gone. */ export function TwoFactorChallenge({ onVerified, onBack }: { onVerified: (trustDevice: boolean) => void; onBack?: () => void }) { const [mode, setMode] = useState<"app" | "recovery">("app"); const [code, setCode] = useState(""); const [recovery, setRecovery] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const [trust, setTrust] = useState(false); const checkId = useId(); const check = async (value: string) => { setBusy(true); const ok = await verifyCode(value); setBusy(false); if (ok) onVerified(trust); else { setError(mode === "app" ? "That code didn't work. Codes change every 30 seconds, so use the newest one." : "That recovery code isn't valid or was already used."); setCode(""); } }; const submit = (e: FormEvent) => { e.preventDefault(); const value = mode === "app" ? code : recovery.trim(); if (mode === "app" && value.length < 6) return setError("Enter all 6 digits."); if (mode === "recovery" && !value) return setError("Enter one of your recovery codes."); check(value); }; return (

{onBack && } } title="Two-step verification" description={mode === "app" ? "Open your authenticator app and enter the 6-digit code for Northwind." : "Enter one of the recovery codes you saved when you turned on two-step verification."} />

(setMode(mode === "app" ? "recovery" : "app"), setError(null))} className="font-normal text-neutral-600 dark:text-neutral-300"> {mode === "app" ? "Use a recovery code" : "Use your authenticator app"} Lost your phone and codes? Get help

); } 41:Ta54f,

"use client";

import { ShieldCheck } from "lucide-react";
import { useId, useState, type FormEvent } from "react";
import { Checkbox } from "@/components/scalar-ui/checkbox";
import { Input } from "@/components/scalar-ui/input";
import { InputOTP } from "@/components/scalar-ui/input-otp";
import { AuthField, AuthHeader, BackButton, FormError, ScreenTransition, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui";
import { verifyCode } from "@/components/scalar-ui/auth/data";

/** The second step after a password: an authenticator code, or a recovery code if the phone is gone. */
export function TwoFactorChallenge({ onVerified, onBack }: { onVerified: (trustDevice: boolean) => void; onBack?: () => void }) {
  const [mode, setMode] = useState<"app" | "recovery">("app");
  const [code, setCode] = useState("");
  const [recovery, setRecovery] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [trust, setTrust] = useState(false);
  const checkId = useId();

  const check = async (value: string) => {
    setBusy(true);
    const ok = await verifyCode(value);
    setBusy(false);
    if (ok) onVerified(trust);
    else {
      setError(mode === "app" ? "That code didn't work. Codes change every 30 seconds, so use the newest one." : "That recovery code isn't valid or was already used.");
      setCode("");
    }
  };
  const submit = (e: FormEvent) => {
    e.preventDefault();
    const value = mode === "app" ? code : recovery.trim();
    if (mode === "app" && value.length < 6) return setError("Enter all 6 digits.");
    if (mode === "recovery" && !value) return setError("Enter one of your recovery codes.");
    check(value);
  };

  return (
    <div>
      {onBack && <BackButton onClick={onBack} />}
      <AuthHeader icon={<ShieldCheck />} title="Two-step verification" description={mode === "app" ? "Open your authenticator app and enter the 6-digit code for Northwind." : "Enter one of the recovery codes you saved when you turned on two-step verification."} />
      <form onSubmit={submit} noValidate className="flex flex-col gap-4">
        <FormError>{error}</FormError>
        <ScreenTransition id={mode}>
          {mode === "app" ? (
            <InputOTP
              length={6}
              groups={[3, 3]}
              value={code}
              invalid={!!error}
              autoFocus
              onValueChange={(v) => {
                setCode(v);
                setError(null);
                if (v.length === 6) check(v);
              }}
              aria-label="Authentication code"
            />
          ) : (
            <AuthField label="Recovery code">{(field) => <Input {...field} autoFocus autoComplete="one-time-code" placeholder="xxxx-xxxx" value={recovery} onChange={(e) => (setRecovery(e.target.value), setError(null))} inputClassName="font-mono" />}</AuthField>
          )}
        </ScreenTransition>
        <div className="flex items-center gap-2.5 text-[13px] text-neutral-700 dark:text-neutral-300">
              <Checkbox id={checkId} checked={trust} onCheckedChange={(v) => setTrust(v === true)} />
              <label htmlFor={checkId}>Don't ask again on this device for 30 days</label>
            </div>
        <SubmitButton loading={busy}>Verify</SubmitButton>
      </form>
      <div className="mt-5 flex flex-col items-center gap-2 text-[12.5px] text-neutral-500">
        <TextLink onClick={() => (setMode(mode === "app" ? "recovery" : "app"), setError(null))} className="font-normal text-neutral-600 dark:text-neutral-300">
          {mode === "app" ? "Use a recovery code" : "Use your authenticator app"}
        </TextLink>
        <span>
          Lost your phone and codes? <TextLink className="font-normal">Get help</TextLink>
        </span>
      </div>
    </div>
  );
}

42:T19f8,"use client"; import { Mail, User } from "lucide-react"; import { useId, useState, type FormEvent } from "react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; import { Input } from "@/components/scalar-ui/input"; import { PasswordInput, type PasswordRequirement } from "@/components/scalar-ui/password-input"; import { AuthField, AuthHeader, AuthSwitch, BackButton, FormError, OrDivider, ProviderButtons, ScreenTransition, SubmitButton, TextLink, type Provider } from "@/components/scalar-ui/auth/auth-ui"; import { createAccount, isEmail, signInWithProvider, type Account } from "@/components/scalar-ui/auth/data"; const RULES: PasswordRequirement[] = [ { label: "At least 10 characters", test: (v) => v.length >= 10 }, { label: "A number or a symbol", test: (v) => /[\d\W]/.test(v) }, { label: "Not your email", test: (v) => v.length > 0 && !v.includes("@") }, ]; export interface SignUpFormProps { /** single: everything on one screen · two-step: email first, then name and password. */ variant?: "single" | "two-step"; defaultEmail?: string; /** The account was created; next, verify the email. */ onCreated: (email: string) => void; onProviderSignedIn?: (account: Account) => void; onLogIn: (email?: string) => void; } /** Create an account with a name, email and password (with live rules), or with Google or GitHub. */ export function SignUpForm({ variant = "single", defaultEmail = "", onCreated, onProviderSignedIn, onLogIn }: SignUpFormProps) { const [step, setStep] = useState<"email" | "details">(variant === "single" ? "details" : "email"); const [name, setName] = useState(""); const [email, setEmail] = useState(defaultEmail); const [password, setPassword] = useState(""); const [terms, setTerms] = useState(false); const [errors, setErrors] = useState>({}); const [formError, setFormError] = useState(null); const [busy, setBusy] = useState(false); const [provider, setProvider] = useState(null); const termsId = useId(); const check = (fields: string[]) => { const next: Record = {}; if (fields.includes("name") && !name.trim()) next.name = "Enter your name."; if (fields.includes("email") && !isEmail(email)) next.email = "Enter an email like name@company.com"; if (fields.includes("password") && !RULES.every((r) => r.test(password))) next.password = "Your password needs to meet every rule below."; if (fields.includes("terms") && !terms) next.terms = "Please accept the terms to continue."; setErrors(next); return Object.keys(next).length === 0; }; const submit = async (e: FormEvent) => { e.preventDefault(); if (step === "email") { if (check(["email"])) setStep("details"); return; } if (!check(variant === "single" ? ["name", "email", "password", "terms"] : ["name", "password", "terms"])) return; setBusy(true); const result = await createAccount({ name, email, password }); setBusy(false); if (!result.ok) return setFormError(result.error); onCreated(result.email); }; const withProvider = async (p: Provider) => { setProvider(p); const account = await signInWithProvider(p); onProviderSignedIn?.(account); }; const emailField = ( {(field) => (setEmail(e.target.value), setFormError(null))} leading={} autoFocus={step === "email"} />} ); return ( {step === "email" ? ( <> ) : ( <> {variant === "two-step" && setStep("email")} />} Signing up as {email} : "Free for teams up to 10. No card needed."} /> {variant === "single" && ( <> )}

{formError && ( <> {formError} onLogIn(email)}>Log in )} {(field) => setName(e.target.value)} leading={} autoFocus={variant === "two-step"} />} {variant === "single" && emailField} {(field) => setPassword(e.target.value)} requirements={RULES} />}

(setTerms(v === true), setErrors((x) => ({ ...x, terms: "" })))} className="mt-0.5" aria-invalid={!!errors.terms || undefined} /> I agree to the Terms and Privacy Policy.

{errors.terms &&

{errors.terms}

}

Create account

)} Already have an account? onLogIn(email)}>Log in ); } 43:T12e5f,

"use client";

import { Mail, User } from "lucide-react";
import { useId, useState, type FormEvent } from "react";
import { Checkbox } from "@/components/scalar-ui/checkbox";
import { Input } from "@/components/scalar-ui/input";
import { PasswordInput, type PasswordRequirement } from "@/components/scalar-ui/password-input";
import { AuthField, AuthHeader, AuthSwitch, BackButton, FormError, OrDivider, ProviderButtons, ScreenTransition, SubmitButton, TextLink, type Provider } from "@/components/scalar-ui/auth/auth-ui";
import { createAccount, isEmail, signInWithProvider, type Account } from "@/components/scalar-ui/auth/data";

const RULES: PasswordRequirement[] = [
  { label: "At least 10 characters", test: (v) => v.length >= 10 },
  { label: "A number or a symbol", test: (v) => /[\d\W]/.test(v) },
  { label: "Not your email", test: (v) => v.length > 0 && !v.includes("@") },
];

export interface SignUpFormProps {
  /** single: everything on one screen · two-step: email first, then name and password. */
  variant?: "single" | "two-step";
  defaultEmail?: string;
  /** The account was created; next, verify the email. */
  onCreated: (email: string) => void;
  onProviderSignedIn?: (account: Account) => void;
  onLogIn: (email?: string) => void;
}

/** Create an account with a name, email and password (with live rules), or with Google or GitHub. */
export function SignUpForm({ variant = "single", defaultEmail = "", onCreated, onProviderSignedIn, onLogIn }: SignUpFormProps) {
  const [step, setStep] = useState<"email" | "details">(variant === "single" ? "details" : "email");
  const [name, setName] = useState("");
  const [email, setEmail] = useState(defaultEmail);
  const [password, setPassword] = useState("");
  const [terms, setTerms] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [formError, setFormError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [provider, setProvider] = useState<Provider | null>(null);
  const termsId = useId();

  const check = (fields: string[]) => {
    const next: Record<string, string> = {};
    if (fields.includes("name") && !name.trim()) next.name = "Enter your name.";
    if (fields.includes("email") && !isEmail(email)) next.email = "Enter an email like name@company.com";
    if (fields.includes("password") && !RULES.every((r) => r.test(password))) next.password = "Your password needs to meet every rule below.";
    if (fields.includes("terms") && !terms) next.terms = "Please accept the terms to continue.";
    setErrors(next);
    return Object.keys(next).length === 0;
  };

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (step === "email") {
      if (check(["email"])) setStep("details");
      return;
    }
    if (!check(variant === "single" ? ["name", "email", "password", "terms"] : ["name", "password", "terms"])) return;
    setBusy(true);
    const result = await createAccount({ name, email, password });
    setBusy(false);
    if (!result.ok) return setFormError(result.error);
    onCreated(result.email);
  };

  const withProvider = async (p: Provider) => {
    setProvider(p);
    const account = await signInWithProvider(p);
    onProviderSignedIn?.(account);
  };

  const emailField = (
    <AuthField label="Work email" error={errors.email}>
      {(field) => <Input {...field} type="email" autoComplete="email" placeholder="name@company.com" value={email} invalid={!!errors.email} onChange={(e) => (setEmail(e.target.value), setFormError(null))} leading={<Mail />} autoFocus={step === "email"} />}
    </AuthField>
  );

  return (
    <ScreenTransition id={step}>
      {step === "email" ? (
        <>
          <AuthHeader title="Create your account" description="Free for teams up to 10. No card needed." />
          <ProviderButtons onSelect={withProvider} loading={provider} />
          <OrDivider />
          <form onSubmit={submit} noValidate className="flex flex-col gap-4">
            {emailField}
            <SubmitButton>Continue with email</SubmitButton>
          </form>
        </>
      ) : (
        <>
          {variant === "two-step" && <BackButton onClick={() => setStep("email")} />}
          <AuthHeader title={variant === "two-step" ? "A few details" : "Create your account"} description={variant === "two-step" ? <>Signing up as <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b></> : "Free for teams up to 10. No card needed."} />
          {variant === "single" && (
            <>
              <ProviderButtons onSelect={withProvider} loading={provider} />
              <OrDivider />
            </>
          )}
          <form onSubmit={submit} noValidate className="flex flex-col gap-4">
            <FormError>
              {formError && (
                <>
                  {formError} <TextLink onClick={() => onLogIn(email)}>Log in</TextLink>
                </>
              )}
            </FormError>
            <AuthField label="Full name" error={errors.name}>
              {(field) => <Input {...field} autoComplete="name" placeholder="Maya Chen" value={name} invalid={!!errors.name} onChange={(e) => setName(e.target.value)} leading={<User />} autoFocus={variant === "two-step"} />}
            </AuthField>
            {variant === "single" && emailField}
            <AuthField label="Password" error={errors.password}>
              {(field) => <PasswordInput {...field} autoComplete="new-password" value={password} invalid={!!errors.password} onChange={(e) => setPassword(e.target.value)} requirements={RULES} />}
            </AuthField>
            <div>
              <div className="flex items-start gap-2.5 text-[12.5px] leading-5 text-neutral-600 dark:text-neutral-400">
                <Checkbox id={termsId} checked={terms} onCheckedChange={(v) => (setTerms(v === true), setErrors((x) => ({ ...x, terms: "" })))} className="mt-0.5" aria-invalid={!!errors.terms || undefined} />
                <span>
                  <label htmlFor={termsId}>I agree to the</label> <TextLink className="font-normal">Terms</TextLink> and <TextLink className="font-normal">Privacy Policy</TextLink>.
                </span>
              </div>
              {errors.terms && <p className="mt-1 pl-[26px] text-[12px] text-red-600 dark:text-red-400">{errors.terms}</p>}
            </div>
            <SubmitButton loading={busy}>Create account</SubmitButton>
          </form>
        </>
      )}
      <AuthSwitch>
        Already have an account? <TextLink onClick={() => onLogIn(email)}>Log in</TextLink>
      </AuthSwitch>
    </ScreenTransition>
  );
}

44:T1393,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, Mail, MailOpen } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { InputOTP } from "@/components/scalar-ui/input-otp"; import { AuthHeader, Countdown, FormError, ScreenTransition, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui"; import { sendEmail, verifyCode } from "@/components/scalar-ui/auth/data"; function MailApps() { return (

); } export interface CheckEmailProps { email: string; /** link: we emailed a sign-in link · code: type the 6-digit code from the email. */ mode?: "link" | "code"; onVerified: () => void; onChangeEmail?: () => void; /** Lets people switch between the link and a code. */ allowSwitch?: boolean; } /** After a magic link or sign-up: open the email, or type the code from it. Resend unlocks after 30 seconds. */ export function CheckEmail({ email, mode: initialMode = "link", onVerified, onChangeEmail, allowSwitch = true }: CheckEmailProps) { const [mode, setMode] = useState(initialMode); const [code, setCode] = useState(""); const [state, setState] = useState<"idle" | "checking" | "invalid" | "done">("idle"); const [left, restart] = useCountdown(30); const [sent, setSent] = useState(false); const verify = async (value: string) => { setState("checking"); const ok = await verifyCode(value); if (!ok) return setState("invalid"), setCode(""); setState("done"); setTimeout(onVerified, 700); }; const resend = async () => { await sendEmail(email); restart(); setSent(true); setTimeout(() => setSent(false), 2400); }; return ( {state === "done" ? : mode === "link" ? : } } title={state === "done" ? "You're verified" : "Check your email"} description={ <> {mode === "link" ? "We sent a sign-in link to " : "We sent a 6-digit code to "} {email} {mode === "link" ? ". It works once and expires in 15 minutes." : ". Enter it below."} } /> {mode === "code" ? (

{state === "invalid" ? "That code isn't right. Check the newest email from us." : null} { setCode(v); if (state === "invalid") setState("idle"); if (v.length === 6) verify(v); }} aria-label="Code from the email" />

{state === "checking" ? "Checking…" : state === "done" ? "Signing you in…" : null}

) : ( )}

Didn't get it? Check spam, or{" "} send it again {sent && Sent}

{allowSwitch && ( (setMode(mode === "link" ? "code" : "link"), setState("idle"), setCode(""))} className="font-normal text-neutral-600 dark:text-neutral-300"> {mode === "link" ? "Enter a code instead" : "Use the link instead"} )} {onChangeEmail && ( Use a different email )}

); } 45:Td610,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, Mail, MailOpen } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { InputOTP } from "@/components/scalar-ui/input-otp";
import { AuthHeader, Countdown, FormError, ScreenTransition, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui";
import { sendEmail, verifyCode } from "@/components/scalar-ui/auth/data";

function MailApps() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button variant="outline" asChild className="w-full">
        <a href="https://mail.google.com" target="_blank" rel="noreferrer">
          Open Gmail
        </a>
      </Button>
      <Button variant="outline" asChild className="w-full">
        <a href="https://outlook.live.com/mail" target="_blank" rel="noreferrer">
          Open Outlook
        </a>
      </Button>
    </div>
  );
}

export interface CheckEmailProps {
  email: string;
  /** link: we emailed a sign-in link · code: type the 6-digit code from the email. */
  mode?: "link" | "code";
  onVerified: () => void;
  onChangeEmail?: () => void;
  /** Lets people switch between the link and a code. */
  allowSwitch?: boolean;
}

/** After a magic link or sign-up: open the email, or type the code from it. Resend unlocks after 30 seconds. */
export function CheckEmail({ email, mode: initialMode = "link", onVerified, onChangeEmail, allowSwitch = true }: CheckEmailProps) {
  const [mode, setMode] = useState(initialMode);
  const [code, setCode] = useState("");
  const [state, setState] = useState<"idle" | "checking" | "invalid" | "done">("idle");
  const [left, restart] = useCountdown(30);
  const [sent, setSent] = useState(false);

  const verify = async (value: string) => {
    setState("checking");
    const ok = await verifyCode(value);
    if (!ok) return setState("invalid"), setCode("");
    setState("done");
    setTimeout(onVerified, 700);
  };
  const resend = async () => {
    await sendEmail(email);
    restart();
    setSent(true);
    setTimeout(() => setSent(false), 2400);
  };

  return (
    <ScreenTransition id={mode}>
      <AuthHeader
        icon={
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.span key={state === "done" ? "ok" : "mail"} initial={{ scale: 0.5, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", bounce: 0.4, duration: 0.4 }} className="flex">
              {state === "done" ? <Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} /> : mode === "link" ? <MailOpen /> : <Mail />}
            </motion.span>
          </AnimatePresence>
        }
        title={state === "done" ? "You're verified" : "Check your email"}
        description={
          <>
            {mode === "link" ? "We sent a sign-in link to " : "We sent a 6-digit code to "}
            <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b>
            {mode === "link" ? ". It works once and expires in 15 minutes." : ". Enter it below."}
          </>
        }
      />
      {mode === "code" ? (
        <div className="flex flex-col gap-4">
          <FormError>{state === "invalid" ? "That code isn't right. Check the newest email from us." : null}</FormError>
          <InputOTP
            length={6}
            groups={[3, 3]}
            value={code}
            autoFocus
            invalid={state === "invalid"}
            disabled={state === "checking" || state === "done"}
            onValueChange={(v) => {
              setCode(v);
              if (state === "invalid") setState("idle");
              if (v.length === 6) verify(v);
            }}
            aria-label="Code from the email"
          />
          <p className="h-5 text-center text-[12.5px] text-neutral-500">{state === "checking" ? "Checking…" : state === "done" ? "Signing you in…" : null}</p>
        </div>
      ) : (
        <MailApps />
      )}
      <div className="mt-6 flex flex-col items-center gap-2 text-[12.5px] text-neutral-500">
        <p>
          Didn't get it? Check spam, or{" "}
          <Countdown seconds={left}>
            <TextLink onClick={resend} className="font-normal">
              send it again
            </TextLink>
          </Countdown>
          {sent && <span className="ml-1 text-emerald-600 dark:text-emerald-400">Sent</span>}
        </p>
        {allowSwitch && (
          <TextLink onClick={() => (setMode(mode === "link" ? "code" : "link"), setState("idle"), setCode(""))} className="font-normal text-neutral-600 dark:text-neutral-300">
            {mode === "link" ? "Enter a code instead" : "Use the link instead"}
          </TextLink>
        )}
        {onChangeEmail && (
          <TextLink onClick={onChangeEmail} className="font-normal text-neutral-600 dark:text-neutral-300">
            Use a different email
          </TextLink>
        )}
      </div>
    </ScreenTransition>
  );
}

46:Ta5c,"use client"; import { Check, Clock, MailCheck } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader, Countdown, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui"; import { sendEmail } from "@/components/scalar-ui/auth/data"; export type VerifyState = "pending" | "success" | "expired"; /** The page a verification link opens, and the "go verify" page before it: waiting, verified or expired. */ export function VerifyEmailStatus({ state, email, onContinue, onResent }: { state: VerifyState; email: string; onContinue?: () => void; onResent?: () => void }) { const [left, restart] = useCountdown(30, state === "pending"); const [busy, setBusy] = useState(false); const resend = async () => { setBusy(true); await sendEmail(email); setBusy(false); restart(); onResent?.(); }; if (state === "success") return (

} title="Email verified" description={<>Thanks for confirming {email}. You're all set.} />

); if (state === "expired") return (

} title="This link has expired" description="Verification links last 24 hours and work once. We can send you a fresh one." />

); return (

} title="Verify your email" description={<>We sent a link to {email}. Open it on any device to finish setting up.} />

You can keep using Northwind in the meantime. Some things, like inviting people, unlock once you're verified.

Nothing yet?{" "} {busy ? "Sending…" : "Resend the link"}

); } 47:T6754,

"use client";

import { Check, Clock, MailCheck } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader, Countdown, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui";
import { sendEmail } from "@/components/scalar-ui/auth/data";

export type VerifyState = "pending" | "success" | "expired";

/** The page a verification link opens, and the "go verify" page before it: waiting, verified or expired. */
export function VerifyEmailStatus({ state, email, onContinue, onResent }: { state: VerifyState; email: string; onContinue?: () => void; onResent?: () => void }) {
  const [left, restart] = useCountdown(30, state === "pending");
  const [busy, setBusy] = useState(false);
  const resend = async () => {
    setBusy(true);
    await sendEmail(email);
    setBusy(false);
    restart();
    onResent?.();
  };
  if (state === "success")
    return (
      <div>
        <AuthHeader icon={<Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} />} title="Email verified" description={<>Thanks for confirming <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b>. You're all set.</>} />
        <Button onClick={onContinue} className="w-full">
          Continue to Northwind
        </Button>
      </div>
    );
  if (state === "expired")
    return (
      <div>
        <AuthHeader icon={<Clock />} title="This link has expired" description="Verification links last 24 hours and work once. We can send you a fresh one." />
        <Button onClick={resend} disabled={busy || left > 0} className="w-full">
          {left > 0 ? "Sent. Check your inbox" : busy ? "Sending…" : "Send a new link"}
        </Button>
      </div>
    );
  return (
    <div>
      <AuthHeader icon={<MailCheck />} title="Verify your email" description={<>We sent a link to <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b>. Open it on any device to finish setting up.</>} />
      <div className="rounded-[14px] bg-neutral-50 p-3.5 text-[12.5px] leading-relaxed text-neutral-600 ring-1 ring-black/[0.04] dark:bg-white/[0.03] dark:text-neutral-400 dark:ring-white/[0.06]">You can keep using Northwind in the meantime. Some things, like inviting people, unlock once you're verified.</div>
      <p className="mt-6 text-center text-[12.5px] text-neutral-500">
        Nothing yet?{" "}
        <Countdown seconds={left}>
          <TextLink onClick={resend} className="font-normal">
            {busy ? "Sending…" : "Resend the link"}
          </TextLink>
        </Countdown>
      </p>
    </div>
  );
}

48:T16b4,"use client"; import { Check, KeyRound, LockKeyhole, Mail, MailCheck } from "lucide-react"; import { useState, type FormEvent } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Input } from "@/components/scalar-ui/input"; import { PasswordInput, type PasswordRequirement } from "@/components/scalar-ui/password-input"; import { AuthField, AuthHeader, BackButton, Countdown, ScreenTransition, SubmitButton, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui"; import { isEmail, sendEmail, wait } from "@/components/scalar-ui/auth/data"; const RULES: PasswordRequirement[] = [ { label: "At least 10 characters", test: (v) => v.length >= 10 }, { label: "A number or a symbol", test: (v) => /[\d\W]/.test(v) }, ]; /** * Ask for a reset link. The sent screen says the same thing whether or not the account exists, so the form can't be * used to find out who has an account. */ export function ForgotPassword({ defaultEmail = "", onBack }: { defaultEmail?: string; onBack: () => void }) { const [email, setEmail] = useState(defaultEmail); const [error, setError] = useState(null); const [busy, setBusy] = useState(false); const [sent, setSent] = useState(false); const [left, restart] = useCountdown(30, false); const submit = async (e: FormEvent) => { e.preventDefault(); if (!isEmail(email)) return setError("Enter an email like name@company.com"); setBusy(true); await sendEmail(email); setBusy(false); setSent(true); restart(); }; return ( Back to log in {sent ? ( <> } title="Check your email" description={<>If there's an account for {email}, we've sent a link to reset the password. It expires in 30 minutes.} />

No email?{" "} (sendEmail(email), restart())} className="font-normal"> Send it again

) : ( <> } title="Reset your password" description="Enter the email you use for Northwind and we'll send you a link." /> )} ); } /** The page the reset link opens: a new password with rules and a confirm field, then a way back in. */ export function ResetPassword({ email, onDone, onSavePasskey }: { email: string; onDone: () => void; onSavePasskey?: () => void }) { const [password, setPassword] = useState(""); const [confirm, setConfirm] = useState(""); const [errors, setErrors] = useState<{ password?: string; confirm?: string }>({}); const [busy, setBusy] = useState(false); const [done, setDone] = useState(false); const submit = async (e: FormEvent) => { e.preventDefault(); const next: typeof errors = {}; if (!RULES.every((r) => r.test(password))) next.password = "Your new password needs to meet both rules."; if (confirm !== password) next.confirm = "The passwords don't match."; setErrors(next); if (next.password || next.confirm) return; setBusy(true); await wait(900); setBusy(false); setDone(true); }; return ( {done ? ( <> } title="Password updated" description="We signed you out everywhere else, just in case. Log in with your new password." />

{onSavePasskey && ( )}

) : ( <> } title="Choose a new password" description={<>For {email}} /> )} ); } 49:T10256,

"use client";

import { Check, KeyRound, LockKeyhole, Mail, MailCheck } from "lucide-react";
import { useState, type FormEvent } from "react";
import { Button } from "@/components/scalar-ui/button";
import { Input } from "@/components/scalar-ui/input";
import { PasswordInput, type PasswordRequirement } from "@/components/scalar-ui/password-input";
import { AuthField, AuthHeader, BackButton, Countdown, ScreenTransition, SubmitButton, TextLink, useCountdown } from "@/components/scalar-ui/auth/auth-ui";
import { isEmail, sendEmail, wait } from "@/components/scalar-ui/auth/data";

const RULES: PasswordRequirement[] = [
  { label: "At least 10 characters", test: (v) => v.length >= 10 },
  { label: "A number or a symbol", test: (v) => /[\d\W]/.test(v) },
];

/**
 * Ask for a reset link. The sent screen says the same thing whether or not the account exists, so the form can't be
 * used to find out who has an account.
 */
export function ForgotPassword({ defaultEmail = "", onBack }: { defaultEmail?: string; onBack: () => void }) {
  const [email, setEmail] = useState(defaultEmail);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [sent, setSent] = useState(false);
  const [left, restart] = useCountdown(30, false);
  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!isEmail(email)) return setError("Enter an email like name@company.com");
    setBusy(true);
    await sendEmail(email);
    setBusy(false);
    setSent(true);
    restart();
  };
  return (
    <ScreenTransition id={sent ? "sent" : "form"}>
      <BackButton onClick={onBack}>Back to log in</BackButton>
      {sent ? (
        <>
          <AuthHeader icon={<MailCheck />} title="Check your email" description={<>If there's an account for <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b>, we've sent a link to reset the password. It expires in 30 minutes.</>} />
          <p className="text-center text-[12.5px] text-neutral-500">
            No email?{" "}
            <Countdown seconds={left}>
              <TextLink onClick={() => (sendEmail(email), restart())} className="font-normal">
                Send it again
              </TextLink>
            </Countdown>
          </p>
        </>
      ) : (
        <>
          <AuthHeader icon={<KeyRound />} title="Reset your password" description="Enter the email you use for Northwind and we'll send you a link." />
          <form onSubmit={submit} noValidate className="flex flex-col gap-4">
            <AuthField label="Email" error={error}>
              {(field) => <Input {...field} type="email" autoComplete="email" autoFocus placeholder="name@company.com" value={email} invalid={!!error} onChange={(e) => (setEmail(e.target.value), setError(null))} leading={<Mail />} />}
            </AuthField>
            <SubmitButton loading={busy}>Send reset link</SubmitButton>
          </form>
        </>
      )}
    </ScreenTransition>
  );
}

/** The page the reset link opens: a new password with rules and a confirm field, then a way back in. */
export function ResetPassword({ email, onDone, onSavePasskey }: { email: string; onDone: () => void; onSavePasskey?: () => void }) {
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [errors, setErrors] = useState<{ password?: string; confirm?: string }>({});
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(false);
  const submit = async (e: FormEvent) => {
    e.preventDefault();
    const next: typeof errors = {};
    if (!RULES.every((r) => r.test(password))) next.password = "Your new password needs to meet both rules.";
    if (confirm !== password) next.confirm = "The passwords don't match.";
    setErrors(next);
    if (next.password || next.confirm) return;
    setBusy(true);
    await wait(900);
    setBusy(false);
    setDone(true);
  };
  return (
    <ScreenTransition id={done ? "done" : "form"}>
      {done ? (
        <>
          <AuthHeader icon={<Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} />} title="Password updated" description="We signed you out everywhere else, just in case. Log in with your new password." />
          <div className="flex flex-col gap-2">
            <Button onClick={onDone} className="w-full">
              Log in
            </Button>
            {onSavePasskey && (
              <Button variant="ghost" onClick={onSavePasskey} className="w-full">
                <KeyRound />
                Skip passwords next time: save a passkey
              </Button>
            )}
          </div>
        </>
      ) : (
        <>
          <AuthHeader icon={<LockKeyhole />} title="Choose a new password" description={<>For <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b></>} />
          <form onSubmit={submit} noValidate className="flex flex-col gap-4">
            <input type="email" autoComplete="username" value={email} readOnly hidden />
            <AuthField label="New password" error={errors.password}>
              {(field) => <PasswordInput {...field} autoComplete="new-password" autoFocus value={password} invalid={!!errors.password} onChange={(e) => setPassword(e.target.value)} requirements={RULES} />}
            </AuthField>
            <AuthField label="Confirm password" error={errors.confirm}>
              {(field) => <PasswordInput {...field} autoComplete="new-password" value={confirm} invalid={!!errors.confirm} onChange={(e) => (setConfirm(e.target.value), setErrors((x) => ({ ...x, confirm: undefined })))} />}
            </AuthField>
            <SubmitButton loading={busy}>Update password</SubmitButton>
          </form>
        </>
      )}
    </ScreenTransition>
  );
}

4a:T1265,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Building2, Loader2, ShieldCheck } from "lucide-react"; import { useState, type FormEvent } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Input } from "@/components/scalar-ui/input"; import { AuthField, AuthHeader, BackButton, ScreenTransition, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui"; import { identify, isEmail, startSso, type Org } from "@/components/scalar-ui/auth/data"; export interface SsoSignInProps { defaultEmail?: string; /** Skip the email step when the organisation is already known. */ org?: Org; onSignedIn: (who: { email: string; name: string }) => void; onBack: () => void; } /** Work email, then the organisation's identity provider. Says so plainly when passwords are turned off. */ export function SsoSignIn({ defaultEmail = "", org: knownOrg, onSignedIn, onBack }: SsoSignInProps) { const [email, setEmail] = useState(defaultEmail); const [org, setOrg] = useState(knownOrg ?? null); const [error, setError] = useState(null); const [busy, setBusy] = useState(false); const [redirecting, setRedirecting] = useState(false); const find = async (e: FormEvent) => { e.preventDefault(); if (!isEmail(email)) return setError("Enter your work email, like name@company.com"); setBusy(true); const who = await identify(email); setBusy(false); if (who.kind === "sso") setOrg(who.org); else setError(`${email.split("@")[1]} doesn't use single sign-on. Log in with your password instead.`); }; const go = async () => { if (!org) return; setRedirecting(true); onSignedIn(await startSso(org)); }; return ( (setOrg(null), setRedirecting(false)) : onBack} /> {org ? ( <> Sign in through {org.name}'s {org.provider} account.} />

{org.name[0]} {org.name} @{org.domain} · {org.provider}

{org.enforced &&

{org.name} requires single sign-on, so passwords are turned off for @{org.domain} accounts.

}

Trouble signing in? Ask your IT team, or contact us.

) : ( <> } title="Log in with SSO" description="Enter your work email and we'll find your organisation." /> )} ); } 4b:Tba88,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Building2, Loader2, ShieldCheck } from "lucide-react";
import { useState, type FormEvent } from "react";
import { Button } from "@/components/scalar-ui/button";
import { Input } from "@/components/scalar-ui/input";
import { AuthField, AuthHeader, BackButton, ScreenTransition, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui";
import { identify, isEmail, startSso, type Org } from "@/components/scalar-ui/auth/data";

export interface SsoSignInProps {
  defaultEmail?: string;
  /** Skip the email step when the organisation is already known. */
  org?: Org;
  onSignedIn: (who: { email: string; name: string }) => void;
  onBack: () => void;
}

/** Work email, then the organisation's identity provider. Says so plainly when passwords are turned off. */
export function SsoSignIn({ defaultEmail = "", org: knownOrg, onSignedIn, onBack }: SsoSignInProps) {
  const [email, setEmail] = useState(defaultEmail);
  const [org, setOrg] = useState<Org | null>(knownOrg ?? null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [redirecting, setRedirecting] = useState(false);

  const find = async (e: FormEvent) => {
    e.preventDefault();
    if (!isEmail(email)) return setError("Enter your work email, like name@company.com");
    setBusy(true);
    const who = await identify(email);
    setBusy(false);
    if (who.kind === "sso") setOrg(who.org);
    else setError(`${email.split("@")[1]} doesn't use single sign-on. Log in with your password instead.`);
  };
  const go = async () => {
    if (!org) return;
    setRedirecting(true);
    onSignedIn(await startSso(org));
  };

  return (
    <ScreenTransition id={org ? "org" : "email"}>
      <BackButton onClick={org && !knownOrg ? () => (setOrg(null), setRedirecting(false)) : onBack} />
      {org ? (
        <>
          <AuthHeader title="Single sign-on" description={<>Sign in through {org.name}'s {org.provider} account.</>} />
          <div className="mb-5 flex items-center gap-3 rounded-[16px] bg-neutral-50 p-3.5 ring-1 ring-black/[0.05] dark:bg-white/[0.03] dark:ring-white/[0.07]">
            <span className="flex size-10 items-center justify-center rounded-[11px] bg-white text-[15px] font-semibold text-neutral-900 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] dark:bg-white/[0.08] dark:text-white dark:ring-white/[0.1]">{org.name[0]}</span>
            <span className="min-w-0 flex-1">
              <span className="block text-[13.5px] font-medium text-neutral-950 dark:text-white">{org.name}</span>
              <span className="block truncate text-[12px] text-neutral-500">
                @{org.domain} · {org.provider}
              </span>
            </span>
            <ShieldCheck className="size-4 text-emerald-600 dark:text-emerald-400" />
          </div>
          {org.enforced && <p className="mb-5 rounded-[12px] bg-amber-50 px-3 py-2.5 text-[12.5px] leading-5 text-amber-900 ring-1 ring-amber-500/20 dark:bg-amber-500/10 dark:text-amber-100 dark:ring-amber-400/20">{org.name} requires single sign-on, so passwords are turned off for @{org.domain} accounts.</p>}
          <Button onClick={go} disabled={redirecting} className="w-full disabled:opacity-100">
            <AnimatePresence mode="popLayout" initial={false}>
              <motion.span key={redirecting ? "r" : "c"} initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} className="flex items-center gap-2">
                {redirecting && <Loader2 className="animate-spin" />}
                {redirecting ? `Taking you to ${org.provider}…` : `Continue with ${org.provider}`}
              </motion.span>
            </AnimatePresence>
          </Button>
          <p className="mt-5 text-center text-[12.5px] text-neutral-500">
            Trouble signing in? Ask your IT team, or <TextLink className="font-normal">contact us</TextLink>.
          </p>
        </>
      ) : (
        <>
          <AuthHeader icon={<Building2 />} title="Log in with SSO" description="Enter your work email and we'll find your organisation." />
          <form onSubmit={find} noValidate className="flex flex-col gap-4">
            <AuthField label="Work email" error={error}>
              {(field) => <Input {...field} type="email" autoComplete="email" autoFocus placeholder="name@company.com" value={email} invalid={!!error} onChange={(e) => (setEmail(e.target.value), setError(null))} />}
            </AuthField>
            <SubmitButton loading={busy}>Continue</SubmitButton>
          </form>
        </>
      )}
    </ScreenTransition>
  );
}

4c:T1395,"use client"; import { motion } from "motion/react"; import { ChevronRight, Loader2, Plus } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader, TextLink } from "@/components/scalar-ui/auth/auth-ui"; import { wait, type Invite, type Workspace } from "@/components/scalar-ui/auth/data"; import { cn } from "@/lib/utils"; function Tile({ name, tint, size = 36 }: { name: string; tint: string; size?: number }) { return ( {name[0]} ); } export interface WorkspacePickerProps { email: string; workspaces: Workspace[]; invites?: Invite[]; onOpen: (workspace: Workspace) => void; onCreate: () => void; onJoin?: (invite: Invite) => void; onSwitchAccount?: () => void; } /** After login, for people in more than one workspace: pick one, accept a pending invite, or start a new one. */ export function WorkspacePicker({ email, workspaces, invites = [], onOpen, onCreate, onJoin, onSwitchAccount }: WorkspacePickerProps) { const [opening, setOpening] = useState(null); const [pending, setPending] = useState(invites); const open = async (w: Workspace) => { setOpening(w.id); await wait(700); onOpen(w); }; return (

Signed in as {email} {onSwitchAccount && ( <> {" · "} Switch account )} } />

{pending.length > 0 && ( <>

Invitations

{inv.workspace} From {inv.from} · as {inv.role}

)}

); } 4d:Tbcea,

"use client";

import { motion } from "motion/react";
import { ChevronRight, Loader2, Plus } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader, TextLink } from "@/components/scalar-ui/auth/auth-ui";
import { wait, type Invite, type Workspace } from "@/components/scalar-ui/auth/data";
import { cn } from "@/lib/utils";

function Tile({ name, tint, size = 36 }: { name: string; tint: string; size?: number }) {
  return (
    <span className={cn("flex shrink-0 items-center justify-center rounded-[10px] font-semibold", tint)} style={{ width: size, height: size, fontSize: size * 0.4 }}>
      {name[0]}
    </span>
  );
}

export interface WorkspacePickerProps {
  email: string;
  workspaces: Workspace[];
  invites?: Invite[];
  onOpen: (workspace: Workspace) => void;
  onCreate: () => void;
  onJoin?: (invite: Invite) => void;
  onSwitchAccount?: () => void;
}

/** After login, for people in more than one workspace: pick one, accept a pending invite, or start a new one. */
export function WorkspacePicker({ email, workspaces, invites = [], onOpen, onCreate, onJoin, onSwitchAccount }: WorkspacePickerProps) {
  const [opening, setOpening] = useState<string | null>(null);
  const [pending, setPending] = useState(invites);
  const open = async (w: Workspace) => {
    setOpening(w.id);
    await wait(700);
    onOpen(w);
  };
  return (
    <div>
      <AuthHeader
        title="Choose a workspace"
        description={
          <>
            Signed in as <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b>
            {onSwitchAccount && (
              <>
                {" · "}
                <TextLink onClick={onSwitchAccount} className="font-normal">
                  Switch account
                </TextLink>
              </>
            )}
          </>
        }
      />
      <ul className="-mx-2 flex flex-col">
        {workspaces.map((w, i) => (
          <motion.li key={w.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.05, type: "spring", bounce: 0, duration: 0.4 }}>
            <button type="button" disabled={!!opening} onClick={() => open(w)} className="group flex w-full items-center gap-3 rounded-[14px] px-2 py-2 text-left outline-none transition-colors hover:bg-neutral-950/[0.04] focus-visible:bg-neutral-950/[0.05] disabled:cursor-default dark:hover:bg-white/[0.05] dark:focus-visible:bg-white/[0.06]">
              <Tile name={w.name} tint={w.tint} />
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[13.5px] font-medium text-neutral-950 dark:text-white">{w.name}</span>
                <span className="block text-[12px] text-neutral-500">
                  {w.role} · {w.members} members · {w.plan}
                </span>
              </span>
              {opening === w.id ? <Loader2 className="size-4 animate-spin text-neutral-400" /> : <ChevronRight className="size-4 text-neutral-300 transition-transform group-hover:translate-x-0.5 group-hover:text-neutral-500 dark:text-neutral-600" />}
            </button>
          </motion.li>
        ))}
      </ul>
      {pending.length > 0 && (
        <>
          <p className="mb-2 mt-5 text-[12px] font-medium text-neutral-400">Invitations</p>
          <ul className="flex flex-col gap-2">
            {pending.map((inv) => (
              <li key={inv.workspace} className="flex items-center gap-3 rounded-[14px] p-2.5 ring-1 ring-black/[0.07] dark:ring-white/[0.08]">
                <Tile name={inv.workspace} tint={inv.tint} size={32} />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] font-medium text-neutral-950 dark:text-white">{inv.workspace}</span>
                  <span className="block truncate text-[12px] text-neutral-500">From {inv.from} · as {inv.role}</span>
                </span>
                <Button size="sm" variant="ghost" onClick={() => setPending((p) => p.filter((x) => x !== inv))}>
                  Decline
                </Button>
                <Button size="sm" onClick={() => onJoin?.(inv)}>
                  Join
                </Button>
              </li>
            ))}
          </ul>
        </>
      )}
      <button type="button" onClick={onCreate} className="mt-4 flex w-full items-center gap-3 rounded-[14px] border-[1.5px] border-dashed border-black/[0.1] px-2.5 py-2.5 text-left text-[13px] font-medium text-neutral-600 outline-none transition-colors hover:border-black/[0.2] hover:text-neutral-900 focus-visible:border-black/[0.25] dark:border-white/[0.12] dark:text-neutral-400 dark:hover:border-white/[0.22] dark:hover:text-white">
        <span className="flex size-8 items-center justify-center rounded-[9px] bg-neutral-950/[0.04] dark:bg-white/[0.06]">
          <Plus className="size-4" />
        </span>
        Create a new workspace
      </button>
    </div>
  );
}

4e:T11c8,"use client"; import { Clock } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader, ScreenTransition, TextLink } from "@/components/scalar-ui/auth/auth-ui"; import { wait, type Account, type Invite } from "@/components/scalar-ui/auth/data"; import { cn } from "@/lib/utils"; export interface AcceptInviteProps { invite: Invite; /** Who is signed in, or null to offer log in and sign up. */ account: Pick | null; expired?: boolean; onJoined: () => void; onDecline?: () => void; onLogIn?: () => void; onSignUp?: () => void; onSwitchAccount?: () => void; } /** The page an invite link opens: who invited you and to what, then join, decline, or sign in first. */ export function AcceptInvite({ invite, account, expired = false, onJoined, onDecline, onLogIn, onSignUp, onSwitchAccount }: AcceptInviteProps) { const [state, setState] = useState<"idle" | "joining" | "joined">("idle"); const join = async () => { setState("joining"); await wait(900); setState("joined"); }; const crest = (

{invite.from .split(" ") .map((p) => p[0]) .join("")} {invite.workspace[0]}

); if (expired) return (

{crest} Invites to {invite.workspace} last 7 days. Ask {invite.from.split(" ")[0]} to send a new one.} />

); return (

{crest} {state === "joined" ? ( <> ) : ( <> Join {invite.workspace}} description={<>{invite.from} invited you to join as {invite.role}. {invite.members} people are already there.} /> {account ? ( <>

{onDecline && ( )}

Joining as {account.email} {onSwitchAccount && ( <> {" · "} Not you? )}

) : (

)}

Expires {invite.expires}

)}

); } 4f:Tb986,

"use client";

import { Clock } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader, ScreenTransition, TextLink } from "@/components/scalar-ui/auth/auth-ui";
import { wait, type Account, type Invite } from "@/components/scalar-ui/auth/data";
import { cn } from "@/lib/utils";

export interface AcceptInviteProps {
  invite: Invite;
  /** Who is signed in, or null to offer log in and sign up. */
  account: Pick<Account, "email" | "name"> | null;
  expired?: boolean;
  onJoined: () => void;
  onDecline?: () => void;
  onLogIn?: () => void;
  onSignUp?: () => void;
  onSwitchAccount?: () => void;
}

/** The page an invite link opens: who invited you and to what, then join, decline, or sign in first. */
export function AcceptInvite({ invite, account, expired = false, onJoined, onDecline, onLogIn, onSignUp, onSwitchAccount }: AcceptInviteProps) {
  const [state, setState] = useState<"idle" | "joining" | "joined">("idle");
  const join = async () => {
    setState("joining");
    await wait(900);
    setState("joined");
  };
  const crest = (
    <div className="mb-5 flex items-center justify-center">
      <span className="flex size-12 items-center justify-center rounded-full bg-violet-500/15 text-[15px] font-semibold text-violet-700 ring-4 ring-white dark:text-violet-300 dark:ring-neutral-900">
        {invite.from
          .split(" ")
          .map((p) => p[0])
          .join("")}
      </span>
      <span className={cn("-ml-3 flex size-12 items-center justify-center rounded-[14px] text-[18px] font-semibold ring-4 ring-white dark:ring-neutral-900", invite.tint)}>{invite.workspace[0]}</span>
    </div>
  );

  if (expired)
    return (
      <div className="text-center">
        {crest}
        <AuthHeader align="center" title="This invite has expired" description={<>Invites to {invite.workspace} last 7 days. Ask {invite.from.split(" ")[0]} to send a new one.</>} />
        <Button variant="outline" asChild className="w-full">
          <a href={`mailto:${invite.fromEmail}`}>Email {invite.from.split(" ")[0]}</a>
        </Button>
      </div>
    );

  return (
    <ScreenTransition id={state === "joined" ? "joined" : "invite"}>
      <div className="text-center">
        {crest}
        {state === "joined" ? (
          <>
            <AuthHeader align="center" title={`You're in ${invite.workspace}`} description={`You joined as ${invite.role}. ${invite.from.split(" ")[0]} will see you've accepted.`} />
            <Button onClick={onJoined} className="w-full">
              Open {invite.workspace}
            </Button>
          </>
        ) : (
          <>
            <AuthHeader align="center" title={<>Join {invite.workspace}</>} description={<>{invite.from} invited you to join as {invite.role}. {invite.members} people are already there.</>} />
            {account ? (
              <>
                <div className="flex flex-col gap-2">
                  <Button onClick={join} disabled={state === "joining"} className="w-full">
                    {state === "joining" ? "Joining…" : "Accept invite"}
                  </Button>
                  {onDecline && (
                    <Button variant="ghost" onClick={onDecline} className="w-full">
                      Decline
                    </Button>
                  )}
                </div>
                <p className="mt-5 text-[12.5px] text-neutral-500">
                  Joining as <b className="font-medium text-neutral-700 dark:text-neutral-300">{account.email}</b>
                  {onSwitchAccount && (
                    <>
                      {" · "}
                      <TextLink onClick={onSwitchAccount} className="font-normal">
                        Not you?
                      </TextLink>
                    </>
                  )}
                </p>
              </>
            ) : (
              <div className="flex flex-col gap-2">
                <Button onClick={onSignUp} className="w-full">
                  Create an account
                </Button>
                <Button variant="outline" onClick={onLogIn} className="w-full">
                  I already have an account
                </Button>
              </div>
            )}
            <p className="mt-4 flex items-center justify-center gap-1.5 text-[12px] text-neutral-400">
              <Clock className="size-3" />
              Expires {invite.expires}
            </p>
          </>
        )}
      </div>
    </ScreenTransition>
  );
}

50:T10b2,"use client"; import { KeyRound, LockKeyhole } from "lucide-react"; import { useCallback, useRef, useState, type FormEvent } from "react"; import { Button } from "@/components/scalar-ui/button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/scalar-ui/dialog"; import { PasswordInput } from "@/components/scalar-ui/password-input"; import { AuthField, FormError, SubmitButton } from "@/components/scalar-ui/auth/auth-ui"; import { ACCOUNTS, signInWithPasskey, wait } from "@/components/scalar-ui/auth/data"; export interface ConfirmIdentityDialogProps { open: boolean; onOpenChange: (open: boolean) => void; /** What happens next, e.g. "turn off two-step verification". */ action: string; onConfirmed: () => void; /** Minutes before asking again, shown in the note. */ minutes?: number; } /** "Confirm it's you": a password or passkey check before a sensitive change. */ export function ConfirmIdentityDialog({ open, onOpenChange, action, onConfirmed, minutes = 10 }: ConfirmIdentityDialogProps) { const [password, setPassword] = useState(""); const [error, setError] = useState(null); const [busy, setBusy] = useState<"password" | "passkey" | null>(null); const done = () => { setPassword(""); setError(null); onOpenChange(false); onConfirmed(); }; const submit = async (e: FormEvent) => { e.preventDefault(); setBusy("password"); await wait(700); setBusy(null); if (password === ACCOUNTS[0].password) done(); else setError("That password isn't right."); }; const passkey = async () => { setBusy("passkey"); await signInWithPasskey(); setBusy(null); done(); }; return ( ); } /** * Wraps sensitive actions: the first one asks "Confirm it's you", and for the next few minutes they run straight * away. Render `dialog` once and call `guard(fn, "delete this workspace")`. */ export function useConfirmIdentity(minutes = 10) { const [open, setOpen] = useState(false); const [action, setAction] = useState(""); const until = useRef(0); const next = useRef<(() => void) | null>(null); const guard = useCallback((fn: () => void, what: string) => { if (Date.now() < until.current) return fn(); next.current = fn; setAction(what); setOpen(true); }, []); const dialog = ( { until.current = Date.now() + minutes * 60_000; next.current?.(); next.current = null; }} /> ); return { guard, dialog, unlocked: () => Date.now() < until.current }; } 51:Tb7b8,

"use client";

import { KeyRound, LockKeyhole } from "lucide-react";
import { useCallback, useRef, useState, type FormEvent } from "react";
import { Button } from "@/components/scalar-ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/scalar-ui/dialog";
import { PasswordInput } from "@/components/scalar-ui/password-input";
import { AuthField, FormError, SubmitButton } from "@/components/scalar-ui/auth/auth-ui";
import { ACCOUNTS, signInWithPasskey, wait } from "@/components/scalar-ui/auth/data";

export interface ConfirmIdentityDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** What happens next, e.g. "turn off two-step verification". */
  action: string;
  onConfirmed: () => void;
  /** Minutes before asking again, shown in the note. */
  minutes?: number;
}

/** "Confirm it's you": a password or passkey check before a sensitive change. */
export function ConfirmIdentityDialog({ open, onOpenChange, action, onConfirmed, minutes = 10 }: ConfirmIdentityDialogProps) {
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<"password" | "passkey" | null>(null);
  const done = () => {
    setPassword("");
    setError(null);
    onOpenChange(false);
    onConfirmed();
  };
  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setBusy("password");
    await wait(700);
    setBusy(null);
    if (password === ACCOUNTS[0].password) done();
    else setError("That password isn't right.");
  };
  const passkey = async () => {
    setBusy("passkey");
    await signInWithPasskey();
    setBusy(null);
    done();
  };
  return (
    <Dialog open={open} onOpenChange={(o) => (onOpenChange(o), !o && (setPassword(""), setError(null)))}>
      <DialogContent className="max-w-[400px]">
        <DialogHeader>
          <span className="mb-2 flex size-10 items-center justify-center rounded-[12px] bg-neutral-950/[0.05] text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200">
            <LockKeyhole className="size-[18px]" />
          </span>
          <DialogTitle>Confirm it's you</DialogTitle>
          <DialogDescription>To {action}, enter your password or use your passkey.</DialogDescription>
        </DialogHeader>
        <form onSubmit={submit} noValidate className="flex flex-col gap-4">
          <FormError>{error}</FormError>
          <input type="email" autoComplete="username" value={ACCOUNTS[0].email} readOnly hidden />
          <AuthField label="Password">{(field) => <PasswordInput {...field} autoComplete="current-password" autoFocus value={password} invalid={!!error} onChange={(e) => (setPassword(e.target.value), setError(null))} />}</AuthField>
          <SubmitButton loading={busy === "password"} disabled={busy === "passkey"}>
            Confirm
          </SubmitButton>
          <Button variant="ghost" onClick={passkey} disabled={!!busy} className="w-full">
            <KeyRound />
            {busy === "passkey" ? "Waiting for your device…" : "Use a passkey"}
          </Button>
        </form>
        <p className="mt-4 text-center text-[12px] text-neutral-400">We won't ask again for {minutes} minutes.</p>
      </DialogContent>
    </Dialog>
  );
}

/**
 * Wraps sensitive actions: the first one asks "Confirm it's you", and for the next few minutes they run straight
 * away. Render `dialog` once and call `guard(fn, "delete this workspace")`.
 */
export function useConfirmIdentity(minutes = 10) {
  const [open, setOpen] = useState(false);
  const [action, setAction] = useState("");
  const until = useRef(0);
  const next = useRef<(() => void) | null>(null);
  const guard = useCallback((fn: () => void, what: string) => {
    if (Date.now() < until.current) return fn();
    next.current = fn;
    setAction(what);
    setOpen(true);
  }, []);
  const dialog = (
    <ConfirmIdentityDialog
      open={open}
      onOpenChange={setOpen}
      action={action}
      minutes={minutes}
      onConfirmed={() => {
        until.current = Date.now() + minutes * 60_000;
        next.current?.();
        next.current = null;
      }}
    />
  );
  return { guard, dialog, unlocked: () => Date.now() < until.current };
}

52:Td1d,"use client"; import { Ban, Clock, Lock, LogOut } from "lucide-react"; import type { ReactNode } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader, useCountdown } from "@/components/scalar-ui/auth/auth-ui"; export type SessionKind = "signed-out" | "expired" | "locked" | "suspended"; function Clockface({ seconds }: { seconds: number }) { const [left] = useCountdown(seconds); return ( {Math.floor(left / 60)}:{String(left % 60).padStart(2, "0")} ); } const COPY: Record = { "signed-out": { icon: , title: "You're signed out" }, expired: { icon: , title: "Your session expired" }, locked: { icon: , title: "Too many attempts" }, suspended: { icon: , title: "This account is suspended" }, }; export interface SessionNoticeProps { kind: SessionKind; email?: string; /** Where people return to after logging in again, e.g. "Q4 launch plan". */ returnTo?: string; onLogIn?: () => void; onReset?: () => void; onSwitchAccount?: () => void; } /** The screens around a session ending: signed out, timed out, locked after failed attempts, or suspended. */ export function SessionNotice({ kind, email = "maya@northwind.co", returnTo, onLogIn, onReset, onSwitchAccount }: SessionNoticeProps) { const { icon, title } = COPY[kind]; const description = kind === "signed-out" ? ( "You've been signed out of Northwind on this device." ) : kind === "expired" ? ( <>For your security we sign you out after 12 hours away.{returnTo && <> Log in again and you'll land back on {returnTo}.} ) : kind === "locked" ? ( <> Sign-in for {email} is paused after 5 wrong passwords. Try again in , or reset your password now. ) : ( <>An admin at Northwind suspended {email} on Oct 2. Your work is kept, but you can't sign in until it's restored. ); return (

{kind === "locked" ? ( <> ) : kind === "suspended" ? ( <> ) : ( <> {onSwitchAccount && ( )} )}

); } 53:T861e,

"use client";

import { Ban, Clock, Lock, LogOut } from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader, useCountdown } from "@/components/scalar-ui/auth/auth-ui";

export type SessionKind = "signed-out" | "expired" | "locked" | "suspended";

function Clockface({ seconds }: { seconds: number }) {
  const [left] = useCountdown(seconds);
  return (
    <span className="tabular-nums">
      {Math.floor(left / 60)}:{String(left % 60).padStart(2, "0")}
    </span>
  );
}

const COPY: Record<SessionKind, { icon: ReactNode; title: string }> = {
  "signed-out": { icon: <LogOut />, title: "You're signed out" },
  expired: { icon: <Clock />, title: "Your session expired" },
  locked: { icon: <Lock />, title: "Too many attempts" },
  suspended: { icon: <Ban />, title: "This account is suspended" },
};

export interface SessionNoticeProps {
  kind: SessionKind;
  email?: string;
  /** Where people return to after logging in again, e.g. "Q4 launch plan". */
  returnTo?: string;
  onLogIn?: () => void;
  onReset?: () => void;
  onSwitchAccount?: () => void;
}

/** The screens around a session ending: signed out, timed out, locked after failed attempts, or suspended. */
export function SessionNotice({ kind, email = "maya@northwind.co", returnTo, onLogIn, onReset, onSwitchAccount }: SessionNoticeProps) {
  const { icon, title } = COPY[kind];
  const description =
    kind === "signed-out" ? (
      "You've been signed out of Northwind on this device."
    ) : kind === "expired" ? (
      <>For your security we sign you out after 12 hours away.{returnTo && <> Log in again and you'll land back on <b className="font-medium text-neutral-800 dark:text-neutral-200">{returnTo}</b>.</>}</>
    ) : kind === "locked" ? (
      <>
        Sign-in for <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b> is paused after 5 wrong passwords. Try again in <Clockface seconds={14 * 60 + 52} />, or reset your password now.
      </>
    ) : (
      <>An admin at Northwind suspended {email} on Oct 2. Your work is kept, but you can't sign in until it's restored.</>
    );
  return (
    <div>
      <AuthHeader icon={icon} title={title} description={description} />
      <div className="flex flex-col gap-2">
        {kind === "locked" ? (
          <>
            <Button onClick={onReset} className="w-full">
              Reset password
            </Button>
            <Button variant="ghost" onClick={onLogIn} className="w-full">
              Back to log in
            </Button>
          </>
        ) : kind === "suspended" ? (
          <>
            <Button variant="outline" asChild className="w-full">
              <a href="mailto:admins@northwind.co">Contact your admin</a>
            </Button>
            <Button variant="ghost" onClick={onSwitchAccount} className="w-full">
              Use another account
            </Button>
          </>
        ) : (
          <>
            <Button onClick={onLogIn} className="w-full">
              Log in again
            </Button>
            {onSwitchAccount && (
              <Button variant="ghost" onClick={onSwitchAccount} className="w-full">
                Use another account
              </Button>
            )}
          </>
        )}
      </div>
    </div>
  );
}

54:T132d,"use client"; import { ArrowLeftRight, Check, Eye, FolderKanban, Pencil, ShieldCheck } from "lucide-react"; import { useState, type ReactNode } from "react"; import { Button } from "@/components/scalar-ui/button"; import { AuthHeader } from "@/components/scalar-ui/auth/auth-ui"; import { WORKSPACES, wait } from "@/components/scalar-ui/auth/data"; import { cn } from "@/lib/utils"; export type Scope = { id: string; label: string; detail: string; icon: ReactNode }; export const SCOPES: Scope[] = [ { id: "read", label: "See your projects and tasks", detail: "Titles, descriptions, due dates and assignees", icon: }, { id: "write", label: "Create and update tasks", detail: "It can't delete anything", icon: }, { id: "projects", label: "List your workspaces", detail: "Names and your role in each", icon: }, ]; /** The "allow access" screen a third-party app sends people to: who's asking, what it can do, which workspace, allow or cancel. */ export function OAuthConsent({ app = "Timekeeper", publisher = "timekeeper.app", scopes = SCOPES, onDone }: { app?: string; publisher?: string; scopes?: Scope[]; onDone?: (allowed: boolean) => void }) { const [workspace, setWorkspace] = useState(WORKSPACES[0].id); const [state, setState] = useState<"ask" | "allowing" | "allowed" | "denied">("ask"); const allow = async () => { setState("allowing"); await wait(900); setState("allowed"); onDone?.(true); }; if (state === "allowed" || state === "denied") return (

: } title={state === "allowed" ? `Connected to ${app}` : "No access given"} description={state === "allowed" ? `Taking you back to ${app}… You can remove it any time in Settings → Integrations.` : `${app} didn't get access to anything.`} />

); return (

{app[0]} N

Published by {publisher}. Only allow apps you trust.} />

It will be able to

{s.icon} {s.label} {s.detail}

In workspace

{WORKSPACES.slice(0, 2).map((w) => ( ))}

Signed in as maya@northwind.co

); } 55:Tbd1c,

"use client";

import { ArrowLeftRight, Check, Eye, FolderKanban, Pencil, ShieldCheck } from "lucide-react";
import { useState, type ReactNode } from "react";
import { Button } from "@/components/scalar-ui/button";
import { AuthHeader } from "@/components/scalar-ui/auth/auth-ui";
import { WORKSPACES, wait } from "@/components/scalar-ui/auth/data";
import { cn } from "@/lib/utils";

export type Scope = { id: string; label: string; detail: string; icon: ReactNode };

export const SCOPES: Scope[] = [
  { id: "read", label: "See your projects and tasks", detail: "Titles, descriptions, due dates and assignees", icon: <Eye /> },
  { id: "write", label: "Create and update tasks", detail: "It can't delete anything", icon: <Pencil /> },
  { id: "projects", label: "List your workspaces", detail: "Names and your role in each", icon: <FolderKanban /> },
];

/** The "allow access" screen a third-party app sends people to: who's asking, what it can do, which workspace, allow or cancel. */
export function OAuthConsent({ app = "Timekeeper", publisher = "timekeeper.app", scopes = SCOPES, onDone }: { app?: string; publisher?: string; scopes?: Scope[]; onDone?: (allowed: boolean) => void }) {
  const [workspace, setWorkspace] = useState(WORKSPACES[0].id);
  const [state, setState] = useState<"ask" | "allowing" | "allowed" | "denied">("ask");
  const allow = async () => {
    setState("allowing");
    await wait(900);
    setState("allowed");
    onDone?.(true);
  };
  if (state === "allowed" || state === "denied")
    return (
      <div className="text-center">
        <AuthHeader align="center" icon={state === "allowed" ? <Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} /> : <ShieldCheck />} title={state === "allowed" ? `Connected to ${app}` : "No access given"} description={state === "allowed" ? `Taking you back to ${app}… You can remove it any time in Settings → Integrations.` : `${app} didn't get access to anything.`} />
        <Button variant="ghost" onClick={() => setState("ask")}>
          Start again
        </Button>
      </div>
    );
  return (
    <div>
      <div className="mb-5 flex items-center justify-center gap-3">
        <span className="flex size-12 items-center justify-center rounded-[14px] bg-violet-500 text-[18px] font-semibold text-white">{app[0]}</span>
        <ArrowLeftRight className="size-4 text-neutral-400" />
        <span className="flex size-12 items-center justify-center rounded-[14px] bg-neutral-950 text-[18px] font-semibold text-white dark:bg-white dark:text-neutral-950">N</span>
      </div>
      <AuthHeader align="center" title={`${app} wants to use your Northwind account`} description={<>Published by {publisher}. Only allow apps you trust.</>} />
      <p className="mb-2 text-[12.5px] font-medium text-neutral-500">It will be able to</p>
      <ul className="mb-5 flex flex-col gap-2.5">
        {scopes.map((s) => (
          <li key={s.id} className="flex gap-3">
            <span className="flex size-7 shrink-0 items-center justify-center rounded-[8px] bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300 [&_svg]:size-3.5">{s.icon}</span>
            <span>
              <span className="block text-[13px] font-medium text-neutral-900 dark:text-white">{s.label}</span>
              <span className="block text-[12px] text-neutral-500">{s.detail}</span>
            </span>
          </li>
        ))}
      </ul>
      <p className="mb-2 text-[12.5px] font-medium text-neutral-500">In workspace</p>
      <div role="radiogroup" aria-label="Workspace" className="mb-6 flex flex-col gap-1.5">
        {WORKSPACES.slice(0, 2).map((w) => (
          <button key={w.id} type="button" role="radio" aria-checked={workspace === w.id} onClick={() => setWorkspace(w.id)} className={cn("flex items-center gap-2.5 rounded-[12px] px-3 py-2 text-left text-[13px] outline-none ring-1 ring-inset transition-colors", workspace === w.id ? "ring-neutral-950/40 dark:ring-white/50" : "ring-black/[0.08] hover:bg-neutral-950/[0.02] dark:ring-white/[0.1]")}>
            <span className={cn("flex size-6 items-center justify-center rounded-[7px] text-[11px] font-semibold", w.tint)}>{w.name[0]}</span>
            <span className="flex-1 font-medium text-neutral-900 dark:text-white">{w.name}</span>
            {workspace === w.id && <Check className="size-4 text-neutral-900 dark:text-white" />}
          </button>
        ))}
      </div>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline" onClick={() => (setState("denied"), onDone?.(false))}>
          Cancel
        </Button>
        <Button onClick={allow} disabled={state === "allowing"}>
          {state === "allowing" ? "Allowing…" : "Allow"}
        </Button>
      </div>
      <p className="mt-4 text-center text-[12px] text-neutral-400">Signed in as maya@northwind.co</p>
    </div>
  );
}

56:Tb1c,"use client"; import { motion } from "motion/react"; import { Check, Mail } from "lucide-react"; import { useState, type FormEvent } from "react"; import { Input } from "@/components/scalar-ui/input"; import { AuthField, AuthHeader, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui"; import { isEmail, wait } from "@/components/scalar-ui/auth/data"; import { CopyField } from "@/components/scalar-ui/copy-field"; /** Sign up for invite-only products: join the list, see your place, and move up by sharing your link. */ export function Waitlist({ onLogIn }: { onLogIn?: () => void }) { const [email, setEmail] = useState(""); const [error, setError] = useState(null); const [busy, setBusy] = useState(false); const [place, setPlace] = useState(null); const submit = async (e: FormEvent) => { e.preventDefault(); if (!isEmail(email)) return setError("Enter an email like name@company.com"); setBusy(true); await wait(800); setBusy(false); setPlace(1284); }; if (place) return (

} title="You're on the list" description={<>We'll email {email} when it's your turn.} />

Your place

#{place.toLocaleString()}

Each friend who joins moves you up 100 places.

); return (

Got an invite? Log in

); } 57:T7684,

"use client";

import { motion } from "motion/react";
import { Check, Mail } from "lucide-react";
import { useState, type FormEvent } from "react";
import { Input } from "@/components/scalar-ui/input";
import { AuthField, AuthHeader, SubmitButton, TextLink } from "@/components/scalar-ui/auth/auth-ui";
import { isEmail, wait } from "@/components/scalar-ui/auth/data";
import { CopyField } from "@/components/scalar-ui/copy-field";

/** Sign up for invite-only products: join the list, see your place, and move up by sharing your link. */
export function Waitlist({ onLogIn }: { onLogIn?: () => void }) {
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [place, setPlace] = useState<number | null>(null);
  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (!isEmail(email)) return setError("Enter an email like name@company.com");
    setBusy(true);
    await wait(800);
    setBusy(false);
    setPlace(1284);
  };
  if (place)
    return (
      <div>
        <AuthHeader icon={<Check className="text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} />} title="You're on the list" description={<>We'll email <b className="font-medium text-neutral-800 dark:text-neutral-200">{email}</b> when it's your turn.</>} />
        <div className="mb-5 rounded-[16px] bg-neutral-50 p-4 text-center ring-1 ring-black/[0.05] dark:bg-white/[0.03] dark:ring-white/[0.07]">
          <p className="text-[12px] text-neutral-500">Your place</p>
          <motion.p initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="text-[34px] font-semibold tabular-nums tracking-[-0.03em] text-neutral-950 dark:text-white">
            #{place.toLocaleString()}
          </motion.p>
          <p className="text-[12px] text-neutral-500">Each friend who joins moves you up 100 places.</p>
        </div>
        <CopyField size="sm" label="Your invite link" value="https://northwind.app/w/maya-8f2c" buttonLabel="Copy" />
      </div>
    );
  return (
    <div>
      <AuthHeader title="Join the waitlist" description="Northwind is invite-only while we grow. We let people in every week." />
      <form onSubmit={submit} noValidate className="flex flex-col gap-4">
        <AuthField label="Work email" error={error}>
          {(field) => <Input {...field} type="email" autoComplete="email" autoFocus placeholder="name@company.com" value={email} invalid={!!error} onChange={(e) => (setEmail(e.target.value), setError(null))} leading={<Mail />} />}
        </AuthField>
        <SubmitButton loading={busy}>Join the waitlist</SubmitButton>
      </form>
      <p className="mt-6 text-center text-[13px] text-neutral-500">
        Got an invite? <TextLink onClick={onLogIn}>Log in</TextLink>
      </p>
    </div>
  );
}

58:T989,"use client"; import { ChevronDown, FlaskConical } from "lucide-react"; import { useState } from "react"; import { AUTH_SCREENS, AuthFlow, type AuthScreen } from "@/components/scalar-ui/auth"; export default function Demo() { const [screen, setScreen] = useState("login"); const [open, setOpen] = useState(true); return (

{open && (

maya@northwind.co · harbour-light (two-step on)

jon@studio.dev · orchard-42

anyone@acme.com goes to SSO · codes are 123456

Jump to

)}

); } 59:T5157,

"use client";

import { ChevronDown, FlaskConical } from "lucide-react";
import { useState } from "react";
import { AUTH_SCREENS, AuthFlow, type AuthScreen } from "@/components/scalar-ui/auth";

export default function Demo() {
  const [screen, setScreen] = useState<AuthScreen>("login");
  const [open, setOpen] = useState(true);
  return (
    <div className="relative h-[760px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthFlow layout="split" screen={screen} onScreenChange={setScreen} className="h-full" />
      <div className="absolute right-3 top-3 w-[250px] rounded-[14px] bg-white/90 text-[12px] shadow-[0_8px_24px_-8px_rgb(0_0_0/0.2)] ring-1 ring-black/[0.08] backdrop-blur dark:bg-neutral-900/90 dark:ring-white/[0.1]">
        <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} className="flex w-full items-center gap-2 px-3 py-2 font-medium text-neutral-700 outline-none dark:text-neutral-200">
          <FlaskConical className="size-3.5 text-neutral-400" />
          Try it
          <ChevronDown className={open ? "ml-auto size-3.5 rotate-180 text-neutral-400" : "ml-auto size-3.5 text-neutral-400"} />
        </button>
        {open && (
          <div className="space-y-2 border-t border-black/[0.06] px-3 py-2.5 text-neutral-500 dark:border-white/[0.08]">
            <p>
              <b className="font-medium text-neutral-800 dark:text-neutral-200">maya@northwind.co</b> · harbour-light (two-step on)
            </p>
            <p>
              <b className="font-medium text-neutral-800 dark:text-neutral-200">jon@studio.dev</b> · orchard-42
            </p>
            <p>
              <b className="font-medium text-neutral-800 dark:text-neutral-200">anyone@acme.com</b> goes to SSO · codes are 123456
            </p>
            <label className="flex items-center gap-2 pt-1">
              Jump to
              <select value={screen} onChange={(e) => setScreen(e.target.value as AuthScreen)} className="h-7 flex-1 rounded-[8px] bg-neutral-950/[0.04] px-1.5 text-[12px] text-neutral-800 outline-none dark:bg-white/[0.08] dark:text-neutral-200">
                {AUTH_SCREENS.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.label}
                  </option>
                ))}
              </select>
            </label>
          </div>
        )}
      </div>
    </div>
  );
}

5a:T1922,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { LoginForm } from "@/components/scalar-ui/auth/login";

export default function Example() {
  const noop = () => {};
  return (
    <div className="h-[700px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full">
        <LoginForm onSignedIn={noop} onTwoFactor={noop} onSso={noop} onSignUp={noop} onForgot={noop} onMagicLink={noop} />
      </AuthLayout>
    </div>
  );
}

5b:T24c1,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { CheckEmail } from "@/components/scalar-ui/auth/check-email";
import { SignUpForm } from "@/components/scalar-ui/auth/sign-up";
import { useState } from "react";

export default function Example() {
  const [email, setEmail] = useState<string | null>(null);
  return (
    <div className="h-[800px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full">
        {email ? <CheckEmail email={email} mode="code" allowSwitch={false} onVerified={() => setEmail(null)} onChangeEmail={() => setEmail(null)} /> : <SignUpForm onCreated={setEmail} onLogIn={() => {}} />}
      </AuthLayout>
    </div>
  );
}

5c:T1406,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { SignUpForm } from "@/components/scalar-ui/auth/sign-up";

export default function Example() {
  return (
    <div className="h-[700px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="bleed" className="h-full">
        <SignUpForm variant="two-step" onCreated={() => {}} onLogIn={() => {}} />
      </AuthLayout>
    </div>
  );
}

5d:Tf93,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { Waitlist } from "@/components/scalar-ui/auth/waitlist";

export default function Example() {
  return (
    <div className="h-[680px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <Waitlist />
      </AuthLayout>
    </div>
  );
}

5e:T1e89,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { SavePasskeyPrompt } from "@/components/scalar-ui/auth/passkey";

export default function Example() {
  const [key, setKey] = useState(0);
  return (
    <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <SavePasskeyPrompt key={key} onDone={() => setTimeout(() => setKey((k) => k + 1), 1200)} onSkip={() => setKey((k) => k + 1)} />
      </AuthLayout>
    </div>
  );
}

5f:T1d99,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { CheckEmail } from "@/components/scalar-ui/auth/check-email";

export default function Example() {
  const [key, setKey] = useState(0);
  return (
    <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <CheckEmail key={key} email="maya@northwind.co" mode="code" allowSwitch={false} onVerified={() => setTimeout(() => setKey((k) => k + 1), 1500)} />
      </AuthLayout>
    </div>
  );
}

60:T14ef,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { CheckEmail } from "@/components/scalar-ui/auth/check-email";

export default function Example() {
  return (
    <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <CheckEmail email="maya@northwind.co" mode="link" onVerified={() => {}} onChangeEmail={() => {}} />
      </AuthLayout>
    </div>
  );
}

61:T566,"use client"; import { useState } from "react"; import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui"; import { VerifyEmailStatus, type VerifyState } from "@/components/scalar-ui/auth/verify-email"; const STATES: VerifyState[] = ["pending", "success", "expired"]; export default function Example() { const [state, setState] = useState("pending"); return (

setState("pending")} />

{STATES.map((s) => ( ))}

); } 62:T347e,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { VerifyEmailStatus, type VerifyState } from "@/components/scalar-ui/auth/verify-email";

const STATES: VerifyState[] = ["pending", "success", "expired"];

export default function Example() {
  const [state, setState] = useState<VerifyState>("pending");
  return (
    <div className="relative h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <VerifyEmailStatus key={state} state={state} email="maya@northwind.co" onContinue={() => setState("pending")} />
      </AuthLayout>
      <div role="radiogroup" aria-label="State" className="absolute left-3 top-3 flex gap-0.5 rounded-[10px] bg-white p-0.5 text-[12px] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
        {STATES.map((s) => (
          <button key={s} type="button" role="radio" aria-checked={state === s} onClick={() => setState(s)} className={state === s ? "rounded-[8px] bg-neutral-950 px-2.5 py-1 font-medium capitalize text-white dark:bg-white dark:text-neutral-950" : "rounded-[8px] px-2.5 py-1 capitalize text-neutral-500 hover:text-neutral-900 dark:hover:text-white"}>
            {s}
          </button>
        ))}
      </div>
    </div>
  );
}

63:T598,"use client"; import { useState } from "react"; import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui"; import { ForgotPassword, ResetPassword } from "@/components/scalar-ui/auth/reset-password"; export default function Example() { const [step, setStep] = useState<"forgot" | "reset">("reset"); return (

{step === "forgot" ? setStep("reset")} /> : setStep("forgot")} />}

{(["forgot", "reset"] as const).map((s) => ( ))}

); } 64:T3781,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { ForgotPassword, ResetPassword } from "@/components/scalar-ui/auth/reset-password";

export default function Example() {
  const [step, setStep] = useState<"forgot" | "reset">("reset");
  return (
    <div className="relative h-[640px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        {step === "forgot" ? <ForgotPassword defaultEmail="maya@northwind.co" onBack={() => setStep("reset")} /> : <ResetPassword email="maya@northwind.co" onDone={() => setStep("forgot")} />}
      </AuthLayout>
      <div role="radiogroup" aria-label="Step" className="absolute left-3 top-3 flex gap-0.5 rounded-[10px] bg-white p-0.5 text-[12px] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
        {(["forgot", "reset"] as const).map((s) => (
          <button key={s} type="button" role="radio" aria-checked={step === s} onClick={() => setStep(s)} className={step === s ? "rounded-[8px] bg-neutral-950 px-2.5 py-1 font-medium text-white dark:bg-white dark:text-neutral-950" : "rounded-[8px] px-2.5 py-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-white"}>
            {s === "forgot" ? "Request link" : "New password"}
          </button>
        ))}
      </div>
    </div>
  );
}

65:T1956,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { TwoFactorChallenge } from "@/components/scalar-ui/auth/two-factor";

export default function Example() {
  const [key, setKey] = useState(0);
  return (
    <div className="h-[600px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <TwoFactorChallenge key={key} onVerified={() => setKey((k) => k + 1)} />
      </AuthLayout>
    </div>
  );
}

66:T219f,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { ORGS } from "@/components/scalar-ui/auth/data";
import { SsoSignIn } from "@/components/scalar-ui/auth/sso";

export default function Example() {
  const [key, setKey] = useState(0);
  return (
    <div className="h-[580px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <SsoSignIn key={key} defaultEmail="alex@acme.com" org={ORGS[0]} onSignedIn={() => setKey((k) => k + 1)} onBack={() => setKey((k) => k + 1)} />
      </AuthLayout>
    </div>
  );
}

67:T2479,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { WorkspacePicker } from "@/components/scalar-ui/auth/choose-workspace";
import { INVITE, WORKSPACES } from "@/components/scalar-ui/auth/data";

export default function Example() {
  const [key, setKey] = useState(0);
  return (
    <div className="h-[640px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <WorkspacePicker key={key} email="maya@northwind.co" workspaces={WORKSPACES} invites={[INVITE]} onOpen={() => setKey((k) => k + 1)} onCreate={() => {}} onJoin={() => {}} onSwitchAccount={() => {}} />
      </AuthLayout>
    </div>
  );
}

68:T679,"use client"; import { useState } from "react"; import { AcceptInvite } from "@/components/scalar-ui/auth/accept-invite"; import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui"; import { INVITE } from "@/components/scalar-ui/auth/data"; const STATES = ["Signed in", "Signed out", "Expired"] as const; export default function Example() { const [state, setState] = useState<(typeof STATES)[number]>("Signed in"); const [key, setKey] = useState(0); return (

setKey((k) => k + 1)} onDecline={() => {}} onLogIn={() => {}} onSignUp={() => {}} onSwitchAccount={() => setState("Signed out")} />

{STATES.map((s) => ( ))}

); } 69:T48c5,

"use client";

import { useState } from "react";
import { AcceptInvite } from "@/components/scalar-ui/auth/accept-invite";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { INVITE } from "@/components/scalar-ui/auth/data";

const STATES = ["Signed in", "Signed out", "Expired"] as const;

export default function Example() {
  const [state, setState] = useState<(typeof STATES)[number]>("Signed in");
  const [key, setKey] = useState(0);
  return (
    <div className="relative h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <AcceptInvite key={`${state}-${key}`} invite={INVITE} account={state === "Signed in" ? { email: "maya@northwind.co", name: "Maya Chen" } : null} expired={state === "Expired"} onJoined={() => setKey((k) => k + 1)} onDecline={() => {}} onLogIn={() => {}} onSignUp={() => {}} onSwitchAccount={() => setState("Signed out")} />
      </AuthLayout>
      <div role="radiogroup" aria-label="State" className="absolute left-3 top-3 flex gap-0.5 rounded-[10px] bg-white p-0.5 text-[12px] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
        {STATES.map((s) => (
          <button key={s} type="button" role="radio" aria-checked={state === s} onClick={() => setState(s)} className={state === s ? "rounded-[8px] bg-neutral-950 px-2.5 py-1 font-medium text-white dark:bg-white dark:text-neutral-950" : "rounded-[8px] px-2.5 py-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-white"}>
            {s}
          </button>
        ))}
      </div>
    </div>
  );
}

6a:T67b,"use client"; import { ShieldOff, Trash2 } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/scalar-ui/button"; import { useConfirmIdentity } from "@/components/scalar-ui/auth/confirm-identity"; export default function Example() { const { guard, dialog } = useConfirmIdentity(10); const [log, setLog] = useState([]); const did = (what: string) => setLog((l) => [`${what} at ${new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`, ...l].slice(0, 3)); return (

Sensitive actions

The first one asks for your password (harbour-light) or passkey; the next ones run straight away for 10 minutes.

{log.length > 0 && (

✓ {l}

)} {dialog}

); } 6b:T46a8,

"use client";

import { ShieldOff, Trash2 } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/scalar-ui/button";
import { useConfirmIdentity } from "@/components/scalar-ui/auth/confirm-identity";

export default function Example() {
  const { guard, dialog } = useConfirmIdentity(10);
  const [log, setLog] = useState<string[]>([]);
  const did = (what: string) => setLog((l) => [`${what} at ${new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`, ...l].slice(0, 3));
  return (
    <div className="w-[min(100%,440px)] rounded-[20px] bg-white p-5 ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Sensitive actions</p>
      <p className="mb-4 text-[12.5px] text-neutral-500">The first one asks for your password (harbour-light) or passkey; the next ones run straight away for 10 minutes.</p>
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" size="sm" onClick={() => guard(() => did("Two-step turned off"), "turn off two-step verification")}>
          <ShieldOff />
          Turn off two-step
        </Button>
        <Button variant="destructive" size="sm" onClick={() => guard(() => did("API key revoked"), "revoke this API key")}>
          <Trash2 />
          Revoke API key
        </Button>
      </div>
      {log.length > 0 && (
        <ul className="mt-4 space-y-1 text-[12px] text-neutral-500">
          {log.map((l) => (
            <li key={l}>✓ {l}</li>
          ))}
        </ul>
      )}
      {dialog}
    </div>
  );
}

6c:T60b,"use client"; import { useState } from "react"; import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui"; import { SessionNotice, type SessionKind } from "@/components/scalar-ui/auth/session"; const KINDS: { id: SessionKind; label: string }[] = [ { id: "signed-out", label: "Signed out" }, { id: "expired", label: "Expired" }, { id: "locked", label: "Locked" }, { id: "suspended", label: "Suspended" }, ]; export default function Example() { const [kind, setKind] = useState("expired"); return (

{}} onReset={() => {}} onSwitchAccount={() => {}} />

{KINDS.map((k) => ( ))}

); } 6d:T3de5,

"use client";

import { useState } from "react";
import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { SessionNotice, type SessionKind } from "@/components/scalar-ui/auth/session";

const KINDS: { id: SessionKind; label: string }[] = [
  { id: "signed-out", label: "Signed out" },
  { id: "expired", label: "Expired" },
  { id: "locked", label: "Locked" },
  { id: "suspended", label: "Suspended" },
];

export default function Example() {
  const [kind, setKind] = useState<SessionKind>("expired");
  return (
    <div className="relative h-[520px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <SessionNotice key={kind} kind={kind} returnTo="Q4 launch plan" onLogIn={() => {}} onReset={() => {}} onSwitchAccount={() => {}} />
      </AuthLayout>
      <div role="radiogroup" aria-label="Kind" className="absolute left-3 top-3 flex flex-wrap gap-0.5 rounded-[10px] bg-white p-0.5 text-[12px] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
        {KINDS.map((k) => (
          <button key={k.id} type="button" role="radio" aria-checked={kind === k.id} onClick={() => setKind(k.id)} className={kind === k.id ? "rounded-[8px] bg-neutral-950 px-2.5 py-1 font-medium text-white dark:bg-white dark:text-neutral-950" : "rounded-[8px] px-2.5 py-1 text-neutral-500 hover:text-neutral-900 dark:hover:text-white"}>
            {k.label}
          </button>
        ))}
      </div>
    </div>
  );
}

6e:Tfa0,

"use client";

import { AuthLayout } from "@/components/scalar-ui/auth/auth-ui";
import { OAuthConsent } from "@/components/scalar-ui/auth/oauth-consent";

export default function Example() {
  return (
    <div className="h-[680px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <AuthLayout layout="centered" className="h-full min-h-0">
        <OAuthConsent />
      </AuthLayout>
    </div>
  );
}

29:["$","section","auth",{"id":"auth","aria-labelledby":"auth-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"auth-title","className":"sr-only","children":"Auth"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L34",null,{"children":["$","$L35",null,{"slug":"auth","gated":{"unlocked":true,"files":[{"name":"auth.tsx","code":"$36","html":"$37"},{"name":"auth/data.ts","code":"$38","html":"$39"},{"name":"auth/auth-ui.tsx","code":"$3a","html":"$3b"},{"name":"auth/login.tsx","code":"$3c","html":"$3d"},{"name":"auth/passkey.tsx","code":"$3e","html":"$3f"},{"name":"auth/two-factor.tsx","code":"$40","html":"$41"},{"name":"auth/sign-up.tsx","code":"$42","html":"$43"},{"name":"auth/check-email.tsx","code":"$44","html":"$45"},{"name":"auth/verify-email.tsx","code":"$46","html":"$47"},{"name":"auth/reset-password.tsx","code":"$48","html":"$49"},{"name":"auth/sso.tsx","code":"$4a","html":"$4b"},{"name":"auth/choose-workspace.tsx","code":"$4c","html":"$4d"},{"name":"auth/accept-invite.tsx","code":"$4e","html":"$4f"},{"name":"auth/confirm-identity.tsx","code":"$50","html":"$51"},{"name":"auth/session.tsx","code":"$52","html":"$53"},{"name":"auth/oauth-consent.tsx","code":"$54","html":"$55"},{"name":"auth/waitlist.tsx","code":"$56","html":"$57"},{"name":"demo.tsx","code":"$58","html":"$59"}],"examples":{"centered":{"name":"centered.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { LoginForm } from \"@/components/scalar-ui/auth/login\";\n\nexport default function Example() {\n const noop = () => {};\n return (\n

\n \n \n \n

\n );\n}\n","html":"$5a"},"sign-up":{"name":"sign-up.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { CheckEmail } from \"@/components/scalar-ui/auth/check-email\";\nimport { SignUpForm } from \"@/components/scalar-ui/auth/sign-up\";\nimport { useState } from \"react\";\n\nexport default function Example() {\n const [email, setEmail] = useState(null);\n return (\n

\n \n {email ? setEmail(null)} onChangeEmail={() => setEmail(null)} /> : {}} />}\n \n

\n );\n}\n","html":"$5b"},"bleed":{"name":"bleed.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { SignUpForm } from \"@/components/scalar-ui/auth/sign-up\";\n\nexport default function Example() {\n return (\n

\n \n {}} onLogIn={() => {}} />\n \n

\n );\n}\n","html":"$5c"},"waitlist":{"name":"waitlist.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { Waitlist } from \"@/components/scalar-ui/auth/waitlist\";\n\nexport default function Example() {\n return (\n

\n \n \n \n

\n );\n}\n","html":"$5d"},"save-passkey":{"name":"save-passkey.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { SavePasskeyPrompt } from \"@/components/scalar-ui/auth/passkey\";\n\nexport default function Example() {\n const [key, setKey] = useState(0);\n return (\n

\n \n setTimeout(() => setKey((k) => k + 1), 1200)} onSkip={() => setKey((k) => k + 1)} />\n \n

\n );\n}\n","html":"$5e"},"email-code":{"name":"email-code.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { CheckEmail } from \"@/components/scalar-ui/auth/check-email\";\n\nexport default function Example() {\n const [key, setKey] = useState(0);\n return (\n

\n \n setTimeout(() => setKey((k) => k + 1), 1500)} />\n \n

\n );\n}\n","html":"$5f"},"magic-link":{"name":"magic-link.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { CheckEmail } from \"@/components/scalar-ui/auth/check-email\";\n\nexport default function Example() {\n return (\n

\n \n {}} onChangeEmail={() => {}} />\n \n

\n );\n}\n","html":"$60"},"verify-email":{"name":"verify-email.tsx","code":"$61","html":"$62"},"reset-password":{"name":"reset-password.tsx","code":"$63","html":"$64"},"two-factor":{"name":"two-factor.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { TwoFactorChallenge } from \"@/components/scalar-ui/auth/two-factor\";\n\nexport default function Example() {\n const [key, setKey] = useState(0);\n return (\n

\n \n setKey((k) => k + 1)} />\n \n

\n );\n}\n","html":"$65"},"sso":{"name":"sso.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { ORGS } from \"@/components/scalar-ui/auth/data\";\nimport { SsoSignIn } from \"@/components/scalar-ui/auth/sso\";\n\nexport default function Example() {\n const [key, setKey] = useState(0);\n return (\n

\n \n setKey((k) => k + 1)} onBack={() => setKey((k) => k + 1)} />\n \n

\n );\n}\n","html":"$66"},"choose-workspace":{"name":"choose-workspace.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { WorkspacePicker } from \"@/components/scalar-ui/auth/choose-workspace\";\nimport { INVITE, WORKSPACES } from \"@/components/scalar-ui/auth/data\";\n\nexport default function Example() {\n const [key, setKey] = useState(0);\n return (\n

\n \n setKey((k) => k + 1)} onCreate={() => {}} onJoin={() => {}} onSwitchAccount={() => {}} />\n \n

\n );\n}\n","html":"$67"},"accept-invite":{"name":"accept-invite.tsx","code":"$68","html":"$69"},"confirm-identity":{"name":"confirm-identity.tsx","code":"$6a","html":"$6b"},"session-states":{"name":"session-states.tsx","code":"$6c","html":"$6d"},"oauth-consent":{"name":"oauth-consent.tsx","code":"\"use client\";\n\nimport { AuthLayout } from \"@/components/scalar-ui/auth/auth-ui\";\nimport { OAuthConsent } from \"@/components/scalar-ui/auth/oauth-consent\";\n\nexport default function Example() {\n return (\n

\n \n \n \n

\n );\n}\n","html":"$6e"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add auth","shadcn":"npx shadcn@latest add https://scalarui.com/r/auth.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L6f","toolbar":"$L70"}]}],["$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80"]]}]