Why do we need Auto-verification?

Locating an OTP within an SMS message and copying and pasting it into a form can be cumbersome, lowering conversion rates during critical user journeys. This technique accelerates the login process by 37%.

What is WebOTP API?

WebOTP is a crucial API for automatically verifying OTPs on the phone's web browser, eliminating the need to manually enter OTPs. The WebOTP API enables your app to receive specially formatted messages linked to your app's domain. With this capability, you can programmatically retrieve OTPs from SMS messages and facilitate easier phone number verification for users.

Implementation

function autoReadSMS() {
    const ac = new AbortController();
    setTimeout(() => {
      ac?.abort();
    }, 1 * 60 * 1000 * 10);
    setIsOTPReceived(false);
    (async () => {
      if ("OTPCredential" in window) {
        try {
          if (navigator?.credentials) {
            try {
              const content: any = await navigator.credentials.get({
                signal: ac?.signal,
                otp: { transport: ["sms"] },
              } as CustomCredentialRequestOptions);
              if (content && content?.code) {
                // store your OTP here
                console.log(content?.code);
              }
            } catch (e) {
              console.error(e);
              return;
            }
          }
        } catch (err) {
          console.error(err);
        }
      }
    })();
  }

• Utilize navigator.credentials.get() to retrieve the OTP. It possesses only one property: transport, whose value must be an array containing the string 'sms'.

• signal is employed to deactivate the navigator.credentials or the API autoreading capability. This precaution is necessary because if the OTP is not received, the API will indefinitely await the SMS.

• If the user manually inputs an OTP and submits the form, you can terminate the get() call by utilizing an AbortController instance within the options object."

SMS Format

• The message starts with (optional) human-readable text, which includes a four to ten-character alphanumeric string with at least one number. The last line is reserved for the URL and the OTP.

• The domain part of the URL for the website that triggered the API must be prefixed with '@'.

• The URL must include a pound sign ('#') followed by the OTP.

For example:

Your OTP is: 123456.
@www.abc.com #123456

References

Web.dev: Verify phone numbers on the web with the Web OTP API