How to auto-verify OTP on the web?

Today, we will learn How to auto-verify OTP on the web? In this tutorial, we will use WebOTP. WebOTP is verify OTP on the phone web browser automatically without having to manually your OTP. When you use WebOTP, first check your Chrome version 84 or above. So, this tutorial will explain to you step by step how to auto-verify WebOTP with javascript.

How to auto-verify OTP on the web?

1. Rules

The first step, we should know the SMS rules for the API to work correctly.

A valid verification message might look like the below:

1. Your OTP is: 1690
2. @www.yourdomain.com #1690
3. Here @www.yourdomain.com is the domain of the OTP verification page and #1690 is the OTP

2. Example

<input type="text" autocomplete="onetimecode" inputmode="numeric"/>

<script>
if ('OTPCredential' in window) {
    window.addEventListener('DOMContentLoaded', e => {
        const input = document.querySelector('input[autocomplete="onetimecode"]');
        if (!input) return;
        const ac = new AbortController();
        const form = input.closest('form');
        if (form) {
            form.addEventListener('submit', e => {
                ac.abort();
            });
        }

        navigator.credentials.get({
            otp: { transport:['sms'] },
            signal: ac.signal
        }).then(otp => {
            input.value = otp.code;
            if (form) form.submit();
        }).catch(error => {
            console.log(error);
        });
    });
}
</script>