Two-Factor Setup

name: "Two-Factor Setup"
short_description: A 2FA enable flow with a QR code, manual secret, and code verification.
long_visual_description: >
  A step in a 2FA setup with a QR-code placeholder, a manual secret, and a 6-cell code input,
  plus a verify-and-enable button.

use_cases:
  - Enable 2FA.
  - Authenticator app setup.
  - MFA enrollment.
  - Security setup step.
  - TOTP setup.

recommended_for:
  - A 2FA authenticator-app setup step.
avoid_for:
  - Just entering a code (use otp-input).

markets:
  - Global

example_usage: >
  Provide an otpauth:// URI; the QR renders from it as a real image (via qrcode) and the
  manual secret is derived from it. Updating otpauth re-renders both. The code cells
  auto-advance and verify enables 2FA.

props:
  step_label: The step indicator.
  title: The step title.
  instruction: The setup instruction.
  otpauth: The otpauth:// URI the QR encodes (drives the QR image and manual secret).
  secret: The manual-entry secret (auto-filled from otpauth when present).
  cells: The verification code cells.

example_prompts:
  - "Add a 2FA authenticator setup step with QR and code."
  - "Add an MFA enrollment screen."

lifecycle: experimental
content_model: A 2FA setup step with QR and code verification.

theming:
  tokens_used:
    - --color-surface
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-primary-contrast
    - --color-border
    - --color-ring
    - --radius-card
    - --radius-control
    - --radius-button
    - --shadow-card
    - --font-heading
    - --space-section
    - --duration-token

editorial_guidance: >
  Provide the manual secret as a fallback to the QR; the QR is a placeholder for a real code.

categorization:
  category: Auth
  subcategory: Security
  atomic_type: organism
  usage_type: [form]
  maturity: ai-generated
  wcag:
    level: AA
    notes: The QR has an accessible label; the secret is real text; the code cells are grouped with labels and auto-advance.
  keyboard_support: Code cells auto-advance and are keyboard-operable; verify is a real button.
  seo_score: 25
  text_direction: both