Implement Multi-Brand Branding per Custom Domain in Auth0

Overview

Configuring unique interface branding based on the custom domain name when running a single application requires specific configurations. Administrators can establish Multiple Custom Domains (MCD) branding configurations using Advanced Customizations for Universal Login (ACUL) to achieve true branding per custom domain. Alternative configurations using organizations or applications manage multi-brand requirements based on other application boundaries.

Applies To

  • Auth0
  • Multiple Custom Domains (MCD)
  • Advanced Customizations for Universal Login (ACUL)
  • Organizations
  • Universal Login

Solution

How is domain-based branding configured via Advanced Customizations for Universal Login?

To achieve true branding per custom domain while preserving a single application layer for cross-domain Single Sign-On (SSO), implement an ACUL project. If branding modifications depend strictly on the inbound hostname rather than organizational contexts, deploy an ACUL project. This framework grants complete control over the interface rendering process.

  1. Configure Custom Domain Metadata: Follow the steps in the Multiple Custom Domains Documentation to provision metadata properties directly on each custom domain string via the Auth0 Dashboard or Management API.
  2. Expose Metadata to Runtime: Update the prompt rendering configuration using the Auth0 Management API. Explicitly register the custom domain metadata key within the context_configuration array property according to the ACUL Rendering Configuration Reference Documentation to transmit the values to the browser.
    "context_configuration": [
      "transaction.custom_domain.domain_metadata.brand_id"
    ]
  3. Implement ACUL Project: Review the Advanced Customizations for Universal Login Documentation to set up the development environment.
  4. Extract Context via SDK: Initialize the library using the @auth0/auth0-acul-js Software Development Kit (SDK) within the application codebase. Reference the runtime metadata utilizing the top-level transaction property path: sdk.transaction.custom_domain.domain_metadata.brand_id.
  5. Render Dynamic Assets: Update the custom interface components to dynamically map stylesheet locations, images, and color configurations matching the value returned by the metadata path.

 

Alternative Branding Approaches: Manage Multi-Brand Requirements Based on Other Application Boundaries

The following methods manage multi-brand requirements based on other application boundaries but do not offer unique branding per custom domain name.

Manage multi-brand requirements using organizational contexts or application entities by following these alternative approaches.

  • Branding per Organization: If branding requirements align with distinct customer groups or business entities, manage the layout using organizational contexts. Choose Organizations from the navigation menu in the Auth0 Dashboard. Select the specific organization to modify. Select the Metadata tab and enter a custom key and value pair. Navigate to Branding > Universal Login and select Advanced Customization to open the template editor. Add Liquid conditional statements within the HTML head section to render stylesheets or colors dynamically based on the organization metadata context, tracking the organization.metadata.<KEY_NAME> variable. Select the Save button.
  • Branding per Application: If the tenant environment does not require cross-domain session preservation, isolate individual brands into separate application entities. Choose Applications from the left navigation menu and select the application. Scroll down to Advanced Settings and select the Application Metadata tab. Define a custom variable key with the respective brand name value. Access the Universal Login Page Templates Documentation to implement server-side conditional blocks tracking application.metadata.<KEY_NAME> within the page template to apply unique assets.

 

Related References

Recommended content

No recommended content found...