@cosmicdrift/kumiko-bundled-features 0.147.3 → 0.149.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.147.3",
+  "version": "0.149.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -114,11 +114,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.147.3",
-    "@cosmicdrift/kumiko-framework": "0.147.3",
-    "@cosmicdrift/kumiko-headless": "0.147.3",
-    "@cosmicdrift/kumiko-renderer": "0.147.3",
-    "@cosmicdrift/kumiko-renderer-web": "0.147.3",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.149.0",
+    "@cosmicdrift/kumiko-framework": "0.149.0",
+    "@cosmicdrift/kumiko-headless": "0.149.0",
+    "@cosmicdrift/kumiko-renderer": "0.149.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.149.0",
     "@mollie/api-client": "^4.5.0",
     "imapflow": "^1.3.3",
     "mailparser": "^3.9.8",

package/src/audit/__tests__/audit-screens.boot.test.ts

@@ -15,7 +15,7 @@ describe("audit log screen + handler access alignment", () => {
   test("audit-log screen is custom, access.admin-gated", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_SCREEN_ID];
-    if (!screen || screen.type !== "custom") {
+    if (screen?.type !== "custom") {
       throw new Error(`expected a custom screen for ${AUDIT_LOG_SCREEN_ID}, got ${screen?.type}`);
     }
     if (!("access" in screen) || !screen.access || !("roles" in screen.access)) {
@@ -27,7 +27,7 @@ describe("audit log screen + handler access alignment", () => {
   test("audit-log-detail screen is custom, admin-gated, breadcrumb-linked to list", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_DETAIL_SCREEN_ID];
-    if (!screen || screen.type !== "custom") {
+    if (screen?.type !== "custom") {
       throw new Error(
         `expected a custom screen for ${AUDIT_LOG_DETAIL_SCREEN_ID}, got ${screen?.type}`,
       );

package/src/auth-mfa/__tests__/enable-flow.integration.test.ts

@@ -17,7 +17,7 @@ import { configValuesTable } from "../../config/table";
 import { createUserFeature } from "../../user/feature";
 import { userEntity } from "../../user/schema/user";
 import { base32Decode } from "../base32";
-import { AuthMfaHandlers } from "../constants";
+import { AuthMfaHandlers, AuthMfaQueries } from "../constants";
 import { createAuthMfaFeature } from "../feature";
 import { userMfaEntity } from "../schema/user-mfa";
 import { currentTotpCode } from "../totp";
@@ -147,4 +147,27 @@ describe("enable-start + enable-confirm round trip", () => {
     );
     expectErrorIncludes(err, "invalid_setup_token");
   });
+
+  test("status query reflects enrollment before and after enable-confirm", async () => {
+    const user = createTestUser({ id: "status-query-1", roles: ["User"] });
+
+    const before = await stack.http.queryOk<{ enabled: boolean }>(AuthMfaQueries.status, {}, user);
+    expect(before.enabled).toBe(false);
+
+    const start = await stack.http.writeOk<{ setupToken: string; otpauthUri: string }>(
+      AuthMfaHandlers.enableStart,
+      { accountLabel: "status@example.com" },
+      user,
+    );
+    const secretParam = new URLSearchParams(start.otpauthUri.split("?")[1]).get("secret") ?? "";
+    const code = currentTotpCode(base32Decode(secretParam));
+    await stack.http.writeOk(
+      AuthMfaHandlers.enableConfirm,
+      { setupToken: start.setupToken, code },
+      user,
+    );
+
+    const after = await stack.http.queryOk<{ enabled: boolean }>(AuthMfaQueries.status, {}, user);
+    expect(after.enabled).toBe(true);
+  });
 });

package/src/auth-mfa/constants.ts

@@ -15,6 +15,10 @@ export const AuthMfaHandlers = {
   verify: "auth-mfa:write:verify",
 } as const;
 
+export const AuthMfaQueries = {
+  status: "auth-mfa:query:user-mfa:status",
+} as const;
+
 export const MFA_SETUP_TOKEN_TTL_MINUTES = 10;
 export const MFA_CHALLENGE_TOKEN_TTL_MINUTES = 10;
 export const MFA_VERIFY_MAX_ATTEMPTS = 5;

package/src/auth-mfa/feature.ts

@@ -6,6 +6,7 @@ import { createEnableConfirmHandler } from "./handlers/enable-confirm.write";
 import { createEnableStartHandler } from "./handlers/enable-start.write";
 import { mfaReencryptJob } from "./handlers/reencrypt.job";
 import { createRegenerateRecoveryHandler } from "./handlers/regenerate-recovery.write";
+import { mfaStatusQuery } from "./handlers/status.query";
 import { createMfaVerifyHandler } from "./handlers/verify.write";
 import { AUTH_MFA_FEATURE_I18N } from "./i18n";
 import { createMfaStatusChecker, type MfaStatusChecker } from "./mfa-status-checker";
@@ -129,6 +130,10 @@ export function createAuthMfaFeature(opts: AuthMfaFeatureOptions): FeatureDefini
       ),
     };
 
+    const queries = {
+      status: r.queryHandler(mfaStatusQuery),
+    };
+
     // No late-bind needed (unlike sharedRevoker) — this checker only needs
     // the HandlerContext the CALLER already has (login.write.ts runs it
     // from inside its own dispatcher call), not a raw db handle assembled
@@ -141,6 +146,6 @@ export function createAuthMfaFeature(opts: AuthMfaFeatureOptions): FeatureDefini
       revokeAllOtherSessions = revoker;
     };
 
-    return { handlers, bindRevokeAllOtherSessions, checkMfaStatus };
+    return { handlers, queries, bindRevokeAllOtherSessions, checkMfaStatus };
   });
 }

package/src/auth-mfa/handlers/status.query.ts

@@ -0,0 +1,23 @@
+import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
+import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+import { userMfaTable } from "../schema/user-mfa";
+
+// "Is MFA enabled for me" — the one thing a settings screen needs before it
+// can decide whether to show the enrollment flow or the disable/regenerate
+// actions. No client-side signal (session/JWT) carries this today, so
+// without this query every app builds its own row-existence check via a
+// side channel. Plain fetchOne — no need for the entity's decrypting
+// executor.detail() (see db/queries.ts's findUserMfaRow), existence is all
+// the caller wants.
+export const mfaStatusQuery = defineQueryHandler({
+  name: "user-mfa:status",
+  schema: z.object({}),
+  access: { openToAll: true },
+  handler: async (query, ctx) => {
+    const row = await fetchOne<{ id: string }>(ctx.db, userMfaTable, {
+      userId: query.user.id,
+    });
+    return { enabled: row !== undefined };
+  },
+});

package/src/auth-mfa/index.ts

@@ -1,6 +1,11 @@
 export { base32Decode } from "./base32";
 export { type MfaRequiredPolicy, mfaRequiredConfigHandle } from "./config";
-export { AUTH_MFA_FEATURE, AuthMfaHandlers, MFA_ENABLE_SCREEN_ID } from "./constants";
+export {
+  AUTH_MFA_FEATURE,
+  AuthMfaHandlers,
+  AuthMfaQueries,
+  MFA_ENABLE_SCREEN_ID,
+} from "./constants";
 export type {
   AuthMfaFeatureOptions,
   BindMfaRevokeAllOtherSessions,

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

@@ -7,6 +7,7 @@ import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 
 export const defaultTranslations: TranslationsByLocale = {
   de: {
+    "screen:auth-mfa-enable.title": "Zwei-Faktor-Authentifizierung",
     "auth.mfa.verify.title": "Zwei-Faktor-Bestätigung",
     "auth.mfa.verify.subtitle": "Gib den 6-stelligen Code aus deiner Authenticator-App ein.",
     "auth.mfa.verify.code": "Code",
@@ -34,8 +35,28 @@ 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.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.",
+    "auth.mfa.disable.code": "Code aus der Authenticator-App oder Recovery-Code",
+    "auth.mfa.disable.confirm": "Deaktivieren",
+    "auth.mfa.disable.cancel": "Abbrechen",
+    "auth.mfa.disable.trigger": "Zwei-Faktor-Authentifizierung deaktivieren",
+    "auth.mfa.regenerate.title": "Neue Recovery-Codes erzeugen",
+    "auth.mfa.regenerate.description":
+      "Bestätige mit einem Code aus deiner Authenticator-App. Alle bisherigen Recovery-Codes werden sofort ungültig.",
+    "auth.mfa.regenerate.code": "Code aus der Authenticator-App",
+    "auth.mfa.regenerate.confirm": "Neu erzeugen",
+    "auth.mfa.regenerate.cancel": "Abbrechen",
+    "auth.mfa.regenerate.trigger": "Neue Recovery-Codes erzeugen",
+    "auth.mfa.regenerate.newCodesTitle": "Deine neuen Recovery-Codes",
+    "auth.mfa.regenerate.newCodesHint":
+      "Speichere diese Codes an einem sicheren Ort. Die alten Codes funktionieren ab sofort nicht mehr.",
+    "auth.mfa.regenerate.acknowledge": "Ich habe die neuen Recovery-Codes gespeichert.",
+    "auth.mfa.regenerate.done": "Fertig",
   },
   en: {
+    "screen:auth-mfa-enable.title": "Two-factor authentication",
     "auth.mfa.verify.title": "Two-factor verification",
     "auth.mfa.verify.subtitle": "Enter the 6-digit code from your authenticator app.",
     "auth.mfa.verify.code": "Code",
@@ -63,6 +84,25 @@ 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.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.",
+    "auth.mfa.disable.code": "Code from your authenticator app or a recovery code",
+    "auth.mfa.disable.confirm": "Disable",
+    "auth.mfa.disable.cancel": "Cancel",
+    "auth.mfa.disable.trigger": "Disable two-factor authentication",
+    "auth.mfa.regenerate.title": "Generate new recovery codes",
+    "auth.mfa.regenerate.description":
+      "Confirm with a code from your authenticator app. All existing recovery codes stop working immediately.",
+    "auth.mfa.regenerate.code": "Code from your authenticator app",
+    "auth.mfa.regenerate.confirm": "Generate new codes",
+    "auth.mfa.regenerate.cancel": "Cancel",
+    "auth.mfa.regenerate.trigger": "Generate new recovery codes",
+    "auth.mfa.regenerate.newCodesTitle": "Your new recovery codes",
+    "auth.mfa.regenerate.newCodesHint":
+      "Save these codes somewhere safe. The old codes stop working immediately.",
+    "auth.mfa.regenerate.acknowledge": "I've saved my new recovery codes.",
+    "auth.mfa.regenerate.done": "Done",
   },
 };
 

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

@@ -9,7 +9,14 @@ export { authMfaClient } from "./client-plugin";
 export { defaultTranslations, mergeTranslations } from "./i18n";
 export type { MfaVerifyResult } from "./mfa-client";
 export { verifyMfaChallenge } from "./mfa-client";
+export type { MfaDisableDialogProps } from "./mfa-disable-dialog";
+export { MfaDisableDialog } from "./mfa-disable-dialog";
 export type { MfaEnableScreenProps } from "./mfa-enable-screen";
 export { MfaEnableScreen } from "./mfa-enable-screen";
+export { mfaManageErrorKey } from "./mfa-error-keys";
+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 { MfaVerifyScreenProps } from "./mfa-verify-screen";
 export { MfaVerifyScreen } from "./mfa-verify-screen";

package/src/auth-mfa/web/mfa-disable-dialog.tsx

@@ -0,0 +1,70 @@
+// @runtime client
+// MfaDisableDialog — confirm-with-code before turning MFA off. Uses the
+// generic Dialog primitive (unlike MfaEnableScreen/MfaRegenerateRecovery-
+// Dialog): disable is single-step, no state to preserve after confirm, so
+// it doesn't hit the "Dialog always closes after onConfirm" problem that
+// ruled Dialog out for the multi-step enable/regenerate flows. Error
+// reporting still has to go through the parent (onError) rather than an
+// inline Banner, because Dialog closes in a `finally` regardless of
+// whether onConfirm's write succeeded — see profile-screen.tsx's
+// delete-account dialog for the same convention (StatusBanner rendered
+// by the caller, not the dialog).
+
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { AuthMfaHandlers } from "../constants";
+import { mfaManageErrorKey } from "./mfa-error-keys";
+
+export type MfaDisableDialogProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onDisabled: () => void;
+  readonly onError: (i18nKey: string) => void;
+};
+
+export function MfaDisableDialog({
+  open,
+  onOpenChange,
+  onDisabled,
+  onError,
+}: MfaDisableDialogProps): ReactNode {
+  const t = useTranslation();
+  const { Dialog, Field, Input } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [code, setCode] = useState("");
+
+  const confirm = async (): Promise<void> => {
+    const res = await dispatcher.write<{ disabled: boolean }>(AuthMfaHandlers.disable, { code });
+    setCode("");
+    if (!res.isSuccess) {
+      onError(mfaManageErrorKey(res.error.code));
+      return;
+    }
+    onDisabled();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      variant="danger"
+      title={t("auth.mfa.disable.title")}
+      description={t("auth.mfa.disable.description")}
+      confirmLabel={t("auth.mfa.disable.confirm")}
+      cancelLabel={t("auth.mfa.disable.cancel")}
+      onConfirm={confirm}
+      testId="mfa-disable-dialog"
+    >
+      <Field id="mfa-disable-code" label={t("auth.mfa.disable.code")} required>
+        <Input
+          kind="text"
+          id="mfa-disable-code"
+          name="mfa-disable-code"
+          value={code}
+          onChange={setCode}
+          autoComplete="one-time-code"
+        />
+      </Field>
+    </Dialog>
+  );
+}

package/src/auth-mfa/web/mfa-enable-screen.tsx

@@ -14,6 +14,7 @@ import { type ReactNode, useState } from "react";
 // kumiko-lint-ignore cross-feature-import client-only hook, the feature's server barrel has no web/ re-export
 import { useSession } from "../../auth-email-password/web";
 import { AuthMfaHandlers } from "../constants";
+import { mfaManageErrorKey } from "./mfa-error-keys";
 
 type EnableStartResponse = {
   readonly setupToken: string;
@@ -39,7 +40,7 @@ export type MfaEnableScreenProps = { readonly embedded?: boolean };
 
 export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {}): ReactNode {
   const t = useTranslation();
-  const { Button, Banner, Field, Input, Card, Heading } = usePrimitives();
+  const { Button, Banner, Field, Input, Section, Heading } = usePrimitives();
   const dispatcher = useDispatcher();
   const session = useSession();
 
@@ -95,25 +96,46 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
       <Heading>{t("auth.mfa.enable.title")}</Heading>
 
       {enabled && <Banner variant="info">{t("auth.mfa.enable.success")}</Banner>}
-      {error !== null && <Banner variant="error">{t(`auth.mfa.errors.${error}`)}</Banner>}
+      {error !== null && <Banner variant="error">{t(mfaManageErrorKey(error))}</Banner>}
 
       {!setup && !enabled && (
-        <Card options={{ padded: true }} className="flex flex-col gap-3">
+        <Section
+          testId="mfa-enable-intro"
+          actions={
+            <Button
+              variant="primary"
+              onClick={() => void startSetup()}
+              loading={busy}
+              disabled={busy}
+            >
+              {t("auth.mfa.enable.start")}
+            </Button>
+          }
+        >
           <span className="text-sm text-muted-foreground">{t("auth.mfa.enable.intro")}</span>
-          <Button
-            variant="primary"
-            onClick={() => void startSetup()}
-            loading={busy}
-            disabled={busy}
-          >
-            {t("auth.mfa.enable.start")}
-          </Button>
-        </Card>
+        </Section>
       )}
 
       {setup && (
-        <Card options={{ padded: true }} className="flex flex-col gap-4">
-          <div className="flex flex-col gap-2">
+        <Section
+          testId="mfa-enable-setup"
+          actions={
+            <>
+              <Button variant="secondary" onClick={() => setSetup(null)} disabled={busy}>
+                {t("auth.mfa.enable.cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                onClick={() => void confirmSetup()}
+                loading={busy}
+                disabled={busy || !acknowledged || code.length < 6}
+              >
+                {t("auth.mfa.enable.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
@@ -124,7 +146,7 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
             <span className="text-xs text-muted-foreground">
               {t("auth.mfa.enable.manualEntry")}
             </span>
-            <code className="block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
+            <code className="inline-block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
               {setup.secretParam}
             </code>
           </div>
@@ -159,21 +181,7 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
               autoComplete="one-time-code"
             />
           </Field>
-
-          <div className="flex justify-end gap-2">
-            <Button variant="secondary" onClick={() => setSetup(null)} disabled={busy}>
-              {t("auth.mfa.enable.cancel")}
-            </Button>
-            <Button
-              variant="primary"
-              onClick={() => void confirmSetup()}
-              loading={busy}
-              disabled={busy || !acknowledged || code.length < 6}
-            >
-              {t("auth.mfa.enable.confirm")}
-            </Button>
-          </div>
-        </Card>
+        </Section>
       )}
     </div>
   );

package/src/auth-mfa/web/mfa-error-keys.ts

@@ -0,0 +1,25 @@
+// @runtime client
+// Shared error-code → i18n-key mapping for the account-management write
+// handlers (enable-confirm/disable/regenerate-recovery) — distinct from
+// mfa-verify-screen.tsx's own mapper, which covers the login-challenge
+// error surface (challenge_expired/rate_limited) that these handlers never
+// return. Centralized so enable/disable/regenerate stay in sync instead of
+// each re-deriving the key ad hoc (enable-screen used to template-string
+// the raw snake_case code straight into the key, which never matched the
+// camelCase keys actually registered below).
+export function mfaManageErrorKey(code: string): string {
+  switch (code) {
+    case "invalid_totp_code":
+      return "auth.mfa.errors.invalidCode";
+    case "invalid_recovery_code":
+      return "auth.mfa.errors.invalidRecoveryCode";
+    case "mfa_already_enabled":
+      return "auth.mfa.errors.mfaAlreadyEnabled";
+    case "mfa_not_enabled":
+      return "auth.mfa.errors.mfaNotEnabled";
+    case "invalid_setup_token":
+      return "auth.mfa.errors.invalidSetupToken";
+    default:
+      return "auth.mfa.errors.verifyFailed";
+  }
+}

package/src/auth-mfa/web/mfa-recovery-codes-reveal.tsx

@@ -0,0 +1,53 @@
+// @runtime client
+// MfaRecoveryCodesReveal — one-time display of a fresh recovery-code set,
+// with an acknowledge-then-dismiss gate (same UX as the codes block in
+// MfaEnableScreen). Standalone so MfaRegenerateRecoveryDialog's caller can
+// render it after the dialog closes — the codes only exist in memory for
+// this one render, never persisted anywhere the app could show them again.
+
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+
+export type MfaRecoveryCodesRevealProps = {
+  readonly codes: readonly string[];
+  readonly onDismiss: () => void;
+};
+
+export function MfaRecoveryCodesReveal({
+  codes,
+  onDismiss,
+}: MfaRecoveryCodesRevealProps): ReactNode {
+  const t = useTranslation();
+  const { Button, Field, Input, Section } = usePrimitives();
+  const [acknowledged, setAcknowledged] = useState(false);
+
+  return (
+    <Section
+      testId="mfa-regenerate-reveal"
+      actions={
+        <Button variant="primary" onClick={onDismiss} disabled={!acknowledged}>
+          {t("auth.mfa.regenerate.done")}
+        </Button>
+      }
+    >
+      <div className="flex flex-col items-center gap-2 text-center">
+        <span className="text-sm font-semibold">{t("auth.mfa.regenerate.newCodesTitle")}</span>
+        <span className="text-xs text-muted-foreground">
+          {t("auth.mfa.regenerate.newCodesHint")}
+        </span>
+        <code className="inline-block whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm">
+          {codes.join("\n")}
+        </code>
+      </div>
+      <Field id="mfa-regenerate-ack" label={t("auth.mfa.regenerate.acknowledge")}>
+        <Input
+          kind="boolean"
+          id="mfa-regenerate-ack"
+          name="mfa-regenerate-ack"
+          value={acknowledged}
+          onChange={setAcknowledged}
+        />
+      </Field>
+    </Section>
+  );
+}

package/src/auth-mfa/web/mfa-regenerate-recovery-dialog.tsx

@@ -0,0 +1,69 @@
+// @runtime client
+// MfaRegenerateRecoveryDialog — confirm-with-code, then the caller reveals
+// the new codes. The reveal itself can't live inside this Dialog: Dialog
+// closes in a `finally` right after onConfirm resolves (see profile-screen.
+// tsx's delete-account dialog for the same constraint), so there's no way
+// to keep it open to show the result. onRegenerated hands the new codes to
+// the caller, which is expected to render them via MfaRecoveryCodesReveal
+// (or equivalent) once the dialog has closed.
+
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { AuthMfaHandlers } from "../constants";
+import { mfaManageErrorKey } from "./mfa-error-keys";
+
+export type MfaRegenerateRecoveryDialogProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onRegenerated: (codes: readonly string[]) => void;
+  readonly onError: (i18nKey: string) => void;
+};
+
+export function MfaRegenerateRecoveryDialog({
+  open,
+  onOpenChange,
+  onRegenerated,
+  onError,
+}: MfaRegenerateRecoveryDialogProps): ReactNode {
+  const t = useTranslation();
+  const { Dialog, Field, Input } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [code, setCode] = useState("");
+
+  const confirm = async (): Promise<void> => {
+    const res = await dispatcher.write<{ recoveryCodes: readonly string[] }>(
+      AuthMfaHandlers.regenerateRecovery,
+      { code },
+    );
+    setCode("");
+    if (!res.isSuccess) {
+      onError(mfaManageErrorKey(res.error.code));
+      return;
+    }
+    onRegenerated(res.data.recoveryCodes);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("auth.mfa.regenerate.title")}
+      description={t("auth.mfa.regenerate.description")}
+      confirmLabel={t("auth.mfa.regenerate.confirm")}
+      cancelLabel={t("auth.mfa.regenerate.cancel")}
+      onConfirm={confirm}
+      testId="mfa-regenerate-recovery-dialog"
+    >
+      <Field id="mfa-regenerate-code" label={t("auth.mfa.regenerate.code")} required>
+        <Input
+          kind="text"
+          id="mfa-regenerate-code"
+          name="mfa-regenerate-code"
+          value={code}
+          onChange={setCode}
+          autoComplete="one-time-code"
+        />
+      </Field>
+    </Dialog>
+  );
+}