WebOTP is an important API to verify OTP on the phone web browser automatically without having to manually type your OTP.
Chrome recently released this feature and it will work only with version 84 or above.

So, this tutorial will explain to you step by step how to implement WebOTP with javascript-

1. The first step before starting is we should know the SMS rules for the API to work correctly.
   A valid verification message might look like the following:
   Your OTP is: 1598
   @www.amazon.com #1598
   Here @www.amazon.com is the domain of the OTP verification page and #1598 is the OTP.

2. 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!.')
}
   Demo link- https://jyotishman.github.io/webOTPAPI/