Skip to content

[FE-27] Build 2FA Setup Wizard with QR code display and OTP verification step #1006

@devwums

Description

@devwums

Problem

The 2FA setup flow presents users with a raw QR code and no instructions. There is no multi-step guide to help users scan and verify their authenticator app.

Proposed Solution

Create frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.tsx — a 3-step wizard. Step 1: intro and "Begin Setup" button. Step 2: QR code image + manual key with a CopyButton. Step 3: 6-digit OTP input for verification. Props: qrCodeUrl: string, manualKey: string, onVerify: (code: string) => Promise<boolean>, onComplete: () => void. All implementation must live inside frontend/cntr/.

Acceptance Criteria

  • File at frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.tsx
  • Three distinct steps with Back/Next navigation
  • Step 2 renders QR code as <img src={qrCodeUrl} alt="Scan with your authenticator app">
  • Step 2 includes a CopyButton for the manualKey (reuse from frontend/cntr/CopyButton/)
  • Step 3 OTP input accepts exactly 6 digits
  • Step 3 shows an error message when onVerify returns false
  • Test in frontend/cntr/TwoFactorSetup/TwoFactorSetupWizard.test.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions