Implementing Two-Factor Authentication (2FA) with jQuery

Introduction to Two-Factor Authentication (2FA)
Why Implement 2FA?
How 2FA Works
Types of Two-Factor Authentication
Choosing the Right 2FA Method
Project Setup
Frontend Implementation Using jQuery
- Creating a Login Form
- Sending an OTP via AJAX
- Verifying the OTP
Backend Implementation
- Generating and Sending OTP
- Storing OTP Securely
- Validating OTP on the Server
Enhancing Security with Google Authenticator
Using Third-Party APIs for 2FA
Storing User Sessions Securely
Best Practices for Implementing 2FA
Common Mistakes to Avoid
Final Thoughts and Conclusion

1. Introduction to Two-Factor Authentication (2FA)

Two-Factor Authentication (2FA) adds an extra layer of security by requiring users to verify their identity using two methods:

Something they know (Password).
Something they have (One-Time Password, Hardware Token, SMS Code, etc.).

This prevents unauthorized access even if an attacker steals a user’s password.

2. Why Implement 2FA?

Enhanced Security – Prevents unauthorized access to accounts.
Mitigates Phishing Attacks – Protects users from stolen credentials.
Compliance with Security Regulations – Meets GDPR, PCI-DSS, and other standards.
Builds User Trust – Users feel secure when their data is protected.

3. How 2FA Works

The user logs in with their username and password.
The server generates a one-time password (OTP) and sends it via email or SMS.
The user enters the OTP in the web application.
If the OTP is correct, the user gains access.

4. Types of Two-Factor Authentication

SMS-Based OTP – A code is sent via SMS.
Email-Based OTP – A code is sent to the user’s email.
Authenticator App (TOTP) – Google Authenticator or Authy generates time-based codes.
Hardware Token – A physical device generates codes.
Biometric Authentication – Fingerprint or facial recognition.

For this tutorial, we will implement email-based OTP authentication using jQuery and PHP.

5. Choosing the Right 2FA Method

Method	Pros	Cons
SMS OTP	Easy to implement	Vulnerable to SIM swapping
Email OTP	Secure and widely used	Delayed email delivery
Google Authenticator	More secure	Requires an app
Hardware Token	Extremely secure	Costly implementation

6. Project Setup

Requirements

HTML, CSS, jQuery for frontend.
PHP and MySQL for backend.
An SMTP email server for sending OTPs.

7. Frontend Implementation Using jQuery

A. Creating a Login Form

<!DOCTYPE html>
<html lang="en">
<head>
    <title>2FA Login</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>Login</h2>
    <input type="text" id="email" placeholder="Enter Email">
    <input type="password" id="password" placeholder="Enter Password">
    <button id="sendOtp">Login</button>

    <div id="otpSection" style="display:none;">
        <h3>Enter OTP</h3>
        <input type="text" id="otp" placeholder="Enter OTP">
        <button id="verifyOtp">Verify OTP</button>
    </div>

    <p id="response"></p>

    <script>
        $(document).ready(function() {
            $("#sendOtp").click(function() {
                var email = $("#email").val();
                var password = $("#password").val();

                $.ajax({
                    url: "send_otp.php",
                    type: "POST",
                    data: { email: email, password: password },
                    success: function(response) {
                        $("#response").text(response);
                        if (response.includes("OTP sent")) {
                            $("#otpSection").show();
                        }
                    }
                });
            });

            $("#verifyOtp").click(function() {
                var otp = $("#otp").val();

                $.ajax({
                    url: "verify_otp.php",
                    type: "POST",
                    data: { otp: otp },
                    success: function(response) {
                        $("#response").text(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

8. Backend Implementation

A. Generating and Sending OTP (send_otp.php)

<?php
session_start();
require 'PHPMailer/PHPMailerAutoload.php';

function generateOtp() {
    return rand(100000, 999999);
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $email = $_POST['email'];
    $password = $_POST['password'];

    // Validate user credentials (dummy check)
    if ($email == "user@example.com" && $password == "password123") {
        $otp = generateOtp();
        $_SESSION['otp'] = $otp;
        $_SESSION['email'] = $email;

        // Send OTP via Email
        $mail = new PHPMailer;
        $mail->isSMTP();
        $mail->Host = 'smtp.example.com';
        $mail->SMTPAuth = true;
        $mail->Username = 'your_email@example.com';
        $mail->Password = 'your_password';
        $mail->SMTPSecure = 'tls';
        $mail->Port = 587;
        $mail->setFrom('no-reply@example.com', '2FA System');
        $mail->addAddress($email);
        $mail->Subject = 'Your OTP Code';
        $mail->Body = 'Your OTP code is ' . $otp;

        if ($mail->send()) {
            echo "OTP sent to your email.";
        } else {
            echo "Failed to send OTP.";
        }
    } else {
        echo "Invalid email or password.";
    }
}
?>

B. Verifying OTP (verify_otp.php)

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $userOtp = $_POST['otp'];

    if (isset($_SESSION['otp']) && $_SESSION['otp'] == $userOtp) {
        echo "Login successful!";
        unset($_SESSION['otp']);
    } else {
        echo "Invalid OTP!";
    }
}
?>

9. Enhancing Security with Google Authenticator

Use Google Authenticator API for time-based OTP (TOTP).
Store secret keys securely in the database.
Ensure QR code generation for easy setup.

10. Using Third-Party APIs for 2FA

Twilio API for SMS OTPs.
Google Authenticator API for TOTP-based authentication.
Authy API for multi-factor authentication.

11. Storing User Sessions Securely

Use HTTP-only cookies for storing authentication tokens.
Encrypt OTPs before storing in databases.
Set OTP expiry times (e.g., 5 minutes).

12. Best Practices for Implementing 2FA

✅ Use HTTPS for secure data transmission.
✅ Implement rate limiting to prevent brute-force OTP attempts.
✅ Store OTPs securely with hashing.
✅ Enforce short expiry times for OTPs (e.g., 5 minutes).
✅ Log failed login attempts for security monitoring.

13. Common Mistakes to Avoid

❌ Sending OTPs over unsecured connections.
❌ Storing OTPs in plaintext in databases.
❌ Allowing unlimited OTP retry attempts.
❌ Using weak passwords without enforcing strong policies.

Two-Factor Authentication significantly improves account security. This guide covered a step-by-step 2FA implementation using jQuery, PHP, and email-based OTPs.

Would you like a Google Authenticator (TOTP) example next?