TwoFactorSetup
Enable TOTP-based two-factor authentication with QR code generation and backup codes.
Live Demo
Installation
Basic Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| userId | string | - | Required. The user ID to enable 2FA for |
| onComplete | (codes: string[]) => void | - | Callback fired when 2FA is successfully enabled |
| onError | (error: Error) => void | - | Callback fired when setup fails |
| onCancel | () => void | - | Callback fired when user cancels setup |
| backupCodeCount | number | 10 | Number of backup codes to generate |
| className | string | - | Additional CSS classes |
Direct API Usage
Verify 2FA on Login
After users enable 2FA, verify their code during login:
Best Practices
Force Users to Save Backup Codes
Require users to download or manually confirm they've saved backup codes before completing setup.
Provide Recovery Options
Allow users to disable 2FA via email verification if they lose access to their authenticator app.
Rate Limit Verification Attempts
Implement rate limiting on 2FA verification to prevent brute force attacks.