caliper uidocs
DemoSign inGet Pro

MFA challenge

Pro

The second step of sign in: authenticator, text, passkey or recovery code, with a lockout that counts down after too many tries.

Installs components/ui/mfa-challenge.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/mfa-challenge
Caliper UI

Two-step verification

Signing in as dana@forma.studio. Open your authenticator app and enter the 6-digit code for this account.

0 of 6 digits.

Code 135790, recovery code K7Q2-M9XD. Three wrong codes lock it for 20 seconds.

When to use #

Use it for

  • The account has two-step sign-in turned on.
  • People need a way in when their phone is not to hand.

Skip it when

  • Setting two-step sign-in up; use security settings.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/mfa-challenge

Adds its 12 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { MfaChallenge } from "@/components/ui/mfa-challenge"

The worked example comes with Pro

The 66-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

MfaChallenge

component
PropTypeDefaultDescription
methods *readonly MfaMethod[]—
defaultMethodstring—The id of the method to start with. Defaults to the first.
accountstring—Who is signing in, e.g. their email.
lengthnumber6
trustDaysnumber | null30Offer "Trust this device" for this many days. `null` hides it.
resendAfternumber30Seconds before a text or email code can be sent again.
onVerify *(values: { method: MfaMethod; code: string; trustDevice: boolean; }) => MfaResult | Promise<MfaResult>—
onSend((method: MfaMethod) => MfaResult | Promise<MfaResult>)—Sends a code for text or email methods. Called when one is chosen and on resend.
onPasskey((values: { method: MfaMethod; trustDevice: boolean; }) => MfaResult | Promise<MfaResult>)—Runs the platform passkey prompt.
onCancel(() => void)—"Sign in as someone else".
classNamestring—

Accessibility #

It exposes list semantics, with aria-current, aria-hidden, aria-label, aria-busy and aria-invalid kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.