htmlangulartypescriptone-time-password

Can I Auto read OTP on Mobile Browsers?

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?

Solution

  • 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/