Designing Secure Sign-In Forms with Two-Factor Authentication

Introduction

In today’s digital landscape, protecting user data is more critical than ever. A standard username and password are often not enough to safeguard accounts from hacking attempts. One of the most effective ways to enhance the security of sign-in forms is by incorporating Two-Factor Authentication (2FA). This method adds an additional layer of protection by requiring users to provide two forms of verification before accessing their accounts. In this article, we will walk you through how to design a secure sign-in form with 2FA using HTML, CSS, and JavaScript.

What is Two-Factor Authentication (2FA)?

Two-Factor Authentication (2FA) is a security process that requires users to verify their identity using two separate factors: something they know (such as a password) and something they have (such as a phone or a security token). This method adds an extra layer of security to prevent unauthorized access, even if a user's password is compromised.

Common methods of 2FA include:

SMS codes: A one-time code sent to the user's phone.
Authenticator apps: Applications like Google Authenticator or Authy that generate time-based one-time passwords (TOTP).
Email verification: A code or link sent to the user’s email address.

Step-by-Step Guide to Create a Secure Sign-In Form with 2FA

1. Basic HTML Structure for Sign-In Form

Let’s start by building a simple HTML sign-in form that includes fields for the username and password. Later, we will implement the second authentication step.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secure Sign-In Form with 2FA</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="container">
    <h2>Sign In</h2>
    <form id="sign-in-form">
      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
      </div>

      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
      </div>

      <button type="submit">Sign In</button>
    </form>

    <!-- Placeholder for Two-Factor Authentication -->
    <div id="two-factor-auth" style="display: none;">
      <h3>Two-Factor Authentication</h3>
      <p>A code has been sent to your mobile device.</p>
      <input type="text" id="2fa-code" placeholder="Enter authentication code" required>
      <button id="verify-2fa">Verify Code</button>
    </div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML Structure:

Basic Sign-In Form:
- We have a basic sign-in form that includes username and password fields.
- The form also contains a submit button that will trigger the authentication process.
Two-Factor Authentication Section:
- A hidden section (#two-factor-auth) that will display after the user successfully enters their credentials. This section will prompt users to enter their 2FA code.

2. CSS for Sign-In Form Design

Let’s add some simple, modern styling for the sign-in form using CSS. The design will follow a minimalist approach with a clean and user-friendly interface.


/* styles.css */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.container {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 320px;
}

h2, h3 {
  text-align: center;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

#two-factor-auth {
  margin-top: 20px;
}

Explanation of the CSS:

Container Styling:
- We use Flexbox to center the sign-in form vertically and horizontally on the page.
- The .container class gives the form a clean, white background with rounded corners and a subtle shadow effect (box-shadow) for a minimalist, modern design.
Form Fields:
- Each input field is styled with padding and a border to make them easy to interact with. We also use a border-radius to keep the rounded, modern look.
Button Styling:
- The sign-in button uses a solid blue background with white text, which changes to a darker blue on hover for better interactivity.

3. Adding Two-Factor Authentication with JavaScript

Next, we’ll add JavaScript to handle the transition between the sign-in form and the 2FA code verification process.


  // scripts.js

document.getElementById('sign-in-form').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent form submission
  
    // Simulate successful login
    alert('Login successful. Please enter the 2FA code.');
  
    // Show the 2FA section
    document.getElementById('two-factor-auth').style.display = 'block';
  });
  
  document.getElementById('verify-2fa').addEventListener('click', function() {
    const code = document.getElementById('Two-fa-code').value;
  
    // Simulate 2FA verification
    if (code === '123456') { // This is just a placeholder, replace with real verification logic
      alert('Two-factor authentication successful. Welcome!');
    } else {
      alert('Invalid 2FA code. Please try again.');
    }
  });

Explanation of the JavaScript:

Handling Form Submission:
- When the user submits their username and password, the default form submission is prevented (e.preventDefault()).
- A simulated success message is shown, and the 2FA section becomes visible (document.getElementById('two-factor-auth').style.display = 'block').
Verifying the 2FA Code:
- When the user enters their 2FA code and clicks "Verify Code", we simulate a 2FA check. For this example, the code is hardcoded as 123456, but in a real-world scenario, this would be dynamically generated and sent to the user’s phone or email.
- If the code matches, a success message is displayed. Otherwise, the user is prompted to re-enter the correct code.

Enhancing Security in Real-World Scenarios

While this example provides a basic introduction to implementing 2FA, real-world applications require more robust solutions. Here are a few best practices:

1. Generate One-Time Passwords (OTP):

Use a backend service to generate and validate one-time passwords (OTPs) for your 2FA process. Popular APIs like Twilio, Authy, or Google Authenticator can help with this.

2. SMS and Email Authentication:

Rather than using a hardcoded 2FA code, send an OTP via SMS or email. Ensure that the OTP expires after a short period to reduce the risk of interception.

3. Use Encryption:

Ensure all user data, including usernames, passwords, and 2FA codes, is transmitted over HTTPS to protect against man-in-the-middle attacks.
Store passwords securely using hashing algorithms such as bcrypt.

4. Device-Based 2FA:

For even more security, consider using device-based 2FA, where users authenticate via a dedicated device (like YubiKey or mobile authenticator apps) instead of relying on SMS or email.

Live preview

See the Pen Designing Secure Sign-In Forms with Two-Factor Authentication by codepen (@codepen-the-selector) on CodePen.

Conclusion

By implementing Two-Factor Authentication (2FA) into your sign-in forms, you add a critical layer of security that helps protect user accounts from unauthorized access. This guide demonstrated how to create a simple, secure sign-in form with 2FA using HTML, CSS, and JavaScript. For real-world applications, always ensure you use secure methods like OTP generation and encrypted connections to further safeguard user data.

License Key