HTML autocomplete "one-time-code"

Apps and websites on iOS can autocomplete one time codes sent via SMS. But how can you implement this on your website?

I saw a tweet from Alvaro Trigo where he shows a way to autofill Autofill inputs fields using security codes sent by SMS. This is all done by the browser without any JavaScript, it's pure HTML.

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.

Example

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"/>

Availability

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."