Enable Mobile OS Autofill for OTP Codes in Auth0 Universal Login

Knowledge Articles
1

Overview

This article explains how to enable mobile operating system (OS) level autofill suggestions for One-Time Password (OTP) codes received via SMS or email when using Auth0 Universal Login (UL). By default, the OTP input field in UL may not have the necessary HTML attribute to trigger this functionality on iOS and Android devices. This can lead to users needing to manually copy and paste codes.

Applies To

  • Auth0 Universal Login (UL) (New Universal Login Experience recommended)
  • Passwordless connections using email OTP or SMS OTP
  • Multi-Factor Authentication (MFA) using OTP authenticators
  • Mobile devices (iOS and Android)

Solution

Mobile operating systems, such as iOS and Android, look for the autocomplete="one-time-code" HTML attribute on an input field to identify it as a One-Time Password (OTP) field. This attribute enables the OS to suggest OTP codes for autofill. The standard OTP input field in Auth0 Universal Login (UL) pages may not include this attribute by default, which prevents autofill functionality.

Currently, there is no out-of-the-box setting to enable this attribute in the default UL interface. To enable OTP autofill:

  1. Use Custom JavaScript in Universal Login: Modify the Universal Login page template to include custom JavaScript. This script should dynamically set the autocomplete attribute of the OTP input field to one-time-code after the page has loaded.
  • It is recommended to target the input field by its name attribute (for example, input[name='code']), as this is less likely to change in future Universal Login updates.

Alternatively, for full control over the HTML:

  1. Implement Auth0 Custom Universal Login (ACUL): Develop a completely custom login screen using ACUL. This method allows direct modification of all HTML attributes but is a more involved approach. Auth0 Custom Universal Login (ACUL) involves hosting the user interface components.