Unleash Your Creativity: Customizing Auth0 Universal Login Page Templates with the Auth0 CLI

Tired of the default login screen? Your authentication experience is one of the first touchpoints your users have with your brand, and it should be as polished and cohesive as the rest of your application. Auth0's New Universal Login (NUL) offers fantastic security and flexibility, but for ultimate brand consistency, you need to go custom.

Auth0’s New Universal Login offers a tiered approach to customization, ensuring that you can achieve the necessary brand consistency and unique user experience with the least amount of effort.

The three primary levels of customization are:

Level 1: Themes & Branding (No Code)

This is the easiest, safest, and most recommended starting point, managed entirely in the Auth0 Dashboard.

Feature	Details
Control	Basic visual properties of the core login widget.
Customizes	Colors (primary, secondary, links), fonts, logo, widget border styles (rounded/sharp), background color/image.
Tool	Auth0 Dashboard (Branding > Universal Login > Customization Options).
Pros	Quick, requires no coding, and automatically adapts to future Auth0 updates.
Cons	Limited to styling properties exposed by Auth0; you cannot change the HTML structure.

Level 2: Advanced Layout Control (Auth0 CLI/API & Liquid Templates)

This method requires using the Auth0 CLI or Management API to define the overall HTML structure of your Universal Login pages. It requires a custom domain to be configured on your tenant. The full outer HTML structure (the content around the core Auth0 widget) can be customized. This uses liquid templating and HTML/CSS. This option allows for adding custom headers/footers, changing the page background, injecting analytics scripts, or conditional rendering based on context (e.g., application).

Feature	Details
Control	The full outer HTML structure of the login page (the space around the core login widget).
Customizes	Custom headers, footers, full-page background images/gradients, and custom CSS/JavaScript outside of the widget.
Tool	Auth0 CLI or the Management API. Requires a custom domain.
Pros	Full control over the page layout/aesthetics; easy integration into a development workflow via the Auth0 CLI.
Cons	Requires coding (HTML/CSS/Liquid), and you are responsible for maintaining your custom code.

Level 3: Advanced Customization for Universal Login (ACUL)

This is the most granular level of customization, providing control over the internal structure of the Universal Login widget itself. ACUL is an Early Access capability for Universal Login that allows you to build custom, client-rendered versions of Universal Login screens, giving you control over every pixel of your Universal Login experience. Go here for more information on ACUL.

Feature	Details
Control	The internal structure of the core login and signup prompts, including input fields and buttons.
Customizes	The entire flow, including specific screen components like the placement of social login buttons or custom form layouts.
Tool	Advanced configuration and specialized SDKs, typically via the Management API or Auth0 CLI.
Pros	Maximum flexibility to implement unique design systems or highly specific UX requirements.
Cons	Highest complexity, most effort to maintain, and requires advanced knowledge of Auth0's SDK.

Which level is right for you?

When to Use Level 1

• You primarily need to match your color palette and logo.

• You want a low-maintenance solution that benefits from Auth0's ongoing security and feature updates.

• You do not need to add custom elements like sidebars or complex footers.

When to Use Level 2

• You need a fully branded experience that includes custom headers, footers, or complex background styling.

• You require conditional rendering of content (e.g., showing different messages based on the application) using liquid templates.

• You are comfortable using the Auth0 CLI or Management API to manage your page templates.

When to Use Level 3

• You have a highly unique design system that the standard widget structure and Level 1 or 2 styling cannot accommodate.

• You need to rearrange the internal elements of the login form (e.g., placing buttons in very specific locations).

• You are building a custom UI flow on a secure client-rendered model.

• You are comfortable developing custom interfaces using your preferred front-end tech-stack (e.g. React, Angular, or Vue).

• You are able to use a CI/CD pipeline to bundle your interfaces and deploy to your content delivery network (CDN).

Level 2 is the comfortable middle ground between Level 1 and Level 3. It allows for a high degree of customization without the heavy lift required for Level 3 ACUL.

If Level 2 is right for you, then this blog article is for you. We will dive into how you can use the Auth0 CLI and modify your Auth0 Universal Login Page Templates.

What You'll Need to Get Started

Before diving into the terminal magic, ensure you have the following prerequisites in place:

1. Auth0 CLI Installed: Make sure you have the official Auth0 CLI installed and configured. Follow the instructions in the Auth0 CLI documentation.

2. CLI Logged In: Authenticate your CLI with your Auth0 tenant using the auth0 login command or follow the instructions in the Auth0 CLI documentation.

3. Custom Domain Configured: Customizing page templates requires a custom domain to be configured and active on your Auth0 tenant. This is a crucial step for advanced customizations.

Auth0 CLI Universal Login Customize

The most powerful feature of the CLI is the ability to edit and preview your template in a local environment with live reloading.

To start customizing your page template, run the following command with Auth0 CLI:

auth0 universal-login customize -–render-mode standard

This command will open a webpage within your browser where you can edit and preview your branding changes.

You will notice this webpage allows you to edit various Universal Login settings which correspond to the settings in the Branding > Universal Login customization options.

Click on the Page Templates tab to go the Page Templates editor.

The dropdowns can be used to select the different prompts and screens in Universal Login. Prompts refer to specific steps in the login flow. Some prompts have multiple screens which display different UI withing the particular prompt. There is also a dropdown to change the application context.

Make your page template updates in the code editor pane.

View the updates you made in the preview pane.

After verifying your updates, click on the Deploy Changes button to push your updates to your Auth0 tenant.

Page Template Structure

The Auth0 Universal Login page template is essentially an HTML document that uses the liquid templating language.

There are two essential Liquid tags that must be present for the page to function correctly:

• {%- auth0:head -%}: Injects necessary HTML tags and scripts into the <head> of your page (e.g., stylesheets, meta tags).

• {%- auth0:widget -%}: This is where the core login/signup/MFA widget is rendered. Any content you add outside of this tag will be your custom wrapper.

A minimal working template looks like this:

Page Template Examples

Here are a few page template examples which you may want to incorporate.

Persistent Header and Footer

The following example injects a static navigation bar above the widget and legal links below it.

Conditional Rendering Based on Context

The following example displays a different background image or disclaimer text if the login is for a specific application name.

Notice the application dropdown has been set to My Web App dev which enables the conditional rendering in the page template.

The above examples should give you a good starting point for customizing your own templates using the Auth0 CLI's universal-login customize command.

Conclusion

By leveraging the Auth0 CLI, you transform the once-tedious process of custom login page development into a seamless, modern, and creative part of your application development cycle. Unleash your brand identity and deliver a login experience that truly belongs to your application!

For help with the Auth0 CLI, Universal Login Page Templates, or any other Auth0/Okta topics, contact the TechJutsu team today!