Mon Jul 29 2024

6-Digit OTP Verification System for Web Security

Security on websites is an essential part of this decade. You can add various kinds of security features on your website - OTP is one of them. Using simple JavaScript you can generate OTP and verify. Here, I created a 6-digit OTP verification system using HTML, CSS and JavaScript only.

Step 1: HTML Setup

<section>
      <aside>
        <button id="genBtn" onclick="generateOTP()">Generate OTP</button>
        <div id="otp"></div>
        <div id="otpInput">
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
        </div>
      </aside>
</section>

Step 2: CSS Styling

section aside button {
        cursor: pointer;
        background-color: var(--green);
        color: var(--white);
        border: none;
        padding: 6px 15px;
        font-size: 20px;
        border-radius: 5px;
}

section aside button:disabled {
        background-color: var(--lightGray);
        color: var(--ash);
}

#otp {
        margin: 25px 0;
        height: 30px;
        font-size: 25px;
        color: var(--white);
}

#otpInput {
        display: flex;
        justify-content: center;
        gap: 10px;
}

#otpInput input {
        padding: 10px;
        text-align: center;
        font-size: 30px;
        border-radius: 8px;
        border: 2px solid transparent;
        width: 20px;
        outline: none;
        background-color: var(--gray);
        color: var(--white);
}

#otpInput input:focus {
        border-color: var(--green);
        color: var(--green);
}

#otpInput input:disabled {
        background-color: var(--lightGray);
        color: var(--ash);
}

Step 3: Generate OTP

function generateOTP() {
        btn.disabled = true;
        otp = Math.floor(Math.random() * (999999 - 100000) + 100000).toString();
        otpView.innerText = otp;
}

Step 4: Verification by Typing OTP

function typeOTP($event) {
        const input = $event.target;
        const value = input.value;
        const fldIndex = +input.dataset.index;

        if ($event.key === "Backspace" && fldIndex > 0) {
          input.previousElementSibling.focus();
        }

        if (checkNumber(value)) {
          if (value.length > 0 && fldIndex < inputs.length - 1) {
            input.nextElementSibling.focus();
          }

          if (input.value !== "" && fldIndex === inputs.length - 1) {
            submit();
          }
        } else {
          clear($event);
        }
}

Step 5: Verification by Pasting OTP

function pasteOTP($event) {
        const data = $event.clipboardData.getData("text");
        const value = data.replace(/ /g, "").split("");
        if (value.length === inputs.length) {
          inputs.forEach((input, index) => {
            input.value = value[index];
          });
          submit();
        }
}

6-Digit OTP Verification System for Web Security

File Name: otp-verification-system-in-js.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OTP System</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"
      rel="stylesheet"
    />

    <style>
      :root {
        --bg: #212121;
        --gray: #333;
        --lightGray: #424242;
        --red: #f73614;
        --green: #06c200;
        --white: #fff;
        --ash: #868686;
      }

      * {
        font-family: "Roboto", sans-serif;
        margin: 0;
        padding: 0;
      }

      body {
        background-color: var(--bg);
      }

      section {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      section aside {
        width: 550px;
        text-align: center;
      }

      section aside button {
        cursor: pointer;
        background-color: var(--green);
        color: var(--white);
        border: none;
        padding: 6px 15px;
        font-size: 20px;
        border-radius: 5px;
      }

      section aside button:disabled {
        background-color: var(--lightGray);
        color: var(--ash);
      }

      #otp {
        margin: 25px 0;
        height: 30px;
        font-size: 25px;
        color: var(--white);
      }

      #otpInput {
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      #otpInput input {
        padding: 10px;
        text-align: center;
        font-size: 30px;
        border-radius: 8px;
        border: 2px solid transparent;
        width: 20px;
        outline: none;
        background-color: var(--gray);
        color: var(--white);
      }

      #otpInput input:focus {
        border-color: var(--green);
        color: var(--green);
      }

      #otpInput input:disabled {
        background-color: var(--lightGray);
        color: var(--ash);
      }
    </style>
  </head>
  <body>
    <section>
      <aside>
        <button id="genBtn" onclick="generateOTP()">Generate OTP</button>
        <div id="otp"></div>
        <div id="otpInput">
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
          <input type="text" maxlength="1" />
        </div>
      </aside>
    </section>

    <script>
      let otp = "";
      const btn = document.getElementById("genBtn");
      const otpView = document.getElementById("otp");
      const inputs = document.querySelectorAll("#otpInput input");

      function generateOTP() {
        btn.disabled = true;
        otp = Math.floor(Math.random() * (999999 - 100000) + 100000).toString();
        otpView.innerText = otp;
      }

      function clear($event) {
        $event.target.value = "";
      }

      function checkNumber(number) {
        return /[0-9]/g.test(number);
      }

      function typeOTP($event) {
        const input = $event.target;
        const value = input.value;
        const fldIndex = +input.dataset.index;

        if ($event.key === "Backspace" && fldIndex > 0) {
          input.previousElementSibling.focus();
        }

        if (checkNumber(value)) {
          if (value.length > 0 && fldIndex < inputs.length - 1) {
            input.nextElementSibling.focus();
          }

          if (input.value !== "" && fldIndex === inputs.length - 1) {
            submit();
          }
        } else {
          clear($event);
        }
      }

      function pasteOTP($event) {
        const data = $event.clipboardData.getData("text");
        const value = data.replace(/ /g, "").split("");
        if (value.length === inputs.length) {
          inputs.forEach((input, index) => {
            input.value = value[index];
          });

          submit();
        }
      }

      function submit() {
        let fullOtp = "";
        inputs.forEach((input) => {
          fullOtp += input.value;
          input.disabled = true;
        });

        const timeOut = setTimeout(function () {
          if (otp == fullOtp) {
            otpView.innerText = "You are verified!";
          } else {
            otpView.innerText = "Invalid OTP!";
          }

          inputs.forEach((input) => {
            input.value = "";
            input.disabled = false;
          });

          btn.disabled = false;
        }, 1000);
      }

      inputs.forEach((input, index) => {
        input.dataset.index = index;
        input.addEventListener("focus", clear);
        input.addEventListener("keydown", clear);
        input.addEventListener("keyup", typeOTP);
        input.addEventListener("paste", pasteOTP);
      });
    </script>
  </body>
</html>

Author:Geekboots