Can I Auto read OTP on Mobile Browsers?

Question

I am working on auto reading a login OTP on a mobile browser. My web application is built in Angular 7.

Once the user clicks on login, an OTP is sent via AWS to the user's mobile with a 6 digit code.

I have looked up Google's SMS Retriever API but it does not help my case.

Is reading an OTP from a mobile browser possible?

Answer 1

Yes, this is possible now. Chrome release this feature in version 84 and above. With the help of WEBOTP API we can detect OTP on the web for mobile devices.

code -

if ('OTPCredential' in window) { 
  window.addEventListener('DOMContentLoaded', e => {
    const ac = new AbortController();
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      alert(otp.code)
    }).catch(err => {
      console.log(err)
    });
  })
} else {
  alert('WebOTP not supported!.')
}

SMS Format-

@www.amazon.com #1598.

Here @www.amazon.com is the domain where verification will take place and 1598 is the otp

Demo link- https://jyotishman.github.io/webOTPAPI/

Answer 2

It is an old question, during the time when the question was posted, it was not possible.

But now we can read OTP on mobile browsers.

Using WEBOTP API we can detect the OTP on the web for mobile devices.

You can use the below code to check whether this work on your browser or not

if (!window.OTPCredential) {
  console.log('Feature Not Available');
}
else{
  console.log('Feature Available');
}

Note: If you are testing this on your laptop or desktop, then this above code will give you Feature Not Available. To test this over your laptop or desktop, you need to change the toggle to a mobile device.

SMS Receiver API JavaScript and Web OTP API W3C Community

You can get the documentation in the above link(s).

Before using OTPCredential, we need to have AbortController which will be used to disable WebOTP API (Auto read SMS) after some time (can be based on time or after reading the SMS).

 const ac = new AbortController();
 setTimeout(() => {
   ac.abort();
 }, 1 * 60 * 1000);

The WebOTP API will terminate after 1 minute in the above code.

You can have an HTML form of this type

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Now, the format for your SMS that will be received by the user on their mobile devices will be as below.

@BOUND_DOMAIN #OTP_CODE

Where the above line can be the last line of your SMS.

• @BOUND_DOMAIN will your website domain like @www.examle.com
• #OTP_CODE will be the OTP for authentication like #1234(Keep it 4 to 6 digits only.)

Thus the SMS format will be something like this:

Hi User, please do not share your OTP with anyone.
@www.example.com #123456

To invoke the WebOTP API we need to know Web Authentication API.

 navigator.credentials.get([options])

The above code is required to invoke the WebOTP API

 navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal //This is from the AbortController
 }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
 }).catch(err => {
      console.log(err);
});

Now, below is the demo code:

HTML code:

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

JavaScript Code:

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the Web OTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the Web OTP API.
        ac.abort();
      });
    }
    // Invoke the Web OTP 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);
    });
  });
}

SMS Format could be like this:

Hi, this is a demo OTP
@www.mydomain.com #1234

Companies like OYO(There Tech Blog) use this feature.

NOTE- It is in the development phase as of now and available from Chrome 78

---

UPDATE 2020
From Chrome 84 it is officially launched. But still, many improvements are on their way.