Verify a phone number on desktop using WebOTP API

Starting from Chrome 93, websites can verify phone numbers from desktop Chrome.

Yi Gu
Eiji Kitamura

WebOTP helps users enter a phone number verification code on a mobile website in one tap without switching between apps. Chrome 93 extends this functionality to desktop as well. Read on to learn more.

Introduction

SMS OTPs (one-time passwords) are commonly used to verify a phone number, for example as a second step in authentication, or to verify payments on the web. However, the entire flow of switching from desktop to mobile, opening the SMS app, memorizing and entering the OTP on the original website back on desktop adds friction. It's easy to make mistakes this way and it's vulnerable to phishing attacks.

The WebOTP API gives websites the ability to programmatically obtain the one-time password from a SMS message and automatically fill the form for users with just one tap without switching apps. The SMS has a specific format and it's bound to the origin, so it mitigates the risk of phishing websites stealing the OTP as well.

WebOTP API in action.

One use case that has yet to be supported in WebOTP is targeting phone number verification requests from a remote desktop device or a laptop—the API only works on devices that have telephony capabilities. The API now supports listening for SMSes received on other devices to assist users in completing phone number verification on desktop in Chrome 93.

WebOTP API on desktop.

Try it out

Prerequisites

Demo

To try this seamless phone number verification flow on desktop yourself, follow these steps:

  1. Go to https://web-otp-demo.glitch.me/ on desktop. Click the Verify button.
  2. Send the exact text message that was on the screen from a second phone to the Android device.
  3. When the SMS is delivered to the Android device, a dialog appears asking if you want to verify the phone number on the desktop. Press Submit to approve.
  4. On the desktop, the verification code sent to the Android device should be autofilled in the input field.

How WebOTP API works

Let's look at how WebOTP API works:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

The SMS message must be formatted with the origin-bound one-time codes.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

Notice that the last line contains the origin to be bound to preceded with a @ followed by the OTP preceded with a #.

When the text message arrives, an info bar pops up and prompts the user to verify their phone number. After the user clicks the Verify button, the browser automatically forwards the OTP to the site and resolves the navigator.credentials.get(). The website can then extract the OTP and complete the verification process.

Learn more at Verify phone numbers on the web with the WebOTP API.

How to use WebOTP API on desktop

Phone number verification via SMS is widely used and platform agnostic. Any use cases on mobile devices should be applicable to desktop devices.

Using WebOTP API on desktop is the same as on mobile, so websites can deploy the same code across platforms.

Browser support and interoperability

This feature is powered by Chrome Sync so it works Chrome only at the moment. Receiving and transmitting SMS on iOS or iPad OS in Chrome is not supported.

While browser engines other than Chromium do not implement the WebOTP API, Safari shares the same SMS format with its input[autocomplete="one-time-code"] support. In Safari, as long as a user has turned on iMessage auto-sync, when an SMS that contains an origin-bound one-time code format arrives with the matched origin on iOS or iPadOS, the message gets forwarded to macOS. If the user focuses on the input field, Safari will suggest the OTP for the user to enter.

Feedback

Your feedback is invaluable in making WebOTP API better. Try it out and let us know what you think.

Photo by Luis Villasmil on Unsplash