SMS OTP form best practices
summary
Use concrete form attributes and the SMS format: set type="text" + inputmode="numeric" to show a numeric keyboard, add autocomplete="one-time-code" for Safari autofill, and implement the Web OTP flow via navigator.credentials.get({otp: {transport: ['sms']}}) to receive the code in JS. Send SMS with a trailing line like "@yourdomain #123456" so browsers bind the OTP to the site. Chrome/Opera/Vivaldi support Web OTP; Tinder/Match +2.5% completion, Oyo −37% login time, Goibibo −25% signup retry.
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:20Sign-in with password
- 1:152 Step Verification with SMS OTP
- 1:57Other use cases with SMS OTP
- 3:50Don't use type="number", use type="text"
- 4:07Use inputmode="numeric"
- 5:41autocomplete="one-time-code" on Safari
- 6:37Web OTP API on Chrome
- 7:39Recap
related talks
51mWeb APIs for delightful two factor auth experiences
24m2FA in 2020 and Beyond
41mThe state of passwordless auth on the web
38mThe Present and Future of Standardized Authentication Specifications You Can Experience on Android/Chrome
19mBuilding Forms Mobile Users Will Love
47mThe state of passwordless auth on the web
48m2FA2Furious: New Threats to MFA
21mBringing back dial-up: the internet over SMS