Home/ Questions/Q 4228

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T10:02:08+00:00

Building an OTP Verification System using HTML, CSS, and JavaScript

  • 61k

In today's digital age, security is paramount, especially when it comes to user authentication. One-Time Passwords (OTPs) provide an additional layer of security by ensuring that only the intended recipient can access a particular service or feature. In this blog post, we'll walk through the development of a simple OTP verification system using HTML, CSS, and JavaScript.

Overview

Our OTP verification system will consist of two main parts:

  1. Send OTP: This page will collect the user's email address and send an OTP to that email.
  2. Verify OTP: This page will prompt the user to enter the OTP they received via email and verify it.

Let's dive into the implementation details.

1. Send OTP Page

Our sendOTP.html file will contain a form where users can enter their email address and request an OTP. 

<!-- sendOTP.html --> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Send OTP</title>   <link rel="stylesheet" href="sendOTP.css"> </head> <body>   <h1>Send OTP</h1>   <form id="sendOTPForm">     <label for="email">Email:</label>     <input type="email" id="email" name="email" required>     <button type="submit">Send OTP</button>   </form>   <script src="sendOTP.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

The corresponding JavaScript file sendOTP.js handles form submission and sends a request to the server to generate and send the OTP. 

// sendOTP.js document.addEventListener('DOMContentLoaded', () => {     const sendOTPForm = document.getElementById('sendOTPForm');      if (sendOTPForm) {         sendOTPForm.addEventListener('submit', async (e) => {             e.preventDefault();             const email = sendOTPForm.elements.email.value;             const response = await fetch(`/api/sendOTP?email=${email}`);             const result = await response.json();             // console.log(result);             alert(result.message);             if (result.success) {                 window.location.href = 'verifyOTP.html';             }         });     } });
Enter fullscreen mode Exit fullscreen mode

2. Verify OTP Page

After the user receives the OTP via email, they will proceed to the verifyOTP.html page to enter the OTP for verification. 

<!-- verifyOTP.html --> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Verify OTP</title>   <link rel="stylesheet" href="verifyOTP.css"> </head> <body>   <h1>Verify OTP</h1>   <form id="verifyOTPForm">     <label for="email">Email:</label>     <input type="email" id="email" name="email" required>     <label for="otp">OTP:</label>     <input type="text" id="otp" name="otp" required>     <button type="submit">Verify OTP</button>   </form>   <script src="verifyOTP.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode 

// verifyOTP.js document.addEventListener('DOMContentLoaded', () => {     const verifyOTPForm = document.getElementById('verifyOTPForm');      if (verifyOTPForm) {         verifyOTPForm.addEventListener('submit', async (e) => {             e.preventDefault();             const email = verifyOTPForm.elements.email.value;             const otp = verifyOTPForm.elements.otp.value;             const response = await fetch(`/api/verifyOTP?email=${email}&otp=${otp}`);             const result = await response.json();             // console.log(result);             alert(result.message);             if (result.success) {                 window.location.href = 'success.html';             }         });     } });
Enter fullscreen mode Exit fullscreen mode

Similarly, the verifyOTP.js file handles form submission and sends a request to the server to verify the OTP entered by the user.

Styling

Both the sendOTP.html and verifyOTP.html pages have their respective CSS files (sendOTP.css and verifyOTP.css) to style the forms and enhance user experience. 

/* sendOTP.css */  body {     font-family: Arial, sans-serif;     background-color: #f0f0f0;     margin: 0;     padding: 0;   }    h1 {     text-align: center;     color: #333;   }    form {     width: 300px;     margin: 0 auto;     background-color: #fff;     padding: 20px;     border-radius: 8px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);   }    label {     display: block;     margin-bottom: 10px;   }    input[type="email"] {     width: 100%;     padding: 10px;     margin-bottom: 20px;     border: 1px solid #ccc;     border-radius: 4px;     box-sizing: border-box;   }    button[type="submit"] {     width: 100%;     padding: 10px;     background-color: #007bff;     color: #fff;     border: none;     border-radius: 4px;     cursor: pointer;     transition: background-color 0.3s ease;   }    button[type="submit"]:hover {     background-color: #0056b3;   }
Enter fullscreen mode Exit fullscreen mode 

/* verifyOTP.css */  body {     font-family: Arial, sans-serif;     background-color: #f0f0f0;     margin: 0;     padding: 0;     box-sizing: border-box;   }    h1 {     text-align: center;   }    form {     width: 300px;     margin: 20px auto;     background-color: #fff;     padding: 20px;     border-radius: 8px;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);   }    label {     display: block;     margin-bottom: 8px;   }    input[type="email"],   input[type="text"] {     width: calc(100% - 22px);     padding: 10px;     margin-bottom: 15px;     border: 1px solid #ccc;     border-radius: 4px;   }    button {     width: 100%;     padding: 10px;     background-color: #007bff;     color: #fff;     border: none;     border-radius: 4px;     cursor: pointer;   }    button:hover {     background-color: #0056b3;   }    button:active {     background-color: #004080;   }
Enter fullscreen mode Exit fullscreen mode

Success Page

Upon successful OTP verification, users will be redirected to the success.html page. 

<!-- success.html --> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Success</title>     <link rel="stylesheet" href="success.css"> </head> <body>     <div class="container">         <h1>OTP Verified Successfully</h1>         <!-- Add any other content you want to display on the success page -->     </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode 

/* success.css */  body {     font-family: Arial, sans-serif;     background-color: #f4f4f4;     margin: 0;     padding: 0;     display: flex;     justify-content: center;     align-items: center;     height: 100vh; }  .container {     text-align: center; }  h1 {     color: #008000; /* Green color for success */ }  /* You can add more styles as needed */
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this blog post, we've created a simple OTP verification system using HTML, CSS, and JavaScript. While this implementation provides basic functionality, you can further enhance it by adding features such as error handling, session management, and backend validation. Remember, security should always be a top priority when implementing authentication systems.

Exploring the Code

Visit the GitHub repository to explore the code in detail.

Feel free to customize the blog according to your preferences and provide more details or explanations where needed.

beginnersjavascriptprogrammingwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,