I Thought 2FA Was Too Complex for My App. Here's How I Implemented It in One Weekend

npm install otplib qrcode

// Don't overthink this - these imports do exactly what you'd expect
const { authenticator } = require('otplib');
const QRCode = require('qrcode');

// This one line generates a cryptographically secure secret
// I wish I'd known it was this straightforward from the beginning
const generateSecret = () => {
  return authenticator.generateSecret(); // That's literally it
};

// Store this secret in your database alongside the user record
// Keep it private - this is what generates their unique codes
const setupTwoFactor = async (userId) => {
  const secret = generateSecret();
  
  await User.findByIdAndUpdate(userId, {
    twoFactorSecret: secret,
    twoFactorEnabled: false // Not enabled until they verify it works
  });
  
  return secret;
};

// This URL format is standardized - don't try to be clever here
const generateQRCode = async (userEmail, secret) => {
  const appName = 'YourAppName'; // This shows up in their authenticator app
  const otpAuth = authenticator.keyuri(userEmail, appName, secret);
  
  // Generate the QR code as a data URL for easy display
  const qrCode = await QRCode.toDataURL(otpAuth);
  return qrCode; // This goes directly in an <img> tag
};

// This verification step saved me from multiple support tickets
const verifyTwoFactorSetup = async (userId, userToken) => {
  const user = await User.findById(userId);
  
  // Check if the code they entered matches what we expect
  const isValid = authenticator.verify({
    token: userToken,
    secret: user.twoFactorSecret
  });
  
  if (isValid) {
    // Only enable 2FA after successful verification
    await User.findByIdAndUpdate(userId, {
      twoFactorEnabled: true
    });
    return { success: true, message: 'Two-factor authentication enabled!' };
  } else {
    return { success: false, message: 'Invalid code. Please try again.' };
  }
};

// I learned to always check 2FA status AFTER password verification
const loginWithTwoFactor = async (email, password, twoFactorCode) => {
  // Step 1: Normal password authentication
  const user = await User.findOne({ email });
  const passwordValid = await bcrypt.compare(password, user.password);
  
  if (!passwordValid) {
    return { success: false, message: 'Invalid credentials' };
  }
  
  // Step 2: Check if 2FA is required
  if (user.twoFactorEnabled) {
    if (!twoFactorCode) {
      return { 
        success: false, 
        requiresTwoFactor: true,
        message: 'Please enter your authenticator code' 
      };
    }
    
    // Verify the 2FA code
    const codeValid = authenticator.verify({
      token: twoFactorCode,
      secret: user.twoFactorSecret
    });
    
    if (!codeValid) {
      return { 
        success: false, 
        message: 'Invalid authenticator code' 
      };
    }
  }
  
  // All checks passed - generate session/JWT
  const token = generateJWT(user._id);
  return { success: true, token, user };
};

// This component took me 4 iterations to get right
const TwoFactorSetup = () => {
  const [qrCode, setQrCode] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [isVerifying, setIsVerifying] = useState(false);
  
  const initializeSetup = async () => {
    try {
      const response = await fetch('/api/2fa/setup', { method: 'POST' });
      const { qrCode } = await response.json();
      setQrCode(qrCode);
    } catch (error) {
      console.error('Setup failed:', error);
    }
  };
  
  const verifySetup = async () => {
    setIsVerifying(true);
    try {
      const response = await fetch('/api/2fa/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: verificationCode })
      });
      
      const result = await response.json();
      if (result.success) {
        alert('Two-factor authentication is now enabled!');
        // Redirect or update UI state
      } else {
        alert(result.message);
      }
    } catch (error) {
      alert('Verification failed. Please try again.');
    } finally {
      setIsVerifying(false);
    }
  };
  
  return (
    <div className="two-factor-setup">
      <h3>Enable Two-Factor Authentication</h3>
      <div className="setup-steps">
        <div className="step">
          <h4>1. Scan this QR code</h4>
          {qrCode ? (
            <img src={qrCode} alt="2FA QR Code" style={{width: 200, height: 200}} />
          ) : (
            <button onClick={initializeSetup}>Generate QR Code</button>
          )}
        </div>
        
        <div className="step">
          <h4>2. Enter the code from your app</h4>
          <input
            type="text"
            placeholder="000000"
            maxLength="6"
            value={verificationCode}
            onChange={(e) => setVerificationCode(e.target.value)}
          />
          <button 
            onClick={verifySetup} 
            disabled={verificationCode.length !== 6 || isVerifying}
          >
            {isVerifying ? 'Verifying...' : 'Verify & Enable'}
          </button>
        </div>
      </div>
    </div>
  );
};

// Always account for time drift - this saved me hours of debugging
const verifyWithWindow = (token, secret) => {
  return authenticator.verify({
    token,
    secret,
    window: 2 // Allow 2 time steps (60 seconds) of drift
  });
};

// Clean up properly - security secrets shouldn't linger
const disableTwoFactor = async (userId) => {
  await User.findByIdAndUpdate(userId, {
    twoFactorSecret: null,
    twoFactorEnabled: false
  });
};

// Protect against code guessing attacks
const attemptLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // 5 attempts per window
  message: 'Too many 2FA attempts. Please try again later.'
});