What is Web OTP, and which benefits do it provide to users?

More and more online services are introducing new ways to confirm login to their services. Logging in with an OTP confirmation token is becoming a very common practice. But such authorization methods have their disadvantages such as bad UX and what if the user does not have a phone with him, what is the other authentication confirmation method?

WebOTP is a Web API browser function integrated into Chrome, Samsung Internet and Opera Mobile (Apple devices have their version), browsers on mobile devices, intended for obtaining an OTP (One-Time-Password) in the process of two-factor or multi-factor with the help of an SMS message.

How WebOTP works

An example of using WebOTP in practice.

The user logs in to the website with his user data (email and password), and then the server sends him an SMS message in the prescribed format and an OTP token.

If the browser detects the message, it prompts the user to allow access to read the SMS message.

If the user gives permission, the OTP is automatically entered in the OTP input field and the form is sent to the server, which confirms the validity of the entered OTP token.

If the OTP token is valid, the user is logged in, it is not.

A page must use the WebOTP API to have a valid SSL certificate and a secure HTTPS connection established, otherwise, this WebAPI will not work.

SMS message format

A standardized message format is provided for using the WebOTP API so that the browser can successfully read the data from the message.

Message content:

Message to the user (optional) -> message to the user;
Website domain (mandatory) -> must be written in its line and start with @ and continue with the domain name without path and protocol;
OTP (mandatory) -> written in the same line as the domain, the OTP value can be from four to six digits. The OTP must start in the message with #.

Example of SMS with OTP

@www.example.com #123456

The most common mistakes in OTP messages:

Incorrect message format	Error description
Your PIN: #123456	The code must be on its line with the specified domain.
Your registration code: @www.example.com #123456	Domain and OTP must be on their line.
@https://example.com #123456	The URL scheme must not be included.
@example.com/otp.html #123456	The URL must not include a path
@example.com #123456 Your code for login: 123456.	The domain and OTP must be the last line of the message.
Your login code is 123456. @www.example.com#123456	There must be one space between the domain and the OTP.
Hi, I'll be home by lunch today 😊	Missing @ and #.
Your login code is 123456. www.example.com #123456	@ is missing before the domain.

User-Side Code Example (JavaScript)

<!DOCTYPE html>
<html>
   <head>
      <title>Test WebOTP API</title>
   </head>
   <body>
      <form>
         <!-- Form is a GET method to see the sent request -->
         <label for="otp_input">OTP</label>
         <input autocomplete="one-time-code" name="otp_input" id="otp_input" required/>
         <input type="submit">
      </form>
   </body>
   <script>
      if ('OTPCredential' in window) { // Checking if OTP is even available in the browser
      console.log(true)
      window.addEventListener('DOMContentLoaded', e => {
      const input = document.querySelector('input[autocomplete="one-time-code"]');
      if (!input) return;
          const ac = new AbortController();
          const form = input.closest('form');
      if (form) {
          form.addEventListener('submit', e => {
              ac.abort();
          });
      }
      navigator.credentials.get({
          otp: { transport:['sms'] },
          signal: ac.signal
      }).then(otp => { // In case of successful reading of the message, sending the OTP message
          input.value = otp.code; // Enter the OTP value
          console.log(otp)
          if (form) form.submit(); // Form submission
          }).catch(err => {
              console.error(err); // Log an error in case of error
          });
          });
      }
   </script>
</html>

There is a Web component for integration into websites. The web component is written in the JavaScript programming language and can be installed using the NPM tool.

This library is available on GitHub and it is licensed under the MIT license.

Browser support

The most commonly used browsers on Android phones are supported. Apple devices are not supported but use their own Apple AutoFill.

Chrome, Edge and Opera desktop browsers are also supported, as sending is possible OTP from the phone to the computer if the conditions for this are met (https://developer.chrome.com/blog/cross-device-webotp).

Advantages of using WebOTP

The main advantage of using the WebOTP functions is a better user experience of entering OTPs, as there is no need to open the SMS message and copy it only to the application itself.

I would suggest adding to the login flow the possibility of a different login method in case the user does not have his phone with him to read and enter the OTP.

Taken from:

What is Web OTP, and which benefits do it provide to users?

Comments

Development 🧑‍💻

The importance of application testing🤖

More from this blog

Push Notifications: How They Work & Why They Matter

🔐Exploring Ways to Secure Your App: From Cookies to Two-Step Verification

📂File Management with JavaScript in Node.js

🎓 GitHub for students benefits (must know if you are a student)