Add Two-Factor Authentication with AI Prompts

Share

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

Add TOTP 2FA

Implement TOTP-based two-factor authentication.

Language: TypeScript/JavaScript/Python

Setup flow:

  1. Generate secret key for user
  2. Create QR code with otpauth:// URL
  3. Show QR code and manual entry key
  4. Verify user can generate valid code
  5. Store encrypted secret in database
  6. Generate backup codes

Verification flow:

  1. After password check, prompt for TOTP
  2. Validate 6-digit code
  3. Allow 1 code before/after for clock drift
  4. Track failed attempts (rate limit)
  5. 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

Generate Backup Codes

Implement backup codes for 2FA recovery.

Requirements:

  1. Generate 10 single-use backup codes
  2. Each code: 8 alphanumeric characters
  3. Store hashed codes in database
  4. Mark used codes as consumed
  5. 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

Complete 2FA Setup UI

Create a complete 2FA enrollment flow.

Steps:

  1. User clicks "Enable 2FA" in settings
  2. Require password confirmation
  3. Generate and display QR code
  4. Show manual entry key below QR
  5. User scans with authenticator app
  6. User enters code to verify setup
  7. Display backup codes (one time only)
  8. User confirms they saved backup codes
  9. 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

2FA Recovery Options

Implement 2FA recovery for users who lose access.

Recovery options:

  1. Backup codes (primary method)
  2. Recovery email with time-limited link
  3. 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.

Check Your 2FA Implementation

Scan your authentication for 2FA best practices.

Start Free Scan
AI Fix Prompts

Add Two-Factor Authentication with AI Prompts