@cosmicdrift/kumiko-samples 0.387.0 → 0.389.0

package/packages/bundled-features/src/auth-email-password/web/forgot-password-screen.tsx

@@ -12,6 +12,8 @@ import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { requestPasswordReset } from "./auth-client.ts";
 import { AuthCard } from "./auth-form-primitives.tsx";
+import { readReturnToFromWindow } from "./auth-redirect.ts";
+import { isSafeReturnPath } from "./return-path.ts";
 
 export type ForgotPasswordScreenProps = {
   readonly title?: string;
@@ -19,12 +21,20 @@ export type ForgotPasswordScreenProps = {
   /** href for the "Back to login" link in the success and form states. App-
    * specific — defaults to "/login". */
   readonly loginHref?: string;
+  /** Page the reset mail should lead back to after the new password is set; defaults to the
+   *  `returnTo` query parameter of this page. Unsafe values are dropped. */
+  readonly returnTo?: string;
 };
 
+function resolveReturnTo(prop: string | undefined): string | undefined {
+  return (isSafeReturnPath(prop) ? prop : readReturnToFromWindow()) ?? undefined;
+}
+
 export function ForgotPasswordScreen({
   title,
   subtitle,
   loginHref = "/login",
+  returnTo,
 }: ForgotPasswordScreenProps): ReactNode {
   const t = useTranslation();
   const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
@@ -38,7 +48,7 @@ export function ForgotPasswordScreen({
     setSubmitting(true);
     setError(null);
     try {
-      const res = await requestPasswordReset(email);
+      const res = await requestPasswordReset(email, resolveReturnTo(returnTo));
       if (res.ok) {
         setDone(true);
       } else if (res.error.reason === "rate_limited") {

package/packages/bundled-features/src/auth-email-password/web/index.ts

@@ -63,6 +63,11 @@ export type { RequestAccountUnlockScreenProps } from "./request-account-unlock-s
 export { RequestAccountUnlockScreen } from "./request-account-unlock-screen.tsx";
 export type { ResetPasswordScreenProps } from "./reset-password-screen.tsx";
 export { ResetPasswordScreen } from "./reset-password-screen.tsx";
+export {
+  isSafeReturnPath,
+  RETURN_TO_QUERY_PARAM,
+  readReturnToFromSearch,
+} from "./return-path.ts";
 export type {
   SessionApi,
   SessionBootstrapFailure,

package/packages/bundled-features/src/auth-email-password/web/login-screen.tsx

@@ -2,6 +2,8 @@
 // reason code needs a bundle entry plus a line in that mapping.
 
 import {
+  prependBasePath,
+  useBasePath,
   useOptionalDispatcher,
   usePrimitives,
   useQuery,
@@ -15,7 +17,11 @@ import {
 } from "./auth-client.ts";
 import { AuthCard } from "./auth-form-primitives.tsx";
 import { DEFAULT_AUTH_PATHS, DEFAULT_FORGOT_PASSWORD_PATH } from "./auth-paths.ts";
-import { followNextOrLandingAfterLogin } from "./auth-redirect.ts";
+import {
+  appendReturnTo,
+  followNextOrLandingAfterLogin,
+  readNextFromWindow,
+} from "./auth-redirect.ts";
 import { AuthQueries } from "./constants.ts";
 import { useSession } from "./session.tsx";
 
@@ -128,16 +134,21 @@ function LoginScreenBody({
   // Hides the resend button once the email input changes; otherwise resend
   // would silently go to the edited, possibly mistyped address.
   const [failedLoginEmail, setFailedLoginEmail] = useState<string | null>(null);
+  const basePath = useBasePath();
+  // The page the user was sent away from rides along so the reset or signup mail leads back to it.
+  const returnTo = readNextFromWindow();
   const effectiveForgotHref =
     forgotPasswordHref === undefined
       ? loginOptions?.passwordReset === true
-        ? DEFAULT_FORGOT_PASSWORD_PATH
+        ? appendReturnTo(prependBasePath(DEFAULT_FORGOT_PASSWORD_PATH, basePath), returnTo)
         : null
-      : forgotPasswordHref;
+      : forgotPasswordHref === null
+        ? null
+        : appendReturnTo(forgotPasswordHref, returnTo);
   const effectiveUnlockHref =
     unlockAccountHref === undefined
       ? loginOptions?.accountUnlock === true
-        ? DEFAULT_AUTH_PATHS.unlockAccount
+        ? prependBasePath(DEFAULT_AUTH_PATHS.unlockAccount, basePath)
         : null
       : unlockAccountHref;
 
@@ -281,7 +292,7 @@ function LoginScreenBody({
         </Link>
       )}
       {signupHref !== undefined && (
-        <Link href={signupHref} variant="muted" className="self-center">
+        <Link href={appendReturnTo(signupHref, returnTo)} variant="muted" className="self-center">
           {t("auth.signup.title")}
         </Link>
       )}

package/packages/bundled-features/src/auth-email-password/web/reset-password-screen.tsx

@@ -13,6 +13,7 @@ import { type FormEvent, type ReactNode, useState } from "react";
 import { resetPassword } from "./auth-client.ts";
 import { passwordPairIssue } from "./auth-form-logic.ts";
 import { AuthCard, useUrlToken } from "./auth-form-primitives.tsx";
+import { buildLoginRedirectUrl, readReturnToFromWindow } from "./auth-redirect.ts";
 
 export type ResetPasswordScreenProps = {
   readonly title?: string;
@@ -37,6 +38,7 @@ export function ResetPasswordScreen({
   const [submitting, setSubmitting] = useState(false);
   const [done, setDone] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [afterResetHref, setAfterResetHref] = useState(loginHref);
 
   const doSubmit = async (): Promise<void> => {
     setError(null);
@@ -53,6 +55,10 @@ export function ResetPasswordScreen({
     const res = await resetPassword(token, newPassword);
     setSubmitting(false);
     if (res.ok) {
+      const returnTo = readReturnToFromWindow();
+      if (returnTo !== null) {
+        setAfterResetHref(buildLoginRedirectUrl(loginHref, returnTo, window.location.origin));
+      }
       setDone(true);
       return;
     }
@@ -97,7 +103,7 @@ export function ResetPasswordScreen({
             <p className="font-medium text-foreground">{t("auth.resetPassword.successTitle")}</p>
             <p className="mt-1">{t("auth.resetPassword.successBody")}</p>
           </Banner>
-          <Link href={loginHref} variant="button">
+          <Link href={afterResetHref} variant="button">
             {t("auth.resetPassword.goToLogin")}
           </Link>
         </>

package/packages/bundled-features/src/auth-email-password/web/return-path.ts

@@ -0,0 +1,35 @@
+// Shared by the server (mail link) and the web pages (landing page), so it is plain string logic:
+// no DOM, no window, no `new URL` (React Native's URL getters throw).
+
+export const RETURN_TO_QUERY_PARAM = "returnTo";
+export const MAX_RETURN_PATH_LENGTH = 2048;
+
+const DOT_SEGMENTS = new Set([".", "..", ".%2e", "%2e.", "%2e%2e", "%2e"]);
+
+function hasForbiddenCharacter(candidate: string): boolean {
+  for (let i = 0; i < candidate.length; i++) {
+    const code = candidate.charCodeAt(i);
+    if (code <= 0x20 || code === 0x7f || (code >= 0x80 && code <= 0x9f)) return true;
+    if (code === 0x5c) return true;
+  }
+  return false;
+}
+
+// A dot segment is resolved by URL normalization, so "/.//evil" would become "//evil".
+function hasDotSegment(candidate: string): boolean {
+  const pathEnd = candidate.search(/[?#]/);
+  const path = pathEnd === -1 ? candidate : candidate.slice(0, pathEnd);
+  return path.split("/").some((segment) => DOT_SEGMENTS.has(segment.toLowerCase()));
+}
+
+export function isSafeReturnPath(candidate: unknown): candidate is string {
+  if (typeof candidate !== "string") return false;
+  if (candidate.length < 1 || candidate.length > MAX_RETURN_PATH_LENGTH) return false;
+  if (!candidate.startsWith("/") || candidate[1] === "/") return false;
+  return !hasForbiddenCharacter(candidate) && !hasDotSegment(candidate);
+}
+
+export function readReturnToFromSearch(search: string): string | null {
+  const candidate = new URLSearchParams(search).get(RETURN_TO_QUERY_PARAM);
+  return isSafeReturnPath(candidate) ? candidate : null;
+}

package/packages/bundled-features/src/auth-email-password/web/session.tsx

@@ -14,6 +14,7 @@ import {
   useSessionEndedSignal,
 } from "@cosmicdrift/kumiko-renderer";
 import { readCsrfToken } from "@cosmicdrift/kumiko-renderer/live";
+import { clearRememberedListState } from "@cosmicdrift/kumiko-renderer/web";
 import {
   createContext,
   type ReactNode,
@@ -216,6 +217,8 @@ export function SessionProvider({
 
   const logout = useCallback<SessionApi["logout"]>(async () => {
     await logoutApi();
+    // The reload below would hide the identity change from the list-state boot.
+    clearRememberedListState();
     if (postLogoutUrl !== undefined && typeof window !== "undefined") {
       // State stays untouched: flipping to unauthenticated would let an AuthGate
       // with loginUrl race this navigation to its own redirect.
@@ -251,6 +254,7 @@ export function SessionProvider({
   const userEmail = profile?.email;
   const userDisplayName = profile?.displayName;
   const userTimeZone = profile?.effectiveTimeZone;
+  const activeTenantId = state.activeTenantId ?? undefined;
   const currentUser = useMemo<CurrentUser | undefined>(
     () =>
       userId === undefined || userEmail === undefined || userDisplayName === undefined
@@ -260,8 +264,9 @@ export function SessionProvider({
             email: userEmail,
             displayName: userDisplayName,
             ...(userTimeZone !== undefined && { timeZone: userTimeZone }),
+            ...(activeTenantId !== undefined && { tenantId: activeTenantId }),
           },
-    [userId, userEmail, userDisplayName, userTimeZone],
+    [userId, userEmail, userDisplayName, userTimeZone, activeTenantId],
   );
   return (
     <SessionContext.Provider value={api}>

package/packages/bundled-features/src/auth-email-password/web/signup-complete-screen.tsx

@@ -21,7 +21,7 @@ import { type FormEvent, type ReactNode, useState } from "react";
 import { confirmSignup, type SignupConfirmSuccess } from "./auth-client.ts";
 import { passwordPairIssue, resolvePostAuthHref } from "./auth-form-logic.ts";
 import { AuthCard, useUrlToken } from "./auth-form-primitives.tsx";
-import { buildLoginRedirectUrl } from "./auth-redirect.ts";
+import { buildLoginRedirectUrl, readReturnToFromWindow } from "./auth-redirect.ts";
 
 export type SignupCompleteScreenProps = {
   readonly title?: string;
@@ -74,15 +74,23 @@ export function SignupCompleteScreen({
     const res = await confirmSignup(token, password);
     setSubmitting(false);
     if (res.ok) {
+      // The page the signup started from beats the server's landing path.
+      const returnTo = readReturnToFromWindow();
       if (res.data.kind === "mfa-pending") {
         setMfaPending(true);
+        const next = returnTo ?? res.data.landingPath;
         setContinueHref(
-          res.data.landingPath === undefined
+          next === undefined
             ? loginHref
-            : buildLoginRedirectUrl(loginHref, res.data.landingPath, window.location.origin),
+            : buildLoginRedirectUrl(loginHref, next, window.location.origin),
         );
         return;
       }
+      // A claimed handover keeps its app-defined target.
+      if (returnTo !== null && res.data.handover === undefined) {
+        setContinueHref(returnTo);
+        return;
+      }
       // Cookies are already set (auto-login). Show a confirmation with an
       // explicit continue button instead of navigating away silently —
       // the user otherwise gets no signal that activation worked.

package/packages/bundled-features/src/auth-email-password/web/signup-screen.tsx

@@ -16,6 +16,8 @@ import { type FormEvent, type ReactNode, useState } from "react";
 import { requestSignup } from "./auth-client.ts";
 import { retryAfterMinutes } from "./auth-form-logic.ts";
 import { AuthCard } from "./auth-form-primitives.tsx";
+import { readReturnToFromWindow } from "./auth-redirect.ts";
+import { isSafeReturnPath } from "./return-path.ts";
 
 export type SignupScreenProps = {
   readonly title?: string;
@@ -23,12 +25,20 @@ export type SignupScreenProps = {
   /** href for the "Already have an account?" link. App-specific; defaults to
    *  "/login". */
   readonly loginHref?: string;
+  /** Page the activation mail should lead to after signup; defaults to the `returnTo` query
+   *  parameter of this page. Unsafe values are dropped. */
+  readonly returnTo?: string;
 };
 
+function resolveReturnTo(prop: string | undefined): string | undefined {
+  return (isSafeReturnPath(prop) ? prop : readReturnToFromWindow()) ?? undefined;
+}
+
 export function SignupScreen({
   title,
   subtitle,
   loginHref = "/login",
+  returnTo,
 }: SignupScreenProps): ReactNode {
   const t = useTranslation();
   const { Form, Field, Input, Button, Banner, Link } = usePrimitives();
@@ -41,7 +51,7 @@ export function SignupScreen({
     setSubmitting(true);
     setError(null);
     try {
-      const res = await requestSignup(email);
+      const res = await requestSignup(email, undefined, resolveReturnTo(returnTo));
       if (res.ok) {
         setDone(true);
       } else if (res.error.reason === "rate_limited") {
@@ -73,7 +83,7 @@ export function SignupScreen({
     setSubmitting(true);
     setError(null);
     try {
-      await requestSignup(email);
+      await requestSignup(email, undefined, resolveReturnTo(returnTo));
     } finally {
       setSubmitting(false);
     }

package/packages/bundled-features/src/auth-mfa/changes.json

@@ -1,4 +1,16 @@
 [
+  {
+    "version": "0.389.0",
+    "type": "improvement",
+    "title": "requiredPolicy \"systemAdmins\"",
+    "detail": "The new auth-mfa:config:required value systemAdmins (between optional and admins) forces MFA enrollment only for users whose merged global and tenant roles contain SystemAdmin. TenantAdmins and other roles log in as before; enrolled users are always challenged regardless of policy. No locale labels are involved, the option list has none."
+  },
+  {
+    "version": "0.388.0",
+    "type": "improvement",
+    "title": "Six-cell code input, autofocus, auto-submit and recovery switch",
+    "detail": "The MFA login, setup, disable and regenerate screens use the six-cell code input with autofocus. Login and setup submit automatically on the sixth digit; disable and regenerate keep the explicit confirm button. Verify, disable and regenerate can switch to a recovery-code field. New keys auth.mfa.verify.useRecoveryCode, useAuthenticatorCode, recoveryCode and recoverySubtitle in all locale packages; auth.mfa.disable.code now names the authenticator code only."
+  },
   {
     "version": "0.379.0",
     "type": "fix",

package/packages/bundled-features/src/auth-mfa/config.ts

@@ -2,19 +2,15 @@
 // they haven't opted in themselves? Default "optional" means the feature
 // is fully opt-in (existing tenants/users unaffected — no migration step).
 //
-// ponytail: "admins"/"all" HARD-BLOCK login for an unenrolled user (see
-// mfa-status-checker.ts's setupRequired branch) — there is no in-band way
-// for a blocked user to complete enrollment yet (that flow ships in PR3's
-// UI). Flipping this away from "optional" before PR3 locks out every
-// unenrolled matching user with no recovery path. Fine for a tenant that
-// enrolls its admins out-of-band first; a footgun otherwise.
+// Every non-optional policy blocks login for an unenrolled matching user until
+// they finish the pre-auth enrollment step (mfa-status-checker.ts setupRequired).
 import {
   access,
   type ConfigKeyHandle,
   createTenantConfig,
 } from "@cosmicdrift/kumiko-framework/engine";
 
-export const MFA_REQUIRED_POLICIES = ["optional", "admins", "all"] as const;
+export const MFA_REQUIRED_POLICIES = ["optional", "systemAdmins", "admins", "all"] as const;
 export type MfaRequiredPolicy = (typeof MFA_REQUIRED_POLICIES)[number];
 
 export const mfaRequiredConfigHandle: ConfigKeyHandle<"select"> = {

package/packages/bundled-features/src/auth-mfa/feature-exports.ts

@@ -8,7 +8,7 @@ import type { MfaTokenSecretsEnv } from "./token-secrets.ts";
 
 export type BindMfaRevokeAllOtherSessions = (
   revoker: (userId: string, currentSid: string | undefined) => Promise<number>,
-) => void;
+) => () => void;
 
 // Reads the late-bind setter off a mounted auth-mfa feature's exports —
 // mirrors sessions' own bindAutoRevokeFromFeature. run{Prod,Dev}App call
@@ -79,7 +79,7 @@ export function bindMfaTokenSecretsFromFeature(
   return undefined;
 }
 
-export type BindRevokeAllPatTokens = (revoker: (userId: string) => Promise<number>) => void;
+export type BindRevokeAllPatTokens = (revoker: (userId: string) => Promise<number>) => () => void;
 
 // Reads the late-bind setter off a mounted auth-mfa feature's exports —
 // run{Prod,Dev}App call this once the personal-access-tokens feature (if

package/packages/bundled-features/src/auth-mfa/feature.ts

@@ -220,10 +220,16 @@ export function createAuthMfaFeature(
 
     const bindRevokeAllOtherSessions: BindMfaRevokeAllOtherSessions = (revoker) => {
       revokeAllOtherSessions = revoker;
+      return () => {
+        if (revokeAllOtherSessions === revoker) revokeAllOtherSessions = undefined;
+      };
     };
 
     const bindRevokeAllPatTokens: BindRevokeAllPatTokens = (revoker) => {
       revokeAllPatTokens = revoker;
+      return () => {
+        if (revokeAllPatTokens === revoker) revokeAllPatTokens = undefined;
+      };
     };
 
     return {

package/packages/bundled-features/src/auth-mfa/mfa-status-checker.ts

@@ -1,3 +1,4 @@
+import { ROLES } from "@cosmicdrift/kumiko-framework/auth";
 import { createTenantDb } from "@cosmicdrift/kumiko-framework/db";
 import {
   access,
@@ -31,8 +32,8 @@ export type MfaStatusChecker = (
   ctx: HandlerContext,
   userId: string,
   tenantId: TenantId,
-  // Merged global+tenant roles — needed to evaluate the "admins" policy
-  // value. Must be the MERGED set (see login.write.ts caller): a
+  // Merged global+tenant roles — needed to evaluate the "admins" and "systemAdmins"
+  // policies. Must be the MERGED set (see login.write.ts caller): a
   // SystemAdmin whose admin-ness lives only in global roles would be
   // missed if the caller passed tenant-membership roles alone.
   roles: readonly string[],
@@ -84,9 +85,11 @@ export function createMfaStatusChecker(opts: {
         opts.challengeTokenSecret,
       ).token;
     if (policy === "all") return { setupRequired: true, preauthSetupToken: buildSetupToken() };
-    // policy === "admins"
-    const isAdmin = roles.some((role) => access.admin.includes(role));
-    return isAdmin
+    const isEnforced =
+      policy === "systemAdmins"
+        ? roles.includes(ROLES.SystemAdmin)
+        : roles.some((role) => access.admin.includes(role));
+    return isEnforced
       ? { setupRequired: true, preauthSetupToken: buildSetupToken() }
       : { required: false };
   };

package/packages/bundled-features/src/auth-mfa/web/i18n.ts

@@ -13,6 +13,11 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.verify.submit": "Verify",
     "auth.mfa.verify.submitting": "…",
     "auth.mfa.verify.backToLogin": "Back to login",
+    "auth.mfa.verify.recoveryCode": "Recovery code",
+    "auth.mfa.verify.recoverySubtitle":
+      "Enter one of the recovery codes you saved when you set up two-factor authentication.",
+    "auth.mfa.verify.useAuthenticatorCode": "Use the code from your app",
+    "auth.mfa.verify.useRecoveryCode": "Use a recovery code instead",
     "auth.mfa.errors.invalidCode": "Invalid code. Please try again.",
     "auth.mfa.errors.invalidTotpCode": "Invalid code. Please try again.",
     "auth.mfa.errors.invalidChallengeToken": "Your sign-in has expired. Please sign in again.",
@@ -43,7 +48,7 @@ export const defaultTranslations: TranslationsByLocale = {
     "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.code": "Code from your authenticator app",
     "auth.mfa.disable.confirm": "Disable",
     "auth.mfa.disable.cancel": "Cancel",
     "auth.mfa.disable.trigger": "Disable two-factor authentication",

package/packages/bundled-features/src/auth-mfa/web/mfa-code-or-recovery-field.tsx

@@ -0,0 +1,68 @@
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export type MfaCodeOrRecoveryFieldProps = {
+  readonly id: string;
+  readonly codeLabel: string;
+  readonly code: string;
+  readonly onCodeChange: (code: string) => void;
+  readonly useRecovery: boolean;
+  readonly onUseRecoveryChange: (useRecovery: boolean) => void;
+  readonly disabled?: boolean;
+};
+
+export function MfaCodeOrRecoveryField({
+  id,
+  codeLabel,
+  code,
+  onCodeChange,
+  useRecovery,
+  onUseRecoveryChange,
+  disabled,
+}: MfaCodeOrRecoveryFieldProps): ReactNode {
+  const t = useTranslation();
+  const { Button, Field, Input } = usePrimitives();
+
+  return (
+    <>
+      <Field id={id} label={useRecovery ? t("auth.mfa.verify.recoveryCode") : codeLabel} required>
+        {useRecovery ? (
+          <Input
+            kind="text"
+            id={id}
+            name={id}
+            value={code}
+            onChange={onCodeChange}
+            disabled={disabled}
+            autoFocus
+            autoComplete="off"
+          />
+        ) : (
+          <Input
+            kind="code"
+            length={6}
+            id={id}
+            name={id}
+            value={code}
+            onChange={onCodeChange}
+            disabled={disabled}
+            autoFocus
+          />
+        )}
+      </Field>
+      <Button
+        type="button"
+        variant="link"
+        disabled={disabled}
+        onClick={() => {
+          onUseRecoveryChange(!useRecovery);
+          onCodeChange("");
+        }}
+      >
+        {useRecovery
+          ? t("auth.mfa.verify.useAuthenticatorCode")
+          : t("auth.mfa.verify.useRecoveryCode")}
+      </Button>
+    </>
+  );
+}

package/packages/bundled-features/src/auth-mfa/web/mfa-disable-dialog.tsx

@@ -12,6 +12,7 @@
 import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { AuthMfaHandlers } from "./constants.ts";
+import { MfaCodeOrRecoveryField } from "./mfa-code-or-recovery-field.tsx";
 
 export type MfaDisableDialogProps = {
   readonly open: boolean;
@@ -28,13 +29,24 @@ export function MfaDisableDialog({
   onError,
 }: MfaDisableDialogProps): ReactNode {
   const t = useTranslation();
-  const { Dialog, Field, Input } = usePrimitives();
+  const { Dialog } = usePrimitives();
   const dispatcher = useDispatcher();
   const [code, setCode] = useState("");
+  const [useRecovery, setUseRecovery] = useState(false);
+
+  const reset = (): void => {
+    setCode("");
+    setUseRecovery(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean): void => {
+    if (!nextOpen) reset();
+    onOpenChange(nextOpen);
+  };
 
   const confirm = async (): Promise<void> => {
     const res = await dispatcher.write<{ disabled: boolean }>(AuthMfaHandlers.disable, { code });
-    setCode("");
+    reset();
     if (!res.isSuccess) {
       onError(res.error.i18nKey);
       return;
@@ -45,7 +57,7 @@ export function MfaDisableDialog({
   return (
     <Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
       variant="danger"
       title={t("auth.mfa.disable.title")}
       description={t("auth.mfa.disable.description")}
@@ -54,16 +66,14 @@ export function MfaDisableDialog({
       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>
+      <MfaCodeOrRecoveryField
+        id="mfa-disable-code"
+        codeLabel={t("auth.mfa.disable.code")}
+        code={code}
+        onCodeChange={setCode}
+        useRecovery={useRecovery}
+        onUseRecoveryChange={setUseRecovery}
+      />
     </Dialog>
   );
 }

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

@@ -9,6 +9,7 @@
 import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { AuthMfaHandlers } from "./constants.ts";
+import { MfaCodeOrRecoveryField } from "./mfa-code-or-recovery-field.tsx";
 
 export type MfaRegenerateRecoveryDialogProps = {
   readonly open: boolean;
@@ -25,16 +26,27 @@ export function MfaRegenerateRecoveryDialog({
   onError,
 }: MfaRegenerateRecoveryDialogProps): ReactNode {
   const t = useTranslation();
-  const { Dialog, Field, Input } = usePrimitives();
+  const { Dialog } = usePrimitives();
   const dispatcher = useDispatcher();
   const [code, setCode] = useState("");
+  const [useRecovery, setUseRecovery] = useState(false);
+
+  const reset = (): void => {
+    setCode("");
+    setUseRecovery(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean): void => {
+    if (!nextOpen) reset();
+    onOpenChange(nextOpen);
+  };
 
   const confirm = async (): Promise<void> => {
     const res = await dispatcher.write<{ recoveryCodes: readonly string[] }>(
       AuthMfaHandlers.regenerateRecovery,
       { code },
     );
-    setCode("");
+    reset();
     if (!res.isSuccess) {
       onError(res.error.i18nKey);
       return;
@@ -45,7 +57,7 @@ export function MfaRegenerateRecoveryDialog({
   return (
     <Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
       title={t("auth.mfa.regenerate.title")}
       description={t("auth.mfa.regenerate.description")}
       confirmLabel={t("auth.mfa.regenerate.confirm")}
@@ -53,16 +65,14 @@ export function MfaRegenerateRecoveryDialog({
       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>
+      <MfaCodeOrRecoveryField
+        id="mfa-regenerate-code"
+        codeLabel={t("auth.mfa.regenerate.code")}
+        code={code}
+        onCodeChange={setCode}
+        useRecovery={useRecovery}
+        onUseRecoveryChange={setUseRecovery}
+      />
     </Dialog>
   );
 }