@cosmicdrift/kumiko-bundled-features 0.160.0 → 0.162.0

package/src/auth-mfa/web/__tests__/mfa-setup-preauth-screen.test.tsx

@@ -0,0 +1,202 @@
+import { beforeEach, describe, expect, mock, test } from "bun:test";
+import {
+  createStaticLocaleResolver,
+  LocaleProvider,
+  PrimitivesProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { defaultPrimitives } from "@cosmicdrift/kumiko-renderer-web";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { defaultTranslations } from "../i18n";
+
+mock.module("qrcode/lib/browser", () => ({
+  default: { toString: mock(async () => "<svg></svg>") },
+}));
+
+const { MfaSetupPreauthScreen } = await import("../mfa-setup-preauth-screen");
+
+function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
+  return (
+    <PrimitivesProvider value={defaultPrimitives}>
+      <LocaleProvider
+        resolver={createStaticLocaleResolver({ locale: "de" })}
+        fallbackBundles={[defaultTranslations]}
+      >
+        {children}
+      </LocaleProvider>
+    </PrimitivesProvider>
+  );
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), { status });
+}
+
+const startBody = {
+  isSuccess: true,
+  setupToken: "setup-token-1",
+  otpauthUri: "otpauth://totp/App:user@example.com?secret=ABCD1234&issuer=App",
+  recoveryCodes: ["code-1", "code-2"],
+};
+const confirmBody = {
+  isSuccess: true,
+  token: "t",
+  user: { id: "u1", tenantId: "t1", roles: [] },
+};
+
+beforeEach(() => {
+  globalThis.fetch = mock(async (input: RequestInfo | URL) => {
+    const url = String(input);
+    if (url.includes("preauth-enable-start")) return jsonResponse(startBody);
+    if (url.includes("preauth-confirm")) return jsonResponse(confirmBody);
+    return jsonResponse({ isSuccess: false, error: "unexpected_url" }, 500);
+  }) as unknown as typeof fetch;
+});
+
+describe("MfaSetupPreauthScreen", () => {
+  test("rendert Titel + Start-Button, kein Setup-Bereich vor dem Start", () => {
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen preauthSetupToken="preauth-1" accountLabel="user@example.com" />
+      </Wrapper>,
+    );
+    expect(screen.getByText("Zwei-Faktor-Authentifizierung erforderlich")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Einrichtung starten" })).toBeTruthy();
+    expect(screen.queryByLabelText(/^Code aus der Authenticator-App/)).toBeNull();
+  });
+
+  test("Start-Klick → postet preauthSetupToken+accountLabel, danach QR + Recovery-Codes", async () => {
+    const fetchMock = mock(async () => jsonResponse(startBody));
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen preauthSetupToken="preauth-1" accountLabel="user@example.com" />
+      </Wrapper>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Einrichtung starten" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/auth/mfa/preauth-enable-start",
+        expect.objectContaining({
+          method: "POST",
+          body: JSON.stringify({
+            preauthSetupToken: "preauth-1",
+            accountLabel: "user@example.com",
+          }),
+        }),
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByText("ABCD1234")).toBeTruthy();
+    });
+    expect(screen.getByText(/code-1/)).toBeTruthy();
+    expect(screen.getByText(/code-2/)).toBeTruthy();
+  });
+
+  test("Bestätigen-Button bleibt disabled bis Recovery-Codes bestätigt + 6-stelliger Code eingegeben", async () => {
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen preauthSetupToken="preauth-1" accountLabel="user@example.com" />
+      </Wrapper>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Einrichtung starten" }));
+    await waitFor(() => {
+      expect(screen.getByText("ABCD1234")).toBeTruthy();
+    });
+
+    const confirm = screen.getByRole("button", {
+      name: "Einrichtung abschließen",
+    }) as HTMLButtonElement;
+    expect(confirm.disabled).toBe(true);
+
+    fireEvent.click(screen.getByLabelText("Ich habe die Recovery-Codes gespeichert."));
+    expect(confirm.disabled).toBe(true);
+
+    fireEvent.change(screen.getByLabelText(/^Code aus der Authenticator-App/), {
+      target: { value: "123456" },
+    });
+    expect(confirm.disabled).toBe(false);
+  });
+
+  test("Bestätigen → postet setupToken+code, danach onSuccess", async () => {
+    const onSuccess = mock(() => {});
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen
+          preauthSetupToken="preauth-1"
+          accountLabel="user@example.com"
+          onSuccess={onSuccess}
+        />
+      </Wrapper>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Einrichtung starten" }));
+    await waitFor(() => {
+      expect(screen.getByText("ABCD1234")).toBeTruthy();
+    });
+    fireEvent.click(screen.getByLabelText("Ich habe die Recovery-Codes gespeichert."));
+    fireEvent.change(screen.getByLabelText(/^Code aus der Authenticator-App/), {
+      target: { value: "123456" },
+    });
+
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof mock>;
+    fireEvent.click(screen.getByRole("button", { name: "Einrichtung abschließen" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/auth/mfa/preauth-confirm",
+        expect.objectContaining({
+          method: "POST",
+          body: JSON.stringify({ setupToken: "setup-token-1", code: "123456" }),
+        }),
+      );
+    });
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalled();
+    });
+  });
+
+  test("enable-start schlägt fehl → übersetztes Fehler-Banner, kein Setup-Bereich", async () => {
+    globalThis.fetch = mock(async () =>
+      jsonResponse({ isSuccess: false, error: "mfa_already_enabled" }),
+    ) as unknown as typeof fetch;
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen preauthSetupToken="preauth-1" accountLabel="user@example.com" />
+      </Wrapper>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Einrichtung starten" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Zwei-Faktor-Authentifizierung ist bereits aktiv.")).toBeTruthy();
+    });
+    expect(screen.queryByText("ABCD1234")).toBeNull();
+  });
+
+  test("onCancel gesetzt → 'Zurück zum Login'-Button vorhanden, klick ruft onCancel", () => {
+    const onCancel = mock(() => {});
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen
+          preauthSetupToken="preauth-1"
+          accountLabel="user@example.com"
+          onCancel={onCancel}
+        />
+      </Wrapper>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Zurück zum Login" }));
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  test("ohne onCancel → kein 'Zurück zum Login'-Button", () => {
+    render(
+      <Wrapper>
+        <MfaSetupPreauthScreen preauthSetupToken="preauth-1" accountLabel="user@example.com" />
+      </Wrapper>,
+    );
+    expect(screen.queryByRole("button", { name: "Zurück zum Login" })).toBeNull();
+  });
+});

package/src/auth-mfa/web/i18n.ts

@@ -40,6 +40,13 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.enable.cancel": "Abbrechen",
     "auth.mfa.enable.confirm": "Aktivieren",
     "auth.mfa.enable.success": "Zwei-Faktor-Authentifizierung ist jetzt aktiv.",
+    "auth.mfa.setup.title": "Zwei-Faktor-Authentifizierung erforderlich",
+    "auth.mfa.setup.subtitle":
+      "Dein Konto verlangt Zwei-Faktor-Authentifizierung. Richte sie jetzt ein, um dich anzumelden.",
+    "auth.mfa.setup.intro":
+      "Scanne den QR-Code mit einer Authenticator-App (z.B. Google Authenticator, 1Password).",
+    "auth.mfa.setup.start": "Einrichtung starten",
+    "auth.mfa.setup.confirm": "Einrichtung abschließen",
     "auth.mfa.disable.title": "Zwei-Faktor-Authentifizierung deaktivieren",
     "auth.mfa.disable.description":
       "Bestätige mit einem Code aus deiner Authenticator-App oder einem Recovery-Code. Dein Konto ist danach nur noch durch dein Passwort geschützt.",
@@ -93,6 +100,13 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.enable.cancel": "Cancel",
     "auth.mfa.enable.confirm": "Enable",
     "auth.mfa.enable.success": "Two-factor authentication is now enabled.",
+    "auth.mfa.setup.title": "Two-factor authentication required",
+    "auth.mfa.setup.subtitle":
+      "Your account requires two-factor authentication. Set it up now to sign in.",
+    "auth.mfa.setup.intro":
+      "Scan the QR code with an authenticator app (e.g. Google Authenticator, 1Password).",
+    "auth.mfa.setup.start": "Start setup",
+    "auth.mfa.setup.confirm": "Complete setup",
     "auth.mfa.disable.title": "Disable two-factor authentication",
     "auth.mfa.disable.description":
       "Confirm with a code from your authenticator app or a recovery code. Your account will then be protected by your password alone.",

package/src/auth-mfa/web/index.ts

@@ -7,8 +7,12 @@
 export type { AuthMfaClientFeature, AuthMfaClientOptions } from "./client-plugin";
 export { authMfaClient } from "./client-plugin";
 export { defaultTranslations, mergeTranslations } from "./i18n";
-export type { MfaVerifyResult } from "./mfa-client";
-export { verifyMfaChallenge } from "./mfa-client";
+export type {
+  MfaSetupPreauthStart,
+  MfaSetupPreauthStartResult,
+  MfaVerifyResult,
+} from "./mfa-client";
+export { confirmMfaSetupPreauth, startMfaSetupPreauth, verifyMfaChallenge } from "./mfa-client";
 export type { MfaDisableDialogProps } from "./mfa-disable-dialog";
 export { MfaDisableDialog } from "./mfa-disable-dialog";
 export type { MfaEnableScreenProps } from "./mfa-enable-screen";
@@ -17,5 +21,7 @@ export type { MfaRecoveryCodesRevealProps } from "./mfa-recovery-codes-reveal";
 export { MfaRecoveryCodesReveal } from "./mfa-recovery-codes-reveal";
 export type { MfaRegenerateRecoveryDialogProps } from "./mfa-regenerate-recovery-dialog";
 export { MfaRegenerateRecoveryDialog } from "./mfa-regenerate-recovery-dialog";
+export type { MfaSetupPreauthScreenProps } from "./mfa-setup-preauth-screen";
+export { MfaSetupPreauthScreen } from "./mfa-setup-preauth-screen";
 export type { MfaVerifyScreenProps } from "./mfa-verify-screen";
 export { MfaVerifyScreen } from "./mfa-verify-screen";

package/src/auth-mfa/web/mfa-client.ts

@@ -58,3 +58,116 @@ export async function verifyMfaChallenge(
     },
   };
 }
+
+export type MfaSetupPreauthStart = {
+  readonly setupToken: string;
+  readonly otpauthUri: string;
+  readonly recoveryCodes: readonly string[];
+};
+
+export type MfaSetupPreauthStartResult =
+  | { readonly kind: "success"; readonly data: MfaSetupPreauthStart }
+  | { readonly kind: "failure"; readonly error: LoginFailure };
+
+// Browser-Seite von POST /api/auth/mfa/preauth-enable-start — lets a user
+// blocked at login by MFA enforcement generate a TOTP secret/QR without a
+// session, using the preauthSetupToken login()'s mfa-setup-required result
+// carries. No JWT/cookie here (see auth-routes.ts's route comment) — the
+// response's setupToken is consumed by confirmMfaSetupPreauth below.
+export async function startMfaSetupPreauth(
+  preauthSetupToken: string,
+  accountLabel: string,
+): Promise<MfaSetupPreauthStartResult> {
+  const res = await fetch("/api/auth/mfa/preauth-enable-start", {
+    method: "POST",
+    credentials: "same-origin",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ preauthSetupToken, accountLabel }),
+  });
+  if (res.status === 429) {
+    return { kind: "failure", error: { reason: "rate_limited" } };
+  }
+  // @cast-boundary engine-payload — HTTP-API contract, server-side schema-validated
+  const body = (await res.json().catch(() => ({}))) as {
+    isSuccess?: boolean;
+    setupToken?: string;
+    otpauthUri?: string;
+    recoveryCodes?: readonly string[];
+    error?: { code?: string; message?: string; details?: { reason?: string } } | string;
+  };
+  if (
+    body.isSuccess === true &&
+    body.setupToken !== undefined &&
+    body.otpauthUri !== undefined &&
+    body.recoveryCodes !== undefined
+  ) {
+    return {
+      kind: "success",
+      data: {
+        setupToken: body.setupToken,
+        otpauthUri: body.otpauthUri,
+        recoveryCodes: body.recoveryCodes,
+      },
+    };
+  }
+  const err = body.error;
+  if (typeof err === "string") {
+    return { kind: "failure", error: { reason: err } };
+  }
+  const reason = err?.details?.reason ?? err?.code ?? "setup_failed";
+  return {
+    kind: "failure",
+    error: { reason, ...(err?.message !== undefined && { message: err.message }) },
+  };
+}
+
+// Browser-Seite von POST /api/auth/mfa/preauth-confirm — completes both
+// the enrollment startMfaSetupPreauth began and the login mfa-setup-
+// required block. Response shape mirrors /auth/mfa/verify's (mints via
+// the same mintSessionAndRespond()), same as verifyMfaChallenge above —
+// kept as its own function rather than a shared helper so this file's
+// two already-tested request shapes stay independently editable.
+export async function confirmMfaSetupPreauth(
+  setupToken: string,
+  code: string,
+): Promise<MfaVerifyResult> {
+  const res = await fetch("/api/auth/mfa/preauth-confirm", {
+    method: "POST",
+    credentials: "same-origin",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ setupToken, code }),
+  });
+  if (res.status === 429) {
+    return { kind: "failure", error: { reason: "rate_limited" } };
+  }
+  // @cast-boundary engine-payload — HTTP-API contract, server-side schema-validated
+  const body = (await res.json().catch(() => ({}))) as {
+    isSuccess?: boolean;
+    token?: string;
+    user?: LoginResponse["user"];
+    error?:
+      | {
+          code?: string;
+          message?: string;
+          details?: { reason?: string; retryAfterSeconds?: number };
+        }
+      | string;
+  };
+  if (body.isSuccess === true && body.token !== undefined && body.user !== undefined) {
+    return { kind: "success", data: { token: body.token, user: body.user } };
+  }
+  const err = body.error;
+  if (typeof err === "string") {
+    return { kind: "failure", error: { reason: err } };
+  }
+  const reason = err?.details?.reason ?? err?.code ?? "mfa_setup_confirm_failed";
+  const retry = err?.details?.retryAfterSeconds;
+  return {
+    kind: "failure",
+    error: {
+      reason,
+      ...(err?.message !== undefined && { message: err.message }),
+      ...(retry !== undefined && { retryAfterSeconds: retry }),
+    },
+  };
+}

package/src/auth-mfa/web/mfa-setup-preauth-screen.tsx

@@ -0,0 +1,244 @@
+// @runtime client
+// Pre-auth twin of MfaEnableScreen: a user blocked at login by MFA
+// enforcement and not yet enrolled lands here straight out of the login
+// flow — there is no session yet. Identity comes entirely from the
+// preauthSetupToken login()'s mfa-setup-required result carries (see
+// auth-client.ts's LoginResult). Calls startMfaSetupPreauth/confirmMfa-
+// SetupPreauth directly via fetch (mfa-client.ts) — no useSession(), no
+// useDispatcher(), both assume a real session that doesn't exist here.
+//
+// Session contract: a successful confirm mints cookie+JWT server-side, but
+// THIS component does not refresh the session itself (unlike MfaVerify-
+// Screen, which calls session.refresh() internally). onSuccess fires right
+// after confirm — the caller (e.g. auth-gate's LoginRoute, which already
+// has useSession() in scope) must call refresh() there, otherwise the app
+// stays "unauthenticated" until the next reload.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+// qrcode's package.json#browser remap avoids Node-only deps (yargs/pngjs)
+// for bundlers that honor it — Metro doesn't, hence the explicit subpath.
+import QRCode from "qrcode/lib/browser";
+import { type FormEvent, type ReactNode, useState } from "react";
+// kumiko-lint-ignore cross-feature-import client-only component, the feature's server barrel has no web/ re-export
+import { AuthCard } from "../../auth-email-password/web";
+import { confirmMfaSetupPreauth, startMfaSetupPreauth } from "./mfa-client";
+
+type SetupState = {
+  readonly setupToken: string;
+  readonly secretParam: string;
+  readonly recoveryCodes: readonly string[];
+  readonly qrSvg: string;
+};
+
+// otpauth:// URIs put the secret in the query string — extract it for the
+// manual-entry fallback (authenticator apps without a camera / desktop use).
+function extractSecret(otpauthUri: string): string {
+  const query = otpauthUri.split("?")[1] ?? "";
+  return new URLSearchParams(query).get("secret") ?? "";
+}
+
+function reasonToKey(reason: string): string {
+  switch (reason) {
+    case "invalid_totp_code":
+      return "auth.mfa.errors.invalidCode";
+    case "mfa_already_enabled":
+      return "auth.mfa.errors.mfaAlreadyEnabled";
+    case "invalid_setup_token":
+      return "auth.mfa.errors.invalidSetupToken";
+    case "invalid_challenge_token":
+      return "auth.mfa.errors.challengeExpired";
+    case "too_many_attempts":
+      return "auth.mfa.errors.tooManyAttempts";
+    case "rate_limited":
+      return "auth.errors.rateLimited";
+    default:
+      return "auth.mfa.errors.setupFailed";
+  }
+}
+
+export type MfaSetupPreauthScreenProps = {
+  readonly preauthSetupToken: string;
+  /** Account label for the otpauth:// URI (typically the email typed at
+   *  login) — without a session there's no session.user.email to derive it from. */
+  readonly accountLabel: string;
+  readonly title?: string;
+  readonly subtitle?: ReactNode;
+  /** Fired once confirm succeeds — the caller owns session refresh, see the
+   *  file-level comment above. */
+  readonly onSuccess?: () => void;
+  readonly onCancel?: () => void;
+};
+
+export function MfaSetupPreauthScreen({
+  preauthSetupToken,
+  accountLabel,
+  title,
+  subtitle,
+  onSuccess,
+  onCancel,
+}: MfaSetupPreauthScreenProps): ReactNode {
+  const t = useTranslation();
+  const { Button, Banner, Field, Form, Input, Section } = usePrimitives();
+
+  const [setup, setSetup] = useState<SetupState | null>(null);
+  const [acknowledged, setAcknowledged] = useState(false);
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const startSetup = async (): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await startMfaSetupPreauth(preauthSetupToken, accountLabel);
+      if (res.kind !== "success") {
+        setError(res.error.reason);
+        return;
+      }
+      // errorCorrectionLevel "H" (~30% redundancy) — more resilient to
+      // camera/lighting issues than the default, no downside for a code
+      // this short-lived.
+      const qrSvg = await QRCode.toString(res.data.otpauthUri, {
+        type: "svg",
+        errorCorrectionLevel: "H",
+      });
+      setSetup({
+        setupToken: res.data.setupToken,
+        secretParam: extractSecret(res.data.otpauthUri),
+        recoveryCodes: res.data.recoveryCodes,
+        qrSvg,
+      });
+      setAcknowledged(false);
+      setCode("");
+    } catch {
+      setError("setup_failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const confirmSetup = async (): Promise<void> => {
+    if (!setup) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await confirmMfaSetupPreauth(setup.setupToken, code);
+      if (res.kind !== "success") {
+        setError(res.error.reason);
+        return;
+      }
+      onSuccess?.();
+    } catch {
+      setError("setup_failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void confirmSetup();
+  };
+
+  return (
+    <AuthCard
+      title={title ?? t("auth.mfa.setup.title")}
+      subtitle={subtitle ?? t("auth.mfa.setup.subtitle")}
+    >
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        {error !== null ? <Banner variant="error">{t(reasonToKey(error))}</Banner> : null}
+
+        {!setup && (
+          <Section
+            testId="mfa-setup-preauth-intro"
+            actions={
+              <Button
+                variant="primary"
+                onClick={() => void startSetup()}
+                loading={busy}
+                disabled={busy}
+              >
+                {t("auth.mfa.setup.start")}
+              </Button>
+            }
+          >
+            <span className="text-sm text-muted-foreground">{t("auth.mfa.setup.intro")}</span>
+          </Section>
+        )}
+
+        {setup && (
+          <Form onSubmit={onSubmit}>
+            <Section
+              testId="mfa-setup-preauth-setup"
+              actions={
+                <Button
+                  type="submit"
+                  variant="primary"
+                  loading={busy}
+                  disabled={busy || !acknowledged || code.length < 6}
+                >
+                  {t("auth.mfa.setup.confirm")}
+                </Button>
+              }
+            >
+              <div className="flex flex-col items-center gap-2 text-center">
+                <span className="text-sm font-semibold">{t("auth.mfa.enable.scanTitle")}</span>
+                {/* qrcode's own SVG string output, not user input — safe to inline */}
+                <div
+                  className="h-40 w-40"
+                  // biome-ignore lint/security/noDangerouslySetInnerHtml: qrcode-generated SVG, no user input
+                  dangerouslySetInnerHTML={{ __html: setup.qrSvg }}
+                />
+                <span className="text-xs text-muted-foreground">
+                  {t("auth.mfa.enable.manualEntry")}
+                </span>
+                <code className="inline-block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
+                  {setup.secretParam}
+                </code>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <span className="text-sm font-semibold">{t("auth.mfa.enable.recoveryTitle")}</span>
+                <span className="text-xs text-muted-foreground">
+                  {t("auth.mfa.enable.recoveryHint")}
+                </span>
+                <code className="block whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm">
+                  {setup.recoveryCodes.join("\n")}
+                </code>
+                <Field id="mfa-setup-preauth-ack" label={t("auth.mfa.enable.acknowledge")}>
+                  <Input
+                    kind="boolean"
+                    id="mfa-setup-preauth-ack"
+                    name="mfa-setup-preauth-ack"
+                    value={acknowledged}
+                    onChange={setAcknowledged}
+                  />
+                </Field>
+              </div>
+
+              <Field id="mfa-setup-preauth-code" label={t("auth.mfa.enable.code")} required>
+                <Input
+                  kind="text"
+                  id="mfa-setup-preauth-code"
+                  name="mfa-setup-preauth-code"
+                  value={code}
+                  onChange={setCode}
+                  disabled={busy || !acknowledged}
+                  autoComplete="one-time-code"
+                />
+              </Field>
+            </Section>
+          </Form>
+        )}
+
+        {onCancel ? (
+          <div className="flex justify-center">
+            <Button type="button" variant="secondary" onClick={onCancel} disabled={busy}>
+              {t("auth.mfa.verify.backToLogin")}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </AuthCard>
+  );
+}