WebOTP
The OTPCredential API represents a one-time-password (OTP). It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The OTPCredential API represents a one-time-password (OTP). It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
OTPCredential Experimental | 93 | 93 | | | 84 | |
get (otp option) Experimental `otp` option | 93 | 93 | | | 84 | |
code Experimental The code read-only property of the OTPCredential interface contains the one-time password (OTP). | 93 | 93 | | | 84 | |
| Other | ||||||
html.elements.iframe.allow.otp-credentials Experimental | 93 | 93 | | | 84 | |
http.headers.Permissions-Policy.otp-credentials Experimental The HTTP Permissions-Policy header otp-credentials directive controls whether the current document is allowed to use the WebOTP API to request a one-time password (OTP) from a specially-formatted SMS message sent by the app's server, i.e., via {{domxref("CredentialsContainer.get", "navigator.credentials.get({otp: ..., ...})")}}. | 93 | 93 | | | 88 | |
Syntax
const otp = await navigator.credentials.get({
otp: { transport: ['sms'] }
});
if (otp) {
document.getElementById('otp-input').value = otp.code;
}Use cases
Strengthen integration
Use WebOTP when browser APIs need clearer security boundaries or more explicit capabilities.
Connect platform features
Apply WebOTP when your app benefits from deeper browser or device integration.
Cautions
- Test WebOTP in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure WebOTP supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features