TwoFactorForm

A two-factor authentication form with OTP input and optional backup code support.

Two-Factor Authentication

Enter the 6-digit code from your authenticator app.

Installation

pnpm add @corew500/ui

Usage

import { TwoFactorForm } from '@corew500/ui/blocks/two-factor-form'

<TwoFactorForm
  onFormSubmit={(data) => handle2FA(data)}
  title="Two-Factor Authentication"
  description="Enter the 6-digit code from your authenticator app."
  features={{ backupCodeOption: true }}
/>

API Reference

Props

Prop	Type	Default	Description
`onFormSubmit`	(data: TwoFactorFormData) => void	—	Called when the form is submitted
`loading`	enum	`false`	Whether the form is in a loading state
`glow`	enum	`false`	Enable glow effects
`title`	string	`Two-factor authentication`	—
`description`	string	`Enter the 6-digit code from your authenticator app.`	—
`labels`	{ code?: string; backupCode?: string; }	`{}`	—
`placeholders`	{ backupCode?: string; }	`{}`	—
`buttonLabels`	{ submit?: string; loading?: string; useBackupCode?: string; useAuthenticator?: string; }	`{}`	—
`errors`	{ code?: string; general?: string; }	`{}`	—
`features`	{ backupCodeOption?: boolean; }	`{}`	—