HTML autocomplete "one-time-code"
Published 07 September 2020 16:18 (2-minute read)
Apps and websites on iOS can autocomplete one time codes sent via SMS. But how can you implement this on your website?
It's first introduced during WWDC 2018:
iOS 12 eases the tedious aspects of account setup and sign-in by automatically suggesting and using strong, unique passwords - even from within apps - and by bringing one-time codes to the QuickType bar so users can fill them with one tap.
Here is an example you can use on your website to make it easier for your users to enter the one-time-code from an SMS.
<input type="text" name="auth-token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"/>
At this moment the autocomplete value for one time codes is only in use by Apple. They mention it in their documentation on developer.apple.com.
The site caniuse.com doesn't mention this autocomplete value at this moment, but based on a GitHub issue it's implemented in "Safari 12 on macOS 10.14 and iOS 12.".
The website developer.mozilla.org (MDN web docs) mentions it as a possible value for the autocomplete tag on input fields: "A one-time code used for verifying user identity."