Automatic SMS Verification with WebOTP API

Introduction

In today’s fast-paced digital world, convenience is key. Entering one-time passwords (OTPs) manually can be a hassle, especially on mobile devices. This is where the WebOTP API comes in. The WebOTP API allows web applications to programmatically obtain one-time codes sent via SMS, making the login process smoother and more user-friendly. In this article, we’ll explore how the WebOTP API works, the format for the SMS message, and provide a step-by-step guide to implementing it.

What is the WebOTP API?

The WebOTP API is a powerful tool that enables web applications to retrieve one-time passwords (OTPs) sent via SMS. When a user visits a website and receives an OTP on their mobile device, the WebOTP API can automatically extract the OTP from the SMS and populate it into a form, eliminating the need for manual entry. This not only enhances user experience but also reduces errors and speeds up the authentication process.

SMS Message Format

For the WebOTP API to work correctly, the OTP must be sent in a specific format. The message must include the code and a URL to the website. Here’s an example of the SMS format:

Your OTP code is 123456. Please use this code to log in. 
@website.com #123456        

The critical part is the line @website.com #123456, where website.com should be replaced with your domain without using any HTTP or HTTPS, and 123456 is the OTP. This line helps the WebOTP API identify the relevant code and website.

Step-by-Step Implementation

Now, let’s dive into the implementation. Below is a detailed guide on how to set up the WebOTP API in your web application.

1. Check for Feature Support

First, you need to ensure that the user’s browser supports the WebOTP API. You can do this by checking for the OTPCredential object in the window.

if ("OTPCredential" in window) {
  // WebOTP API is supported
}        

2. Set Up the Event Listener

Next, set up an event listener to handle the OTP retrieval when the page loads.

window.addEventListener("DOMContentLoaded", (e) => {
  const input = document.querySelector('input[autocomplete="one-time-code"]');
  if (!input) return;

  // Set up an AbortController to use with the OTP request
  const ac = new AbortController();
  const form = input.closest("form");
  if (form) {
    form.addEventListener("submit", (e) => {
      ac.abort();
    });
  }

  // Request the OTP via get()
  navigator.credentials
    .get({
      otp: { transport: ["sms"] },
      signal: ac.signal,
    })
    .then((otp) => {
      // When the OTP is received, enter it into the form input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    })
    .catch((err) => {
      console.error(err);
    });
});        

3. Implement the Form

Ensure your form input field has the autocomplete attribute set to one-time-code. This tells the browser to look for an OTP.

<form action="/submit-otp" method="post">
  <label for="otp">Enter OTP:</label>
  <input type="text" id="otp" name="otp" autocomplete="one-time-code">
  <button type="submit">Submit</button>
</form>        

4. Testing

To test the implementation, send an SMS with the appropriate format to your mobile device, and navigate to your webpage. The OTP should be automatically filled in and the form submitted.

Applicable Browsers

Conclusion

The WebOTP API is a fantastic tool to enhance the user experience by automating the OTP entry process. By following this guide, you can implement it in your web applications and provide a seamless login experience for your users. As always, ensure your implementation is secure and respects user privacy.

Happy Coding!