Two Factor Setup

Forms · TwoFactorSetup

Turning on two-factor sign-in: scan, confirm with a code, save recovery codes.

Props: qr (node: render the otpauth URI with your QR library), secret, onVerify(code) (return or resolve true/false), codes (recovery codes), onDownload, onDone, step, scanText, codesText.

The last step stays locked until the person confirms they saved the codes. (In this preview the code 123456 works.)

PreviewCode

1Scan
2Confirm
3Save codes

Scan the code with your authenticator app. If you can't scan it, enter the key by hand.

Props

TwoFactorSetup

Prop	Type	Notes
`qr?`	`ReactNode`
`qrValue?`	`string`	The otpauth:// link: the kit draws its QR code (instead of `qr`).
`trustDevice?`	`boolean \| string`	A "Trust this device" checkbox under the code field; a string replaces its label.
`onTrustChange?`	`(trusted: boolean) => void`	The trust checkbox changed.
`secret`	`string`	Required
`onVerify?`	`(code: string) => boolean \| Promise<boolean>`
`codes?`	`string[]`
`onDownload?`	`() => void`
`onDone?`	`() => void`
`step?`	`0 \| 1 \| 2`
`scanText?`	`string`
`codesText?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.