DEV Community

How to auto verify OTP on the web using the new Web OTP API?

Jyotishman Saikia on October 15, 2020

WebOTP is an important API to verify OTP on the phone web browser automatically without having to manually type your OTP. Chrome recently release...

Read full post

Mohammad Naderi • Mar 14 '21

Hey Jyotishman, I'm using the same in my nextJS App, but when I get the pop-up and press allow, it doesn't fill my input with the OTP number; I tried a million ways to fix it, but I get Nothing. Do u know why?

Jyotishman Saikia • Mar 16 '21

Hey in that case first you will have to pick the otp from the message. Why dont u console.log your otp first from the message ?

Divya Agarwal • Sep 10

hey I wrote
onst handleOTPAutoFill = useCallback(() => {
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const ac = new AbortController();
navigator.credentials
.get({
otp: { transport: ['sms'] },
signal: ac.signal,
} as OTPCredentialRequestOptions)
.then((otp: any) => {
if (otp && otp.code) {
console.log(otp, 'OTP in autofill');
const otpArray = otp.code.split('');
console.log(otpArray, 'OTParray');
const updatedOtpValue = otpArray.slice(0, 6);
console.log(updatedOtpValue, 'updatedOTPValue');
setOtpValue(updatedOtpValue);
handleOTPChange(updatedOtpValue);
handleVerifyOnClick();
console.log('abort after this');
ac.abort();
console.log('end');
}
})
.catch(err => {
console.error('OTP Autofill error:', err);
});
});
} else {
alert('WebOTP not supported!.');
}
}, []);

useEffect(() => {
handleOTPAutoFill();
}, [handleOTPAutoFill]);

and chrome ask for permission but nothing happens after it
it says the otp for your adhar num xxx is 648375.
what should I do @jyotishman @mhmdndri

Jyotishman Saikia • Sep 13

are u trying on localhost ?

ashishjob0424 • Dec 17 '21

Hi Mohammad,

I am also facing the same problem, can you please help me to resolve this issue.

Partha Sarathi Nayak • Mar 23 '21

Hi Mohammed, was your problem resolved? If yes, then can you tell me how? I am facing the same issue. Thanks.

Mohammad Naderi • Mar 23 '21

Yes, I solve it. The most important part is the text of the SMS. I deploy and test, and as he said in the article, it should contain the domain Address and the OTP code with #. remember you should use "navigator.credential.get " in the useEffect. I hope you can solve it, but If you can't, text me here to check your code together and solve it.

Suhasini Singyan • Apr 26 '21

Hey can you help me with this. facing issue as it does ask for permission but doesn't paste the OTP.

Jyotishman Saikia • Apr 30 '21

What issue are u getting? @suhasini_singyan_8aa3ad76

ashishjob0424 • Dec 17 '21

Hi Partha,

I am also facing the same problem, can you please help me to resolve this issue.

VikramJS • Nov 27 '20 • Edited

Hey Jyotishman. I am using same for a while but it pop up everytime an sms having OTP received from different source like bank, zomatoetc.,

how can i prevent it. pop up everytime a new OTP SMS received.
I tried on button clicked but no luck.

with correct domain name
dev-to-uploads.s3.amazonaws.com/i/...

with wrong domain name.
dev-to-uploads.s3.amazonaws.com/i/...

Jyotishman Saikia • Nov 28 '20

hi, Can you send the sample code so i that i can assist u better where you might be wrong.

VikramJS • Nov 28 '20 • Edited

This is form page.



< form action="ok.html" method="POST" >


  < input type="number" class="form-control" id="mobileNo" placeholder="10 Digit Mobile No">

< button class="btn btn-primary" onfocus="test()" name="sendOTP">Validate

  

  < input type="text" class="form-control" id="OTP" placeholder="OTP" autocomplete="one-time-code">


  < button class="btn btn-primary btn-style" id="validateOTP">Verify

< /form>

And this is script.

function test(){


if ('OTPCredential' in window) {


  console.log("in OTPCredentials");


  window.addEventListener("DOMContentLoaded", e => {


    const input = document.querySelector('input[autocomplete="one-time-code"]');


    const button = document.querySelector("button[type='submit']");


    if (!input) return;


    const ac = new AbortController();


    const form = input.closest('form');


    if (form) {


      form.addEventListener('submit', e => {


        console.log("ac.abort() is called");


        ac.abort();


      });


    } 


    console.log("WebOTP API is called");


    navigator.credentials.get({


      otp: { transport:['sms'] },


      signal: ac.signal


    }).then(otp => {


      input.value = otp.code;


      if (form) form.submit();


      console.log("submit() is called");


      navigator.credentials.preventSilentAccess();


    }).catch(err => {


      console.log(err);


    });


  });


}


  const message = document.querySelector('#message');


    message.innerText = Your OTP is: 123456.\n@${window.location.host} #123456;


}

Sumit Kandoi • Jul 5 '21

@oceanrational : I have one doubt on your above code why you gave

const form = input.closest('form');
form id should come instead of form. What do you think?

Sumit Kandoi • Jul 5 '21 • Edited

@jyotishman In your code implementation I have seen

const form = input.closest('form'); which form is this ?

When we are submitting form does it means after otp is autofilled it will redirect to next page

I have written below code but it's not submitting my custom form.
Do we need to give input.closest('form '); here for every case ?

Below is my code implementation for autofill otp

if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
const ac = new AbortController();
const form = input.closest('firstInput');
if (form) {
form.addEventListener('submit', e => {
ac.abort();
});
}
navigator.credentials.get({
otp: {transport: ['sms']},
signal: ac.signal
}).then(otp => {
input.value = otp.code;

            console.log("Form Value ::::" + form);
            if (form) form.submit();
        }).catch(err => {
            console.log(err);
        });
    });
}

Guilherme • Jun 10 '23

hi Jyotishman! is this api / demo still working?
i've tried your demo and isn't working for me. Im using clicksend.com to send the SMS to my device. the auth dialog never appers, thus the reading of the SMS...

thanks!

Sahil Bisht • Apr 4

Hey Jyotishman, My input have 4 separate field how to autocomplete them any idea ? I think this will work only if we have a single input field

Jyotishman Saikia • Apr 8

in that case u have to programatically fetch the otp and split the numbers into 4 digits.

or another case would be make one input and design from css that it look like 4 input boxes.