A three-step authenticator setup: a scannable-looking code grid that ripples in with a scan line and a copyable setup key, a code check beside a ring synced to the 30-second window, and blurred backup codes that must be revealed and confirmed as stored before finishing.
Open your authenticator app, tap add account and point the camera at the code. It links Northwind to maya.chen@northwind.io.
JBSW Y3DP EHPK 3PXP NW4Q K7ZLnpx shadcn@latest add https://hyperblur.dev/r/auth-flow-two-factor-setup.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-two-factor-setup.tsx.
import { AuthFlowTwoFactorSetup } from "@/components/hyperblur/auth-flow-two-factor-setup"
<AuthFlowTwoFactorSetup secret={totp.secret} backupCodes={totp.codes} onVerify={async (code) => api.confirmTotp(code)} />| Prop | Type | Default | Description |
|---|---|---|---|
| issuer | string | "Northwind" | Product name shown in copy and used in the backup file name. |
| account | string | "maya.chen@northwind.io" | Account being protected. |
| secret | string | "JBSWY3DPEHPK3PXPNW4QK7ZL" | Setup key shown in groups of four. It also seeds the decorative code grid; render a real QR from your otpauth URL if you need one. |
| backupCodes | string[] | 10 codes | One-time recovery codes for the last step. |
| defaultStep | number | 0 | Starting step: 0 scan, 1 verify, 2 backup codes, 3 done. |
| onVerify | (code: string) => boolean | void | Promise<boolean | void> | Checks the 6-digit code. Return or resolve false to reject it. | |
| onComplete | () => void | Called when the user confirms the codes are stored and finishes. | |
| onStepChange | (step: number) => void | Called whenever the step changes. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of the title. |
| accent | string | "#818cf8" | Steps, buttons, scan line and ring color. |