Introduction

Ever wonder how some websites autofill the OTP field as soon as you get the OTP in your mobile device. Here the Web OTP API comes into action which with the help of just a few lines of code can boost up your form's usability.

Input Field Setup

There are three things to keep in mind while creating the input field of the OTP

1. The type attribute of the input should be text. The reason we are not using number as value here is that we want a field that expects a sequence of numbers rather than a field that takes a countable number and has up and down arrows to increment and decrement the value
2. There should be an inputmode attribute on the input tag whose value should be equal to numeric so that the keyboard automatically changes to a numeric keyboard.
3. There should be a autocomplete attribute whose value should be one-time-code which tells the browser which permission it has to provide for autocomplete assistance.

the final field code should look this:

<input type="text" inputmode="numeric" autocomplete="one-time-code"/>

The WebOTP API

Now inside your javascript file just paste the following code which needs some minor adjustments to work

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
// selecting the input field
    const input = document.querySelector('input[autocomplete="one-time-code"]'); 
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Message formatting

There are some points to keep in mind while creating the message format which will get sent to the user

1. Finish the message with@DOMAIN-NAME #123456, where the domain name is the name of your domain followed by the OTP with the preceding pound(#) sign.
2. The message should begin with a human-readable message with 4-10 character alphanumeric string with at least one number.

your message body should look like this

Your OTP is 112233

@www.example.com #112233

If you want to check this API right now head on to web-otp.glitch.me and do as stated.

Conclusion

And with this last step, your form is ready. One thing to keep in mind is that Web Authentication API is recommended and more safe for verifying the user in comparison to WebOTP API, but it could be used for identifying the user, in two-step verification, or in the payment confirmation.