[go: up one dir, main page]

The simplest Web OTP API demo

Send an SMS that includes
@web-otp.glitch.me #12345
at the last line to this phone.
Enter OTP here:

<input type="text" autocomplete="one-time-code" inputmode="numeric" />
<script>
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}
</script>
    
See the source code and play with it at https://glitch.com/edit/#!/web-otp
Learn more at http://web.dev/web-otp.