Advance JS: OTP AutoFill in Web

1. Deep Dive into the Advanced JavaScript Features

Advance Javascript Feature 1. OTP AutoFill in Web

The JavaScript has been evolved a lot and one of the widely used language in the world. In this article, we are discussing, Auto Fill OTP feature in web using advance javascript.

The WebOTP API provides a streamlined user experience for web apps using Credential Management API. Let’s play with the code.

We are checking the support of the Web API as it can fail in multiple browsers.

// You can use window instead of globalThis 
const isBrowserSupport = () => globalThis.OTPCredential;

Now let’s use the credential management api using credentials.get to provide auto fill OTP feature.

navigator.credentials.get({
  otp: { transport: ['sms'] },
})
.then((otp) => {
  const { code } = otp; 
  console.log(code); // Provide OTP you got in your sms
})
.catch((error) => console.log('ERROR'));

That’s it. Pretty cool, right. Your application is waiting for the message, to show auto OTP fill popup. Let’s use AbortController to abort the listen.

// You can use window instead of globalThis
const isBrowserSupport = () => globalThis?.OTPCredential;

const abortAutoFill = (abort, time = 2) => {
  setTimeout(() => {
    abort.abort();
  }, time * 60 *…