10

Use one-time-code value of autocomplete attribute with Multi-factor Authentication

Tuesday, October 27, 2020

Using the <input autocomplete="one-time-code"> attribute makes it easy for your users to fill in the provided code with Multi-factor Authentication (MFA) or other forms of non-password authentication such as phone number authentication.

We all know that MFA can be very important for applications, especially those that contain sensitive data such as:

  • personal identifiable information
  • financial information
  • social media
  • and more

Multi-factor Authentication most often involves sending a user a code via SMS, which the user must then enter to confirm their identity. Trying to remember a code, or switching back and forth between apps, can be a hurdle your users certainly do not want.

Instructions

Do

specify the one-time-code autocomplete attribute value for input fields for MFA

Code Examples

specify the autocomplete attribute

<form-field>
  <input type="text" name="code" autocomplete="one-time-code" />
</form-field>

omit the autocomplete attribute

<form-field>
  <input type="text" name="code" />
</form-field>
Brian Love

I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.

Google Developers Expert

Discussions are healthy ❤️