WebOTP API over web Angular 13 can't retrieve sms

Question

I have Angular projects versions 8 and 13 , I need to implement an automatic OTP retrieval when using mobile in Chrome 99.0.4844.88.

async otpRequest() {
        if ('OTPCredential' in window) {
          const abortController = new AbortController();
          let timer = setTimeout(() => {
            abortController.abort();
          }, 100 * 1000);
    
          let o = {
            otp: { transport: ['sms'] },
            signal: abortController.signal
          };
    
          let content;
          try{
            content = await window.navigator['credentials'].get(o);
            alert(content.code); 
          }catch(err){
            alert(err); 
          } 
        }
      }
    

I am getting this message as expected:
[![enter image description here][1]][1]
  [1]: https://i.stack.imgur.com/EexIJ.jpg

But the sms code can not be retrieved , it seems the get function can not access the sms box on my phone.

Answer 1

I faced similar issue in Angular 11. Fixed it by calling detectChanges from ChangeDetectorRef.

Either use .then after .get(o)(instead of async/await) or manually trigger changeDetection.

This is what I did -> Just add ChangeDetectorRef in constructor

constructor(private cdr: ChangeDetectorRef) {
  super();
}

And call this.cdr.detectChanges() after your await, something like this

content = await window.navigator['credentials'].get(o);
this.cdr.detectChanges();

Other troubleshooting steps

1. Make sure the OTP is received before your setTimeout of 100 seconds because your are aborting the controller after 100 seconds.
2. Make sure the received message is in below format.
   Note: The text after @ will be the domain and the text after the # will be the OTP number.

Your authentication code is 123456.

@example.com #123456

3. Check Browser compatibility