UX Tip #15: Automatically validate one-time passcodes

Reduce friction and remove unnecessary steps by automatically validating one-time passcodes

Pro tip: When expecting users to paste one-time passcodes, automatically validate them.

Automatically validate autofilled information such as One Time Passcodes (OTP)

One-time passcodes (OTP) are one of the most commonly used patterns for two factor authentication (2FA) in modern products and applications.

However, they can sometimes add unnecessary friction: A one-time passcode flow may add anything from two to three additional taps before your user can sign in to your product.

That's why it's often a good idea to automatically validate them once the user has filled in all required digits/letters.

Why is it useful?

By automatically validating the field and taking users to the next step, you are removing an unnecessary tap needed to submit the code.

Bear in mind, however, that real-time validation is tricky when done too early. Only validate a field after the user has finished typing or pasting the required information. For example, if your one-time passcode is 6 digits long, you should only trigger the automatic validation once all 6 digits have been filled.

What's an example?

Many modern apps that use one-time passcodes for two-factor authentication automatically validate them.

Here is an example from the Airbnb mobile app on IOS:

💡Quick tip: Indicate the number of digits
A nice little tip to improve one-time passcode UX is indicate how many digits or letters are required, also known as form masking. It creates a clear expectation of what your user needs to input, and is especially helpful in situations where autofill may not be available e.g. receiving OTPs via email.