CODEWITHSUNDEEP
javascriptgoogle-chromeone-time-password
Sugandha Mishra
Sugandha Mishra

Reputation: 109

Web OTP api giving DOMException: OTP retrieval timed out

I am trying the autofill functionality using the Web OTP API. In the mobile, while testing it out I get a pop up to allow to read the OTP, however after allowing it doesnt fill the OTP field. In the console I get request timed out error. Does somebody has any idea on this. It would be really helpful. Below is the code which I have written(react app ) :-

            console.log("otp credential in window");
            //window.addEventListener('DOMContentLoaded', e => {
                const input = document.querySelector('input[autocomplete="one-time-code"]');
                console.log("input is ", input);
                if (!input) return;
                const ac = new AbortController();
                console.log("before form");
                const form = input.closest('form');
                if (form) {
                    console.log("inside if form ");
                    form.addEventListener('submit', e => {
                        ac.abort();
                    });
                }
                navigator.credentials.get({
                    otp: { transport:['sms'] },
                    signal: ac.signal
                }).then(otp => {
                    console.log("promise resolved");
                    input.value = otp.code;
                    if (form) form.submit();
                }).catch(err => {
                    console.log(err);
                });
           // });
        }

Upvotes: 2

Views: 2427

Answers (1)

djmayank
djmayank

Reputation: 392

You have to follow the convention of the OTP, you have been getting that wrong, hence the API is unable to read the OTP.

The correct format is:

  1. The message can begin with an optional human readable text which can be few words. For example: Don’t Share your OTP or Never share your OTP or any other relevant text.
  2. The Last line of the message plays an important role which consists of two parts. One is the host part and other is the OTP. The host part of the URL of the website that invoked the API must be preceded by ‘@’ sign. The next part is the OTP which should preceded by ‘#’ pound sign. For example: @www.blabla.com #2334

    For more check: https://tech.oyorooms.com/implementing-automatic-sms-verification-for-websites-oyo-9375feba0749

Upvotes: 3

Related Questions