@flaredev/cli 0.1.1 → 0.2.0

package/templates/app/components/auth/provider-icons.tsx

@@ -0,0 +1,39 @@
+import type { SocialProvider } from "@/lib/auth-config";
+
+/** Provider marks for the social sign-in buttons (brand colours, as each provider's guidelines ask). */
+export function ProviderIcon({ provider, className = "size-5" }: { provider: SocialProvider; className?: string }) {
+  switch (provider) {
+    case "google":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z" />
+          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
+          <path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.06H2.18A11 11 0 0 0 1 12c0 1.78.43 3.45 1.18 4.94l3.66-2.84Z" />
+          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A10.97 10.97 0 0 0 12 1 11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38Z" />
+        </svg>
+      );
+    case "github":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="currentColor" d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" />
+        </svg>
+      );
+    case "apple":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="currentColor" d="M16.37 12.64c-.03-2.6 2.13-3.86 2.23-3.92-1.22-1.78-3.11-2.02-3.78-2.05-1.6-.17-3.13.95-3.95.95-.82 0-2.07-.93-3.4-.9a5.03 5.03 0 0 0-4.25 2.58c-1.83 3.17-.47 7.84 1.3 10.4.87 1.25 1.9 2.66 3.25 2.61 1.3-.05 1.8-.84 3.38-.84 1.57 0 2.02.84 3.4.81 1.4-.02 2.29-1.27 3.15-2.53a11 11 0 0 0 1.42-2.93 4.55 4.55 0 0 1-2.75-4.18ZM13.8 5.02c.72-.88 1.2-2.09 1.07-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.25 2.01-1.09 3.19 1.15.09 2.33-.59 3.06-1.45Z" />
+        </svg>
+      );
+    case "microsoft":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="#F25022" d="M2 2h9.5v9.5H2z" />
+          <path fill="#7FBA00" d="M12.5 2H22v9.5h-9.5z" />
+          <path fill="#00A4EF" d="M2 12.5h9.5V22H2z" />
+          <path fill="#FFB900" d="M12.5 12.5H22V22h-9.5z" />
+        </svg>
+      );
+  }
+}
+
+export const PROVIDER_LABELS: Record<SocialProvider, string> = { google: "Google", github: "GitHub", apple: "Apple", microsoft: "Microsoft" };

package/templates/app/components/auth/sign-in-flow.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { FingerprintIcon, MailIcon, KeyRoundIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import type { SocialProvider } from "@/lib/auth-config";
+import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton, SecondaryButton, TextButton } from "./ui";
+import { SocialButtons } from "./social-buttons";
+
+export interface SignInMethods {
+  magicLink: boolean;
+  emailOtp: boolean;
+  passkeys: boolean;
+}
+
+interface Props {
+  providers: SocialProvider[];
+  socialPlacement: "before" | "after";
+  socialStyle: "full" | "icon";
+  methods: SignInMethods;
+  next: string;
+  initialError?: string | null;
+  initialNotice?: string | null;
+}
+
+type Step = "email" | "password" | "link-sent" | "code";
+
+/** Messages for Better Auth's error codes, written for the person signing in. */
+export function authErrorMessage(error: { code?: string; message?: string } | null | undefined, fallback = "Something went wrong. Try again."): string {
+  switch (error?.code) {
+    case "INVALID_EMAIL_OR_PASSWORD":
+      return "That email and password don't match.";
+    case "EMAIL_NOT_VERIFIED":
+      return "Verify your email first: we've sent you a new link.";
+    case "INVALID_OTP":
+    case "INVALID_CODE":
+    case "INVALID_TWO_FACTOR_CODE":
+      return "That code isn't right. Check it and try again.";
+    case "OTP_EXPIRED":
+      return "That code has expired. Ask for a new one.";
+    case "TOO_MANY_ATTEMPTS":
+      return "Too many attempts. Ask for a new code.";
+    case "USER_ALREADY_EXISTS":
+    case "USER_ALREADY_EXISTS_USE_ANOTHER_EMAIL":
+      return "An account with this email already exists. Sign in instead.";
+    case "PASSWORD_TOO_SHORT":
+      return "Use at least 8 characters.";
+    default:
+      return error?.message || fallback;
+  }
+}
+
+const go = (next: string) => {
+  window.location.href = next;
+};
+
+/**
+ * Sign-in in two steps: the email first (with social and passkey sign-in beside it),
+ * then the password or an emailed link or code. A password sign-in that needs a
+ * second factor continues on /two-factor (see lib/auth-client.ts).
+ */
+export function SignInFlow({ providers, socialPlacement, socialStyle, methods, next, initialError, initialNotice }: Props) {
+  const [step, setStep] = useState<Step>("email");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [pending, setPending] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(initialError ?? null);
+  const [notice, setNotice] = useState<string | null>(initialNotice ?? null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+
+  // Offer saved passkeys in the email field's autofill (conditional UI), where supported.
+  useEffect(() => {
+    if (!methods.passkeys || typeof PublicKeyCredential === "undefined") return;
+    let cancelled = false;
+    PublicKeyCredential.isConditionalMediationAvailable?.().then((available) => {
+      if (!available || cancelled) return;
+      void authClient.signIn.passkey({ autoFill: true }).then(({ error }) => {
+        if (!error) go(next);
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [methods.passkeys, next]);
+
+  useEffect(() => {
+    if (step === "password") passwordRef.current?.focus();
+  }, [step]);
+
+  const run = async (label: string, work: () => Promise<void>) => {
+    setPending(label);
+    setError(null);
+    setNotice(null);
+    try {
+      await work();
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const signInWithPassword = () =>
+    run("password", async () => {
+      const { data, error } = await authClient.signIn.email({ email, password });
+      if (error) return setError(authErrorMessage(error));
+      // With two-factor on, the client plugin has already sent us to /two-factor.
+      if (data && "twoFactorRedirect" in data && data.twoFactorRedirect) return;
+      go(next);
+    });
+
+  const sendLink = () =>
+    run("link", async () => {
+      const { error } = await authClient.signIn.magicLink({ email, callbackURL: next, errorCallbackURL: "/sign-in?error=link" });
+      if (error) return setError(authErrorMessage(error));
+      setStep("link-sent");
+    });
+
+  const sendCode = () =>
+    run("code", async () => {
+      const { error } = await authClient.emailOtp.sendVerificationOtp({ email, type: "sign-in" });
+      if (error) return setError(authErrorMessage(error));
+      setCode("");
+      setStep("code");
+    });
+
+  const signInWithCode = () =>
+    run("verify", async () => {
+      const { error } = await authClient.signIn.emailOtp({ email, otp: code.trim() });
+      if (error) return setError(authErrorMessage(error));
+      go(next);
+    });
+
+  const signInWithPasskey = () =>
+    run("passkey", async () => {
+      const { error } = await authClient.signIn.passkey();
+      if (error) return setError(authErrorMessage(error, "That passkey didn't work. Try again or use your email."));
+      go(next);
+    });
+
+  const social = (
+    <SocialButtons providers={providers} variant={socialStyle} next={next} onError={setError} />
+  );
+  const hasSocial = providers.length > 0;
+  const changeEmail = (
+    <div className="flex items-center justify-between rounded-[calc(var(--radius)-2px)] bg-surface-muted px-3.5 py-2.5 text-sm">
+      <span className="truncate text-foreground">{email}</span>
+      <TextButton onClick={() => setStep("email")}>Change</TextButton>
+    </div>
+  );
+
+  if (step === "link-sent") {
+    return (
+      <div className="flex flex-col gap-5 text-center">
+        <span className="mx-auto grid size-12 place-items-center rounded-full bg-brand/15 text-link">
+          <MailIcon className="size-6" />
+        </span>
+        <div className="flex flex-col gap-1.5">
+          <p className="text-base font-medium text-foreground">Check your email</p>
+          <p className="text-sm text-foreground-muted">
+            We sent a sign-in link to <span className="font-medium text-foreground">{email}</span>. It works once and expires in 5 minutes.
+          </p>
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <div className="flex justify-center gap-4">
+          <TextButton onClick={sendLink} disabled={pending !== null}>Send it again</TextButton>
+          <TextButton onClick={() => setStep("email")}>Use another email</TextButton>
+        </div>
+      </div>
+    );
+  }
+
+  if (step === "code") {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void signInWithCode();
+        }}
+      >
+        <p className="text-sm text-foreground-muted">
+          Enter the 6-digit code we sent to <span className="font-medium text-foreground">{email}</span>.
+        </p>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="code">Code</AuthLabel>
+          <AuthInput
+            id="code"
+            name="code"
+            value={code}
+            onChange={(event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6))}
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="\d{6}"
+            placeholder="123456"
+            className="text-center font-mono text-xl tracking-[0.5em]"
+            autoFocus
+            required
+            aria-invalid={Boolean(error) || undefined}
+          />
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending === "verify"} disabled={code.length !== 6}>
+          Sign in
+        </PrimaryButton>
+        <div className="flex justify-center gap-4">
+          <TextButton onClick={sendCode} disabled={pending !== null}>Send a new code</TextButton>
+          <TextButton onClick={() => setStep("email")}>Use another email</TextButton>
+        </div>
+      </form>
+    );
+  }
+
+  if (step === "password") {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void signInWithPassword();
+        }}
+      >
+        {changeEmail}
+        {/* Keeps the email with the password for password managers. */}
+        <input type="email" name="email" value={email} autoComplete="username" readOnly hidden />
+        <div className="flex flex-col gap-2">
+          <div className="flex items-baseline justify-between">
+            <AuthLabel htmlFor="password">Password</AuthLabel>
+            <Link href={`/forgot-password?email=${encodeURIComponent(email)}`} className="text-sm text-link hover:underline">
+              Forgot password?
+            </Link>
+          </div>
+          <AuthInput
+            ref={passwordRef}
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            aria-invalid={Boolean(error) || undefined}
+          />
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending === "password"}>
+          Sign in
+        </PrimaryButton>
+        {(methods.magicLink || methods.emailOtp) && (
+          <>
+            <Divider />
+            {methods.magicLink && (
+              <SecondaryButton onClick={sendLink} disabled={pending !== null}>
+                <MailIcon className="size-4" /> Email me a sign-in link
+              </SecondaryButton>
+            )}
+            {methods.emailOtp && (
+              <SecondaryButton onClick={sendCode} disabled={pending !== null}>
+                <KeyRoundIcon className="size-4" /> Email me a code
+              </SecondaryButton>
+            )}
+          </>
+        )}
+      </form>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {hasSocial && socialPlacement === "before" && (
+        <>
+          {social}
+          <Divider />
+        </>
+      )}
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          setError(null);
+          setStep("password");
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="email">Email</AuthLabel>
+          <AuthInput
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="username webauthn"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoFocus
+          />
+        </div>
+        <FormMessage tone="success">{notice}</FormMessage>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit">Continue</PrimaryButton>
+      </form>
+      {methods.passkeys && (
+        <SecondaryButton onClick={signInWithPasskey} disabled={pending !== null}>
+          <FingerprintIcon className="size-4" /> Sign in with a passkey
+        </SecondaryButton>
+      )}
+      {hasSocial && socialPlacement === "after" && (
+        <>
+          <Divider />
+          {social}
+        </>
+      )}
+    </div>
+  );
+}

package/templates/app/components/auth/sign-up-form.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { MailIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import type { SocialProvider } from "@/lib/auth-config";
+import { authErrorMessage } from "./sign-in-flow";
+import { SocialButtons } from "./social-buttons";
+import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton } from "./ui";
+
+interface Props {
+  providers: SocialProvider[];
+  socialPlacement: "before" | "after";
+  socialStyle: "full" | "icon";
+  next: string;
+  /** With email verification required, sign-up ends on "check your email". */
+  verifyFirst: boolean;
+}
+
+export function SignUpForm({ providers, socialPlacement, socialStyle, next, verifyFirst }: Props) {
+  const [values, setValues] = useState({ name: "", email: "", password: "" });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+  const set = (key: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => setValues({ ...values, [key]: event.target.value });
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    if (values.password.length < 8) return setError("Use at least 8 characters for your password.");
+    setPending(true);
+    const { error } = await authClient.signUp.email({ ...values, callbackURL: next });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    if (verifyFirst) return setSent(true);
+    window.location.href = next;
+  };
+
+  if (sent) {
+    return (
+      <div className="flex flex-col gap-4 text-center">
+        <span className="mx-auto grid size-12 place-items-center rounded-full bg-brand/15 text-link">
+          <MailIcon className="size-6" />
+        </span>
+        <p className="text-base font-medium">Check your email</p>
+        <p className="text-sm text-foreground-muted">
+          We sent a link to <span className="font-medium text-foreground">{values.email}</span>. Open it to verify your address and sign in.
+        </p>
+      </div>
+    );
+  }
+
+  const social = <SocialButtons providers={providers} variant={socialStyle} next={next} onError={setError} />;
+  return (
+    <div className="flex flex-col gap-4">
+      {providers.length > 0 && socialPlacement === "before" && (
+        <>
+          {social}
+          <Divider />
+        </>
+      )}
+      <form className="flex flex-col gap-4" onSubmit={submit}>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="name">Name</AuthLabel>
+          <AuthInput id="name" name="name" autoComplete="name" value={values.name} onChange={set("name")} required autoFocus />
+        </div>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="email">Email</AuthLabel>
+          <AuthInput id="email" name="email" type="email" autoComplete="email" placeholder="you@example.com" value={values.email} onChange={set("email")} required />
+        </div>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="password">Password</AuthLabel>
+          <AuthInput
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="new-password"
+            value={values.password}
+            onChange={set("password")}
+            required
+            minLength={8}
+            aria-describedby="password-hint"
+          />
+          <p id="password-hint" className="text-xs text-foreground-muted">
+            At least 8 characters.
+          </p>
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending}>
+          Create account
+        </PrimaryButton>
+      </form>
+      {providers.length > 0 && socialPlacement === "after" && (
+        <>
+          <Divider />
+          {social}
+        </>
+      )}
+    </div>
+  );
+}

package/templates/app/components/auth/social-buttons.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import type { SocialProvider } from "@/lib/auth-config";
+import { cn } from "@/lib/utils";
+import { PROVIDER_LABELS, ProviderIcon } from "./provider-icons";
+
+interface Props {
+  providers: SocialProvider[];
+  /** "full": a labelled button per provider. "icon": a row of square buttons. */
+  variant: "full" | "icon";
+  next: string;
+  onError: (message: string) => void;
+}
+
+/** One button per configured provider; each starts that provider's sign-in and comes back to `next`. */
+export function SocialButtons({ providers, variant, next, onError }: Props) {
+  const [pending, setPending] = useState<SocialProvider | null>(null);
+  if (providers.length === 0) return null;
+
+  const start = async (provider: SocialProvider) => {
+    setPending(provider);
+    const { error } = await authClient.signIn.social({ provider, callbackURL: next, errorCallbackURL: "/sign-in?error=oauth" });
+    if (error) {
+      setPending(null);
+      onError(error.message ?? `Couldn't start ${PROVIDER_LABELS[provider]} sign-in.`);
+    }
+  };
+
+  return (
+    <div className={cn(variant === "icon" ? "flex justify-center gap-3" : "flex flex-col gap-3")}>
+      {providers.map((provider) => (
+        <button
+          key={provider}
+          type="button"
+          onClick={() => start(provider)}
+          disabled={pending !== null}
+          aria-label={variant === "icon" ? `Continue with ${PROVIDER_LABELS[provider]}` : undefined}
+          className={cn(
+            "inline-flex items-center justify-center gap-2.5 border border-border bg-surface font-medium text-foreground transition-colors hover:bg-surface-muted disabled:opacity-60",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+            variant === "icon" ? "size-[74px] rounded-2xl" : "h-11 w-full rounded-[var(--button-radius)] px-4 text-[15px]",
+          )}
+        >
+          {pending === provider ? (
+            <span className="size-5 animate-spin rounded-full border-2 border-current border-r-transparent" aria-hidden="true" />
+          ) : (
+            <ProviderIcon provider={provider} className={variant === "icon" ? "size-6" : "size-5"} />
+          )}
+          {variant === "full" && `Continue with ${PROVIDER_LABELS[provider]}`}
+        </button>
+      ))}
+    </div>
+  );
+}

package/templates/app/components/auth/two-factor-form.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { authErrorMessage } from "./sign-in-flow";
+import { AuthInput, AuthLabel, FormMessage, PrimaryButton, TextButton } from "./ui";
+
+type Method = "authenticator" | "email" | "backup";
+
+interface Props {
+  methods: { authenticator: boolean; email: boolean };
+  next: string;
+}
+
+const LABELS: Record<Method, string> = { authenticator: "Authenticator app", email: "Email code", backup: "Backup code" };
+
+/** The second step of a password sign-in: an authenticator code, an emailed code, or a backup code. */
+export function TwoFactorForm({ methods, next }: Props) {
+  const available: Method[] = [...(methods.authenticator ? (["authenticator"] as const) : []), ...(methods.email ? (["email"] as const) : []), "backup"];
+  const [method, setMethod] = useState<Method>(available[0]!);
+  const [code, setCode] = useState("");
+  const [trust, setTrust] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+
+  const choose = (item: Method) => {
+    setMethod(item);
+    setCode("");
+    setError(null);
+  };
+
+  const sendEmail = async () => {
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.twoFactor.sendOtp();
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  const verify = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const body = { code: code.trim(), trustDevice: trust };
+    const { error } =
+      method === "authenticator"
+        ? await authClient.twoFactor.verifyTotp(body)
+        : method === "email"
+          ? await authClient.twoFactor.verifyOtp(body)
+          : await authClient.twoFactor.verifyBackupCode(body);
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    window.location.href = next;
+  };
+
+  const waitingForEmail = method === "email" && !sent;
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={verify}>
+      {available.length > 1 && (
+        <div role="tablist" aria-label="Verify with" className="grid auto-cols-fr grid-flow-col gap-1 rounded-[calc(var(--radius)+2px)] bg-surface-muted p-1">
+          {available.map((item) => (
+            <button
+              key={item}
+              type="button"
+              role="tab"
+              aria-selected={method === item}
+              onClick={() => choose(item)}
+              className={cn("rounded-[var(--radius)] px-2 py-1.5 text-xs font-medium text-foreground-muted", method === item && "bg-surface text-foreground shadow-sm")}
+            >
+              {LABELS[item]}
+            </button>
+          ))}
+        </div>
+      )}
+      <p className="text-sm text-foreground-muted">
+        {method === "authenticator" && "Open your authenticator app and enter the 6-digit code for this account."}
+        {method === "email" && (sent ? "We sent a 6-digit code to your email." : "We'll email you a 6-digit code.")}
+        {method === "backup" && "Enter one of the backup codes you saved when you set up two-factor. Each works once."}
+      </p>
+      {waitingForEmail ? (
+        <>
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="button" onClick={sendEmail} pending={pending}>
+            Email me a code
+          </PrimaryButton>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col gap-2">
+            <AuthLabel htmlFor="code">{method === "backup" ? "Backup code" : "Code"}</AuthLabel>
+            <AuthInput
+              id="code"
+              value={code}
+              onChange={(event) => setCode(event.target.value)}
+              inputMode={method === "backup" ? "text" : "numeric"}
+              autoComplete="one-time-code"
+              className={cn(method !== "backup" && "text-center font-mono text-xl tracking-[0.5em]")}
+              required
+              autoFocus
+              aria-invalid={Boolean(error) || undefined}
+            />
+          </div>
+          <label className="flex items-center gap-2 text-sm text-foreground-muted">
+            <input type="checkbox" checked={trust} onChange={(event) => setTrust(event.target.checked)} className="size-4 accent-[var(--brand)]" />
+            Trust this device for 30 days
+          </label>
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="submit" pending={pending}>
+            Verify
+          </PrimaryButton>
+          {method === "email" && (
+            <TextButton onClick={sendEmail} disabled={pending} className="self-center">
+              Send a new code
+            </TextButton>
+          )}
+        </>
+      )}
+    </form>
+  );
+}