Dynamically Brand the Auth0 Classic Universal Login Password Reset Page

Last Updated: Dec 17, 2025

Overview

This article provides steps to dynamically customize the branding (e.g., logo, colors) of the Auth0 Classic Universal Login password reset page. The branding is applied based on the application that initiates the password reset process.

Applies To

Auth0 Classic Universal Login

Solution

This solution involves two main parts: modifying the password reset email template to pass a branding identifier, and then using that identifier on the password reset page to apply the correct theme.

In the Auth0 Dashboard, navigate to Branding > Email Templates.
Select the Password Reset template.

Modify the template to add a unique URL hash fragment to the password reset link ({{url}}). Use Liquid syntax to conditionally add a different hash for each application.clientID.

{% if application.clientID == "<YOUR_FIRST_CLIENT_ID>" %}
  <a href="{{ url }}#brand-a">Click here to reset your password</a>
{% elsif application.clientID == "<YOUR_SECOND_CLIENT_ID>" %}
  <a href="{{ url }}#brand-b">Click here to reset your password</a>
{% else %}
  <a href="{{ url }}">Click here to reset your password</a>
{% endif %}

This template will generate the password reset links like in this format https://your-tenant.auth0.com/lo/reset?ticket=...#brand-a

Navigate to Branding > Universal Login and select the Password Reset tab.
Ensure the Custom Login Page toggle is enabled.

Replace the entire HTML content with the following code. This template includes a script that reads the hash fragment from the URL and initializes the Auth0ChangePassword widget with a corresponding custom theme.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Change your password</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body,html{
      padding:0;
      margin:0;
    }
    .table{
      display:table;
      position:absolute;
      height:100%;
      width:100%;
      {% unless tenant.colors.page_background %}
        background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0));
      {% endunless %}
      background-color: {{tenant.colors.page_background | default: '#e8ebef'}};
    }
    .cell{
      display:table-cell;
      vertical-align:middle;
    }
    .content{
      padding:25px 0;
      margin-left:auto;
      margin-right:auto;
      width:280px;
    }
  </style>
</head>
<body>
  <div class="table">
    <div class="cell">
      <div class="content">
        <!-- WIDGET -->
        <div id="change-password-widget-container"></div>
        <!-- END WIDGET -->
      </div>
    </div>
  </div>

  <script src="https://cdn.auth0.com/js/change-password-1.5.min.js"></script>

  <script>
    // 1. Define your branding configurations for different URL hashes
    const brandingConfigs = {
      '#brand-a': {
        // Configuration for your first brand
        theme: {
          icon: 'https://your-cdn.com/logo-a.png',
          primaryColor: '#ff5733'
        },
        dict: {
          title: "Brand A - Change Password"
        }
      },
      '#brand-b': {
        // Configuration for your second brand
        theme: {
          icon: 'https://your-cdn.com/logo-b.png',
          primaryColor: '#335bff'
        },
        dict: {
          title: "Brand B - Change Password"
        }
      }
    };

    // 2. Get the current brand identifier from the URL hash
    const hash = window.location.hash;
    const customBranding = brandingConfigs[hash] || {};

    // 3. Set up the base configuration for the widget
    const config = {
      container: "change-password-widget-container",
      email: "{{email | escape}}",
      csrf_token: "{{csrf_token}}",
      ticket: "{{ticket}}",
      password_policy: "{{password_policy}}",
      password_complexity_options: {{password_complexity_options}},

      // Default theme and dictionary
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "{{tenant.colors.primary | default: '#ea5323'}}"
      },
      dict: {
        title: "Change Password"
      }
    };

    // 4. Merge the custom branding into the base configuration
    if (customBranding.theme) {
      Object.assign(config.theme, customBranding.theme);
    }
    if (customBranding.dict) {
      Object.assign(config.dict, customBranding.dict);
    }

    // 5. Initialize the Auth0ChangePassword widget with the final configuration
    new Auth0ChangePassword(config);
  </script>

</body>
</html>