Two-Factor Code Field

Reusable six-digit TOTP input used across sign-in, enable/disable 2FA, and admin gates. Built on coss OTPField with Field label, description, and error wiring.

Copyimport { TwoFactorCodeField } from "@components/auth/two-factor-code-field";

Ownership

App — not @coss/ui/shared. Lives under apps/web/components/auth because it is auth-flow UI: i18n for per-slot aria labels (otp_character_position), fixed length/numeric validation for Cal 2FA, and call sites that are web-only (login, settings modals, admin data gate). Reuse the App import; do not relocate for docs.

Example

Use the App component directly. The production settings flow clears server errors while the value changes and submits as soon as all six digits are present:

Copy<TwoFactorCodeField
  id="enable-2fa-totp-code"
  name="totpCode"
  label={t("2fa_code")}
  description={t("2fa_enabled_instructions")}
  errorMessage={errorMessage}
  errorTestId="error-submitting-code"
  autoFocus
  value={totpCode}
  onValueChange={(value) => {
    if (errorMessage) setErrorMessage(null);
    setTotpCode(value);
  }}
  onValueComplete={(value) => void handleTotpSubmit(undefined, value)}
/>

This is the canonical composition from EnableTwoFactorModal. Keep OTP slot rendering, numeric validation, and localized accessibility labels inside TwoFactorCodeField; do not recreate them at the call site or in documentation.

API

Also exports TWO_FACTOR_CODE_LENGTH (6).

Accessibility

• Root OTPField has aria-label from label, autoComplete="one-time-code", inputMode="numeric", validationType="numeric".
• Slot 0 uses the field label; slots 1–5 use otp_character_position with position/length.
• Errors set aria-invalid on each slot and render FieldError.

Call sites

Example URLs

Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.

Source

apps/web/components/auth/two-factor-code-field.tsx