Two Factor Form

The second step of sign in: a code that submits itself when complete, a switch to a backup code, and an optional resend with a cooldown.

import { TwoFactorForm } from "pleate/auth/two-factor-form";

Verify a sign in

Code 123456, or backup code plate-2026.

Enter the code from your authenticator app.

onSubmit

Throw to show the error and clear the boxes.

({ code, method: "otp" | "backup" }) => void | Promise

length / autoSubmit

Code length; submit on the last box.

number / booleandefault 6 / true

allowBackupCode

Offer the backup code switch.

booleandefault true

onResend / resendCooldown

"Send a new code" for SMS or email codes.

() => void | Promise / secondsdefault none / 30

loading / error / fieldErrors

Busy button, a banner above the fields, and server messages per field (they replace the client ones).

boolean / string / Partial<Record<field, string>>

labels

Every visible string, for your wording or translation.

object