A two-step verification screen with method radio cards for authenticator app, text message and security key, a step tracker, and a second step that shows the matching code input or key prompt.
Your Atlas workspace requires two-step verification. Choose how you want to receive your code this time.
npx shadcn@latest add https://hyperblur.dev/r/login-two-factor-choice.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/login-two-factor-choice.tsx.
import { LoginTwoFactorChoice } from "@/components/hyperblur/login-two-factor-choice"
<LoginTwoFactorChoice phone="+1 ••• ••• 7710" onSubmit={({ method, code }) => verify(method, code)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Confirm it's you" | Heading. |
| subtitle | string | "Your Atlas workspace requires two-step verification..." | Text under the heading. |
| phone | string | "+1 ••• ••• 0142" | Masked phone number for the text message method. |
| keyName | string | "YubiKey 5C" | Name of the registered security key. |
| defaultMethod | "app" | "sms" | "key" | "app" | Initially selected method. |
| defaultStep | 1 | 2 | 1 | Start on the method list or directly on the verify step. |
| methods | ("app" | "sms" | "key")[] | ["app", "sms", "key"] | Methods to offer, in order. |
| onMethodChange | (method: "app" | "sms" | "key") => void | Called when a method card is selected. | |
| onSubmit | (values: { method: "app" | "sms" | "key"; code: string }) => boolean | void | Promise<boolean | void> | Called to verify. The code is empty for the security key. Return false to show an error. | |
| recovery | { label: string; href: string } | { label: "Use a recovery code", href: "#recovery" } | Fallback link under the method list. |
| accent | string | "#f59e0b" | Accent color for buttons, focus rings and highlights. |