No Login Data Private Local Save

Web OTP API Demo - Online Auto‑Read SMS Codes

26
0
0
0

Web OTP API Demo

Online Auto‑Read SMS Codes Simulator — Experience the Web OTP API with AbortController

@example.com Simulation Mode
9:41
Messages SMS
Waiting for SMS...
Send a test message to begin
Verification Code
Enter code manually or auto-fill via SMS
SMS Composer
@
📩 SMS Preview:
@example.com Your verification code is: 123456
1.0s
Listener Controls
Idle
00:00
Elapsed Time
AbortController: not created signal: inactive
0
SMS Sent
0
OTP Extracted
0
Aborted
JavaScript Implementation
// Web OTP API with AbortController
const abortController = new AbortController();

async function requestOTP() {
  try {
    const otp = await navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: abortController.signal
    });
    
    // OTP extracted successfully
    console.log('OTP:', otp.code);
    return otp.code;
    
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('OTP listening cancelled');
    }
    throw err;
  }
}

// To cancel listening:
abortController.abort();
Event Log
--:--:-- Tool initialized. Click "Start Listening" to begin the simulation.

Frequently Asked Questions

The Web OTP API is a browser API that allows web applications to automatically read one-time passwords (OTPs) from SMS messages. When a user receives an SMS containing a verification code, the browser can automatically extract the code and fill it into the web form — no manual typing required. This significantly improves the user experience during two-factor authentication (2FA) and phone number verification flows. The API is part of the Credential Management API family and uses navigator.credentials.get() with the otp option.

The SMS message must include the @domain that matches the requesting website's origin (eTLD+1). The recommended format is:

@example.com Your verification code is: 123456

Key requirements:
  • The @domain must appear in the SMS body (preferably at the beginning or end)
  • The domain must match the origin of the web page requesting the OTP
  • The OTP code (typically 4-8 digits) must be present in the message
  • The SMS can contain additional text before or after the @domain and OTP
Examples of valid SMS:
  • @example.com 123456
  • 123456 is your code @example.com
  • @example.com Your OTP for login is 123456. Do not share it.

AbortController is crucial for managing the OTP listening lifecycle:
  • User manually enters the code: If the user decides to type the OTP manually, you should abort the listener to free resources
  • Timeout handling: Implement a timeout (e.g., 30-60 seconds) and abort if no SMS arrives
  • Navigation away: Clean up when the user leaves the page or closes the modal
  • Multiple requests: Prevent stale listeners when the user requests a new OTP
  • Resource management: Avoid leaving hanging promises that could cause memory leaks
Without AbortController, the browser may continue listening for SMS indefinitely, consuming resources and potentially causing unexpected behavior.

As of 2024, Web OTP API is supported in:
  • Google Chrome (Android) — Full support since Chrome 84+
  • Microsoft Edge (Android) — Supported
  • Opera (Android) — Supported
  • Samsung Internet (Android) — Supported
Not supported on: Desktop browsers, iOS Safari, Firefox. This is because the API relies on the operating system's SMS retrieval capabilities, which are primarily available on Android. On unsupported platforms, websites should fall back to manual OTP entry. This simulator allows you to experience the API on any platform.

Here's a complete implementation checklist:
  1. SMS Format: Ensure your SMS includes @yourdomain.com and the OTP code
  2. User Gesture: The API must be triggered by a user action (click, tap)
  3. HTTPS Required: The page must be served over HTTPS (or localhost for development)
  4. Create AbortController: For proper cleanup and timeout management
  5. Call navigator.credentials.get(): With {otp: {transport: ['sms']}}
  6. Handle the OTP: On success, auto-fill the input field
  7. Handle errors: Catch AbortError and other exceptions gracefully
  8. Provide fallback: Allow manual entry for unsupported browsers
Copy the code example shown above to get started quickly.

The @domain prefix serves as a security mechanism to ensure that only the intended website can read the OTP from an SMS. When the browser receives an SMS, it checks if the @domain in the message matches the origin of the web page that called the API. This prevents malicious websites from intercepting OTPs meant for other services. Without this requirement, any website could potentially read any OTP SMS, creating a significant security vulnerability. The domain matching uses the eTLD+1 rule, meaning @example.com will also match requests from app.example.com or www.example.com.

No, Web OTP API is not available on desktop browsers. The API depends on the operating system's ability to receive and parse SMS messages, which is a feature of mobile operating systems (primarily Android). On desktop, there is no SMS infrastructure for browsers to tap into. If you need OTP functionality on desktop, consider these alternatives:
  • Email OTP — send the code via email instead
  • WebAuthn / Passkeys — modern passwordless authentication
  • Push notifications — send codes via browser push
  • Manual entry — always provide a fallback input for desktop users
  • QR code + mobile — display a QR code that users scan with their phone
This simulator provides a way to test and demo the Web OTP flow on desktop for development and educational purposes.

Yes, the Web OTP API was designed with security and privacy in mind:
  • Domain verification: The @domain in SMS ensures only the matching origin can access the OTP
  • User gesture required: The API must be triggered by explicit user action (click/tap)
  • No SMS reading permission: The browser only extracts the OTP; the web app never sees the full SMS content
  • One-time use: Each call to the API consumes one SMS match; the same SMS cannot be used twice
  • HTTPS enforcement: The API only works on secure origins (HTTPS or localhost)
  • Time-bound: The browser automatically stops listening after a few minutes
  • Transparency: On Android, a bottom sheet appears when the browser reads an SMS, informing the user
Privacy-wise, the web application only receives the extracted OTP code — not the sender's phone number, the full SMS body, or any other message metadata.
🔧 Related Tools