Sign in

The screen a SaaS or AI product puts in front of everyone who isn't signed in yet. Work email first, then a one-time code (with a resend countdown and "Use a different email"), plus any OAuth providers and a "Continue with SSO" path that asks for the work domain. mode="sign-up" changes the wording; the flow stays the same, because with codes there's no difference between the two until your server says so.

The block holds the flow. Your server holds the decisions: each callback returns a promise of a result, and every failure has its own screen.

<SignIn  productName="Acme"  brand={<AcmeLogo />}  legal={<>By continuing, you agree to our <a href="/terms">Terms</a> and <a href="/privacy">Privacy Policy</a>.</>}  mode={mode}  onModeChange={(next) => router.push(next === "sign-up" ? "/signup" : "/login")}  onSendCode={async (email) => {    const res = await fetch("/api/auth/code", { method: "POST", body: JSON.stringify({ email }) });    if (res.status === 403) return { ok: false, reason: "not-allowed", message: (await res.json()).message };    if (res.status === 429) return { ok: false, reason: "rate-limited", retryIn: Number(res.headers.get("Retry-After")) };    if (!res.ok) return { ok: false, reason: "error" };    return { ok: true, expiresIn: 600, resendIn: 30 };  }}  onVerify={async (email, code) => {    const res = await fetch("/api/auth/verify", { method: "POST", body: JSON.stringify({ email, code }) });    if (res.ok) return { ok: true };    const body = await res.json(); // { reason: "wrong-code", attemptsLeft: 3 } and so on    return { ok: false, ...body };  }}  providers={[{ id: "google", name: "Google" }, { id: "github", name: "GitHub" }]}  onProvider={async (id) => {    window.location.assign(`/api/auth/oauth/${id}`);    return new Promise(() => {}); // a redirect never comes back: the button stays busy  }}  onSso={async (domain) => {    const res = await fetch(`/api/auth/sso?domain=${encodeURIComponent(domain)}`);    if (res.status === 404) return { ok: false, reason: "not-found" };    if (!res.ok) return { ok: false, reason: "error" };    window.location.assign((await res.json()).url);    return new Promise(() => {});  }}  onSuccess={() => router.replace(next ?? "/")}  fullPage  autoFocus/>

When to use it

• A product that signs people in with an emailed code, alone or alongside OAuth and SAML/OIDC SSO.
• Both the sign-in and sign-up pages, from one component.

When not to

• Password sign-in. Use text fields in a form. The code step here is the whole point.
• A second factor after a password. Use code input on its own, in your existing flow.
• Re-confirming a signed-in person before a risky action. That's a dialog.

Results, not exceptions

Each callback resolves with { ok: true, … } or { ok: false, reason, … }. A thrown error or rejected promise counts as reason: "error", so a dropped connection still gets a message and a way to retry. Answers that arrive after the person has moved on (pressed "Use a different email", say) are dropped.

A code also expires on its own clock: once expiresIn passes, the code step switches to "Send a new code" without asking the server.

States

Busy is not disabled: the pressed button keeps focus and ignores more presses, and the rest of the form ignores them too while anything is in flight.

Props

All result types (SendCodeResult, VerifyResult, ProviderResult, SsoResult, SignInSuccess, SignInProvider, SignInInitialState) are exported.

Customizing

• Copy. The strings live in sign-in.tsx; change them in place. Keep each failure saying what to do next.
• Real provider logos. Pass mark (an <svg> or <img>, drawn at 16px in a 20px tile) once you're allowed to use the brand's mark. The default letter tile needs no license.
• Server messages. not-allowed and error take a message; it replaces the default body, so your domain policy can speak for itself.
• Width. --sign-in-width on the block (400px by default).
• Phone. Below a 480px-wide container the card drops its surface and sits on the page, so the screen is the page.
• Magic links. If your email also carries a link, open the page on initialState={{ step: "done", success }} after the link's own check, or just navigate.

Accessibility

• One <section> labelled by the step's heading. When the step changes, focus moves into its first field (or to the heading on success), so a screen reader lands where the work is.
• The email field is type="email", autocomplete="email"; the code boxes carry autocomplete="one-time-code", so phones offer the code from the message.
• Field and code errors are tied to their inputs with aria-describedby and read out politely. Alerts that arrive answer a press, so they open their height under the button rather than shifting anything above it.
• Countdowns tick for the eye only. Screen readers hear the wait once ("about 5 minutes"), not every second; numbers are tabular so nothing shifts.
• A status region says "We sent a 6-digit code to …" and "Signed in."
• Every action is a real button or form submit; Enter works on each step.

Before / after

Before: an email field and a "Send magic link" button. A second press sends three emails, a typo'd address waits forever, a blocked domain says "Something went wrong", and a wrong code just shakes.

After:

<SignIn productName="Acme" onSendCode={sendCode} onVerify={verify} onSuccess={go} />

Each of those cases has a screen that names what happened and the next step, with the right countdown when the answer is "wait".