DEV Community

Cover image for 🤖 WebOTP API: State of art and UX improvements
Tuna
Tuna

Posted on

🤖 WebOTP API: State of art and UX improvements

#webotp #webdev #ux

Phone number verification via OTP via SMS is everyday practice these days: we use it for two-factor authentication, for recovering accounts, and for payment verification. But how secure is it actually? And most importantly — how can we improve user experience without sacrificing security?

🎯 The Problem with Traditional OTPs

Looking back, especially with slower smartphones, OTPs always felt clunky.
You’re browsing a website when the SMS arrives. You switch apps, but your phone lags. You try to copy just the code, but end up selecting the entire message. Frustrated, you decide to type it manually — only to mistype a digit with your thumbs. Meanwhile, the phone keeps freezing and your patience is running out.

The point is clear: a slow, error-prone, and frustrating process.

💿 Support

The WebOTP API remains an experimental extension of the Credential Management API. It’s designed to streamline SMS-based OTP entry by letting browsers auto-fill codes—once the user consents. However, it's not fully production-ready across all browsers.

If it's not fully supported yet, why is it so popular?

Despite its limited browser support, the popularity comes down to a few key factors:

  1. The API dramatically improves the overall UX bypassing the user manual entry.
  2. Low implementation effort for the developers, just a bunch lines of code are needed
  3. Google and W3C are pushing for passwordless and secure login methods
  4. Done is better than perfect

Cool, but who's supporting this feature at the moment?

  • Chrome
  • Opera
  • Safari (Partially)

🧬 How to?

Implementing a proper OTP form is quite easy.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>
Enter fullscreen mode Exit fullscreen mode

Here's explained every prop:

  • type="text" Avoids leading zero numbers error when using type number
  • inputmode="numeric" Triggers the numeric keyboard on mobile
  • autocomplete="one-time-code"On mobile suggests OTP directly from SMS
  • pattern="\d{6}" Ensures only 6 digits code

🙋Works with every message?

Not exactly 🙂

The WebOTP API doesn’t work with every SMS message. It only triggers if the OTP message is in the origin-bound format that browsers expect:

Your code is 123456  

@yourdomain.com #123456
Enter fullscreen mode Exit fullscreen mode

Requirements:

  • The last line must contain your domain preceded by @.
  • The OTP must follow a # symbol.
  • The SMS must be short enough (under ~140 characters).
  • The page must be served over HTTPS.

👋 Conclusion & Future Outlook

SMS OTP isn't perfect: it's still vulnerable to phishing and SIM swap attacks. For more secure alternatives, the future is in WebAuthn and biometric authentication.

But in the meantime, WebOTP API lets us do this:

  • Reduce manual input errors.
  • Dramatically improve UX.
  • Improve security with a simple change of formatting.

👉 The future may not rely on SMS at all — but in the meantime, we can make it intelligent and safer.

👏 Thank you for reading.
This is my first article.
If you found this useful let me know and share it.
See you around!

Top comments (0)