Universal Login Page Customization - Page Templates

Knowledge Articles
1

Overview

This article explains how to customize the layout and appearance of the login page.

Applies To

  • Universal Login
  • Customizations
  • Customize the layout and appearance of the login page

Solution

The layout and appearance of the login page can be customized using Liquid syntax and Page template variables.

To make advanced changes to the page layout or implement conditional formatting, use Page Templates.

  • Page Templates can also hide specific page elements using CSS or JavaScript (JS).
  • A Custom Domain must be configured for the tenant to use customized page templates.
  • Universal Login page templates can only be updated with the Page Templates API.
  • Page Templates format the HTML page where the login widget renders. For example, use Page Templates to add a background image or control the widget’s position on the page.

Refer to the Customize Universal Login Page Templates documentation for more information.

  • Use CSS to make minor modifications to the login page, such as adding an in-line style sheet or linking to an external stylesheet within the page template.
    • NOTE: CSS class names are not static and change frequently with product updates. Customizations targeting these class names may work temporarily but can eventually fail without notice.
  • Avoid JS customizations if possible.
    • Partials offer an easier implementation and are not affected by changes to the Universal Login Document Object Model (DOM).
    • Universal Login does not depend on JS for its essential functions, although it contains some JS.
    • Add JS script tags to the page template to manipulate page elements, for instance, to hide the signup link.

NOTE: This method introduces a dependency on JS for the page to render as intended. JS customizations also depend on a rigid DOM structure and may break without warning. JS customizations of the login widget are unsupported.

Example code to hide the signup link

<!DOCTYPE html>
<html>
<head>
    {%- auth0:head -%}
</head>
<body class="_widget-auto-layout">
    {%- auth0:widget -%}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function (event) {
            Element.prototype.remove = function () {
                this.parentElement.removeChild(this);
            }
            NodeList.prototype.remove = HTMLCollection.prototype.remove = function () {
                for (var i = this.length - 1; i >= 0; i--) {
                    if (this[i] && this[i].parentElement) {
                        this[i].parentElement.removeChild(this[i]);
                    }
                }
            }
            var xpath = "//a[contains(@href,'signup')]";
            var signUpLink = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            if (signUpLink) {
                signUpLink.parentElement.remove();
            }
        });
    </script>
</body>
</html>