TL;DR
2FA adds a second layer of protection beyond passwords. TOTP (authenticator apps) is the most common approach. These prompts help you implement 2FA setup, verification, backup codes, and recovery flows while avoiding common security mistakes.
TOTP Implementation
Implement TOTP-based two-factor authentication.
Language: TypeScript/JavaScript/Python
Setup flow:
- Generate secret key for user
- Create QR code with otpauth:// URL
- Show QR code and manual entry key
- Verify user can generate valid code
- Store encrypted secret in database
- Generate backup codes
Verification flow:
- After password check, prompt for TOTP
- Validate 6-digit code
- Allow 1 code before/after for clock drift
- Track failed attempts (rate limit)
- Complete login on success
Use standard libraries:
- otplib or speakeasy for Node.js
- pyotp for Python
Include QR code generation with qrcode library.
Backup Codes
Implement backup codes for 2FA recovery.
Requirements:
- Generate 10 single-use backup codes
- Each code: 8 alphanumeric characters
- Store hashed codes in database
- Mark used codes as consumed
- Show codes only once during setup
Code format: XXXX-XXXX (easy to read/type)
Implementation:
- generateBackupCodes() -> string
- verifyBackupCode(userId, code) -> boolean
- regenerateBackupCodes(userId) -> string
- getRemainingCodeCount(userId) -> number
Security:
- Hash codes before storing (bcrypt)
- Don't allow code reuse
- Require re-auth to regenerate codes
- Log when backup codes are used
Store TOTP secrets encrypted: The TOTP secret is equivalent to a password. If your database is breached and secrets are in plain text, attackers can generate valid 2FA codes.
2FA Enrollment Flow
Create a complete 2FA enrollment flow.
Steps:
- User clicks "Enable 2FA" in settings
- Require password confirmation
- Generate and display QR code
- Show manual entry key below QR
- User scans with authenticator app
- User enters code to verify setup
- Display backup codes (one time only)
- User confirms they saved backup codes
- 2FA is now active
UI needs:
- QR code display component
- Code input (6 digits, auto-advance)
- Backup codes display (copyable)
- Checkbox: "I have saved these codes"
- Clear instructions for setup
Handle errors:
- Invalid verification code
- Code already used
- Rate limiting on attempts
Recovery Flow
Implement 2FA recovery for users who lose access.
Recovery options:
- Backup codes (primary method)
- Recovery email with time-limited link
- Admin/support manual verification
Backup code recovery:
- Accept backup code instead of TOTP
- Mark code as used after success
- Alert user about remaining codes
Email recovery (use carefully):
- Send link to verified email
- Link expires in 1 hour
- Requires answering security questions
- Logs recovery attempt
- Notifies user of recovery
After recovery:
- Force 2FA re-setup or disable
- Invalidate all existing sessions
- Send notification to user email
- Log the recovery event
Don't allow: Disabling 2FA without verification
Pro tip: Consider supporting WebAuthn/passkeys as a 2FA option. They're phishing-resistant and more user-friendly than TOTP once set up.
TOTP vs SMS for 2FA?
TOTP is more secure. SMS can be intercepted through SIM swapping attacks. Use TOTP (authenticator apps) as the primary method. Only offer SMS as a fallback if absolutely necessary.
Should 2FA be required or optional?
Start optional to avoid friction. Consider requiring it for sensitive actions (payments, admin access) or for high-value accounts. Some apps require 2FA for all users after a certain point.