Multi Factor authentication Card using Tailwind CSS

Last Updated : 07 Mar, 2024

The Multi-Factor Authentication (MFA) app is a simple web application built using HTML, CSS and JavaScript with the Tailwind CSS for styling. It allows users to verify their identity using the combination of username, password and a one-time password (OTP) sent to their registered mobile device.

Approach to create Multi Factor Authentication Card:

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Include a form with input fields for username, password, and OTP, along with buttons for sending OTP and verifying.
Import external resources like Tailwind CSS for styling.
Use Tailwind CSS classes to style the form, input fields, and buttons. Apply classes for padding, border, background color, and text color to achieve a visually appealing design.
Use JavaScript to generate a random OTP when the “Send OTP” button is clicked. Store this OTP in a variable. When the form is submitted, retrieve the entered OTP and compare it with the generated OTP. Display a success or error message based on the comparison result.
Create a function to display messages on the page. This function should take a message and a text color as parameters and update the message element accordingly. Use this function to display success or error messages based on the OTP verification result.

Example: Implementation to design multifactor authentication template.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>The MFA Authentication</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 min-h-screen flex 
             flex-col items-center justify-center">
    <div class="max-w-md w-full p-8 bg-white rounded-lg 
                shadow-lg border-2 border-green-400">
        <h1 class="text-3xl font-semibold text-center mb-8">
              Multi-Factor Authentication
          </h1>
        <form id="mfa-form" class="space-y-4">
            <div>
                <input type="text" id="username"
                       name="username" placeholder="Username"
                       class="w-full border border-gray-300 rounded-md 
                              py-2 px-3 focus:outline-none focus:border-blue-500 
                              text-lg">
            </div>
            <div>
                <input type="password" id="password"
                       name="password" placeholder="Password"
                       class="w-full border border-gray-300 rounded-md 
                              py-2 px-3 focus:outline-none focus:border-blue-500 
                              text-lg">
            </div>
            <div>
                <input type="text" id="otp" name="otp"
                       placeholder="Enter OTP"
                          class="w-full border border-gray-300 rounded-md 
                              py-2 px-3 focus:outline-none focus:border-blue-500 
                              text-lg">
            </div>
            <button type="button" id="otp-button"
                    class="w-full bg-blue-500 text-white 
                           rounded-md py-2 px-4 hover:bg-blue-600 
                           focus:outline-none">Send OTP
              </button>
            <button type="submit"
                    class="w-full bg-blue-500 text-white rounded-md 
                           py-2 px-4 hover:bg-blue-600 focus:outline-none">
                  Verify
              </button>
        </form>
        <div id="message" class="text-center text-sm mt-4"></div>
    </div>
    <script>
        let generatedOTP = '';
        document.getElementById('otp-button')
                  .addEventListener('click', function () {
            generatedOTP = generateOTP();
            alert('OTP: ' + generatedOTP);
        });
        document.getElementById('mfa-form')
                  .addEventListener('submit', function (event) {
            event.preventDefault();
            const formData = new FormData(this);
            const username = formData.get('username');
            const password = formData.get('password');
            const enteredOTP = formData.get('otp');
            if (!username || !password || !enteredOTP) {
                showMessage('Please fill in all fields.', 'text-red-500');
                return;
            }
            if (enteredOTP === generatedOTP.toString()) {
                showMessage('Verification successful!', 'text-green-500');
            } else {
                showMessage('Invalid OTP.', 'text-red-500');
            }
        });
        function showMessage(message, textColor) {
            const messageElement = document.getElementById('message');
            messageElement.textContent = message;
            messageElement.classList.remove('text-red-500', 'text-green-500');
            messageElement.classList.add(textColor);
        }
        function generateOTP() {
            return Math.floor(100000 + Math.random() * 900000);
        }
    </script>
</body>
 
</html>