Numeric Keyboard Input on Mobile Devices for Passwordless Email OTP

Knowledge Articles
1

Overview

This article covers how to show the numeric keyboard on mobile devices on the passwordless email One Time Password (OTP) input screen (login-passwordless-email-code).

Applies To

  • Passwordless Email One Time Password (OTP)
  • Numeric Keyboard
  • Mobile Devices

Solution

This can be achieved with a custom page template that uses JavaScript to set the following attributes on the code input element on the login-passwordless-email-code screen:

  • type=“number”
  • inputMode=“numeric” (required for iOS)

Here’s an example:

<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
</head>
<body>
{%- auth0:widget -%}
<script>
{% if prompt.screen.name == 'login-passwordless-email-code' %}
const codeInput = document.getElementById('code');
codeInput.type = 'number';
codeInput.inputMode = 'numeric';
{% endif %}
</script>
</body>
</html>

NOTE:

To apply the template it is necessary to use the management API. Please refer to the Page Templates API section for further details.

It’s also worth noting that custom templates will only be rendered when using a custom domain. Using the canonical domain (e.g., ..auth0.com) will show the default template regardless of configuration.