# Two-factor verification

> Authenticator code with resend timer, backup-code fallback and success state.

Block · Free · https://lodeui.com/blocks/two-factor

## When to use

- Second step after sign-in or before sensitive actions.

## When not to use

- Enrolment (showing the QR code).

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/two-factor.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TwoFactor } from "@/components/blocks/two-factor";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <TwoFactor />
    </main>
  );
}
```

Built from: Button, OTP input

## API reference

### TwoFactor

Two-factor verification with auto-submit on six digits, a resend timer, backup code fallback and a success state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| 0–9 | Enter the code |
| ⌘V / Ctrl+V | Paste the whole code |
| Tab | Reach resend and backup code |

## Accessibility

- One-time-code autocomplete; errors use role="alert".

## Motion

- Wrong codes shake; success crossfades in.

## Responsive behavior

- Fits 320px.

## Performance

- A one-second timeout drives the resend countdown.

## Notes for AI

- Verify on the server. The demo accepts 424242, or the backup code ABCD-EFGH; anything else shows the error.

## Related

- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [OTP input](https://lodeui.com/components/otp-input) — One-time code boxes that handle paste and autofill, and shake on a wrong code.