Flexible language selection is an optional feature that allows users to select their preferred language on prompts associated with your application, such as the login screen. You can configure this feature individually for different Universal Login prompts. After implementing this feature for a specific prompt, a language selection menu is added to the associated screen. Users can choose a preferred language from this menu to automatically render the prompt in that language.
Two Universal Login prompts showing the language selection menu.

​
Before you begin

Before you can implement flexible language selection, ensure the following requirements are met:

​
Implement flexible language selection

Setting up flexible language selection includes two primary steps:
  1. Preparing your page template to facilitate language selection.
  2. Configuring individual prompts to display language selection to users.

​
Prepare your Universal Login page template

To get started, add the following script to your Universal Login page template to facilitate language selection. 
<script>
  function updateSelectedLanguage() {
    const selectElement = document.getElementById('\''language'\'');
    const selectedValue = selectElement.value;
    const options = selectElement.options;
    for (let i = 0; i < options.length; i++) {
      if (options[i].value === selectedValue) {
        options[i].selected = true;
      } else {
        options[i].selected = false;
      }
    }
    document.getElementById('\''changeLanguage'\'').click();
  }
</script>
This script enables Universal Login prompts to render a dynamic language selection menu. Users can access this menu to apply their preferred language to a configured prompt. To add this script to your page template, use the Set Template for Universal Login endpoint.
Be aware that this call will overwrite any existing configurations you have made to your Universal Login page template. To avoid any disruptions, ensure you include all necessary page template customizations in this call.
curl --request PUT \
  --url 'https://{yourDomain}/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer MANAGEMENT_API_TOKEN' \
  --header 'content-type: text/html' \
  --data '<!DOCTYPE html>
<html>
<head>{%- auth0:head -%}</head>
<body class='\''_widget-auto-layout'\''>{%- auth0:widget -%}</body>
<script>
  function updateSelectedLanguage() {
    const selectElement = document.getElementById('\''language'\'');
    const selectedValue = selectElement.value;
    const options = selectElement.options;
    for (let i = 0; i < options.length; i++) {
      if (options[i].value === selectedValue) {
        options[i].selected = true;
      } else {
        options[i].selected = false;
      }
    }
    document.getElementById('\''changeLanguage'\'').click();
  }
</script>'

​
Configure individual Universal Login prompts

Next, add language selection to one or more Universal Login prompts by configuring custom prompt partials. Partials refer to custom code inserted into an entry point within a prompt screen, such as the login screen. To learn more, review Customize Signup and Login Prompts. To add language selection to a specific prompt, use the Auth0 to configure custom prompt partials with the following parameters:
ParameterDescriptionExample Value                             
languageRequired.

One or more languages to include in the language selection menu displayed to users.		es,fr,en
persistRequired.

Determines whether the language should persist across the session.		session
actionOptional.

Use this parameter in situations where you want users to be able to update their language without advancing the prompt.

If the value is provided, the form is not automatically submitted when a user changes their language. Otherwise, the prompt automatically advances when a different language is selected.		change-language
Access the sections below to review code samples for different types of Universal Login prompts.
In the code samples below, ensure you replace the placeholders with the appropriate values:
  • Replace {yourDomain} with yourdomain.auth0.com.
  • Replace {mgmtApiToken} with your access token.