## Two-Factor Setup (S—216)

Set up an authenticator app in three steps: scan a code or copy the key, confirm a 6-digit code, then save backup codes.

- URL: https://sundaeui.dev/components/two-factor-setup
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/two-factor-setup.json`
- Tags: mfa, security, 2fa, backup-codes, totp, authenticator

Step one shows a scannable code and the secret key with copy. Step two checks a code from the app, with a clear error on a mismatch.
Step three lists backup codes to copy or download and asks you to confirm you saved them before finishing.

### Usage

```tsx
import { TwoFactorSetup } from '@/components/sundae/two-factor-setup'

<TwoFactorSetup />
```

### Props

- `secret` (`string`, required): Base32 secret.
- `verify` (`(code: string) => boolean | Promise<boolean>`, required): Check a code.
- `backupCodes` (`string[]`, required): Recovery codes.
- `onDone` (`() => void`): Finished.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Account security settings, admin onboarding.

### When not to use

- SMS-only verification flows.

### Accessibility

- Steps are announced with “Step 2 of 3”. The code input uses one-time-code autocomplete.
- Errors are linked to the input with aria-describedby.
- Reduced motion removes the movement and keeps every state change.