Conditional and Custom Universal Login Text Elements

Knowledge Articles
1

Overview

This article explains a possible method for overriding a text element in the Universal Login prompts.

Applies To

  • Universal Login
  • Page Templates
  • Customize Universal Login Text Elements

Solution

Auth0 does not support this functionality out of the box. However, it is possible to achieve this behavior by obtaining the element with JavaScript and then updating it. Use the following code snippet and add it to the Universal Login page template:

<!DOCTYPE html><html>
    <head>
        {%- auth0:head -%}
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                if ("{{application.name}}" == "{application_name}") {
                    const label = document.querySelector('[data-dynamic-label-for="username"]');
                    if (label) {
                        label.textContent = "{new_text_element}";
                    }
                }
            });
        </script>
    </head>
    <body class="_widget-auto-layout _use-custom-prompt-logo" >
        {%- auth0:widget -%}
    </body>
    <footer class="footer"><ul><li>Privacy Policy</li></ul></footer>
</html>