Web OTP - Interactive Tool | IconVault
Learn the WebOTP API: SMS one-time-code format builder, autocomplete guide, and credential retrieval snippet. Free, runs in your browser.
Web OTP
SMS one-time-code format lab and autocomplete guide
WebOTP support
Checking…
Chrome/Edge on Android with Play Services.
Secure context
Checking…
WebOTP only works on HTTPS origins.
SMS autofill
Try below
On iOS and most browsers, autocomplete="one-time-code" fills codes from SMS.
SMS format lab
WebOTP only reads messages whose last line is exactly @yourdomain.com #123456. Type a domain and code to build a valid sample message.
Your example.com verification code: 739184 @example.com #739184
- • The binding line must be the last line of the message.
- • The domain must match the website origin requesting the code.
- • A real SMS costs a real send - this lab builds the format only.
5 of 5 free copies left.
Try the autofill pattern
This is the exact input your login form needs. On a real phone, a matching SMS offers to fill it automatically.
Markup: <input autocomplete="one-time-code" inputmode="numeric" />
navigator.credentials.get snippet
// Read an SMS one-time code with the WebOTP API
if ("OTPCredential" in window) {
const ac = new AbortController();
setTimeout(() => ac.abort(), 60_000); // stop listening after 1 min
const cred = await navigator.credentials.get({
otp: { transport: ["sms"] },
signal: ac.signal,
});
if (cred && "code" in cred) {
console.log("Code:", cred.code);
}
}About this tool
IconVault's Web OTP playground teaches the WebOTP API, the browser feature that reads SMS verification codes automatically so users never type them. Build a correctly formatted sample SMS with the required @domain #code binding line, check whether your browser and connection support WebOTP, and try the autocomplete="one-time-code" input pattern that triggers autofill. It is free and runs fully in your browser.
The page covers the three things most implementations get wrong: the SMS format (the binding line must be the last line and the domain must match your origin), the HTTPS and browser requirements, and the navigator.credentials.get({ otp }) call with an AbortController timeout. Copy the production-ready snippet and the sample message, then wire them into your login flow with confidence.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon