Enable Phone Number Suggestion on an iPhone Keyboard

Knowledge Articles
1

Overview

This article provides a guide for configuring a Universal Login sign-up and login prompt to enable phone number suggestions on an iPhone keyboard. This configuration allows end users to expedite the sign-up process.

Applies To

  • Auth0 CLI
  • Auth0 Universal Login

Cause

The default configuration of Universal Login prompts does not include the necessary HTML attributes to trigger the phone number suggestion feature on an iPhone keyboard.

Solution

To enable phone number suggestions on an iPhone keyboard, modify the sign-up and login prompt using the Auth0 Command Line Interface (CLI) or the Partials endpoint.

Encapsulate the input field in a <form> container and include the following attributes within the <input> tag:

  • type="tel"
  • inputmode="tel"
  • autocomplete="tel"

Implement a similar structure to the following example, after reviewing it for the specific implementation:

<form>

<div class="input-group">

<label for="phone_number">Phone Number</label>

<input type="tel" id="phone_number" name="phone_number" inputmode="tel" autocomplete="tel" placeholder="(555) 123-4567" />

</div>

</form>

Use the Auth0 CLI to deploy the change or use the Partials endpoint to customize the sign-up and login prompts, as detailed in the document Customize Signup and Login Prompts.

1 Like