Hosting 2 Login Pages on a Single tenant

Knowledge Solutions
1

Problem statement

This article explains how to set up two login pages on a single tenant.

Solution

It is possible to have different Universal Login pages per application. There are different options depending on the type of Universal Login.

With New Universal Login

Customize the New Universal Login pages by providing a page template using the Liquid template language.

  • This can be done only with the Management API and requires a Custom Domain.

The page templates have a set of context variables that can be used to impact how the page is rendered. This makes it possible to implement scenarios like:

  • Render different content depending on the Application (for example, two brands need a different page design).

The relevant variables are:

  • The login page application’s settings:
    • application.id
    • application.name

Here’s an example with different branding per application:

<!DOCTYPE html>
<html lang="{{locale}}">

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if application.name == "Auth0 Community" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/manhattan/versions/1.3312.0/assets/badge.png';);
      }
      {% elsif application.name == "Auth0 Dashboard" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png';);
      }
      {% endif %}
  </style>

  </head>

  <body class="_widget-auto-layout _use-custom-prompt-logo">
    {%- auth0:widget -%}
  </body>

</html>

See the following document for instructions on using the Page Template API on Customize New Universal Login Pages.

With Classic Universal Login

You can use custom HTML for your Classic Universal Login pages and configure different custom HTML per application with the PATCH /clients Management API endpoint.

This endpoint accepts the following fields in the payload:

  • custom_login_page_on: boolean
    • true if the custom login page is to be used, false otherwise.
  • custom_login_page: string
    • The content (HTML, CSS, JS) of the custom login page

This makes it possible to have one setting for the entire tenant, as defined in your Dashboard, and a different one for a specific Client Application. Please take a look at Customize Classic Universal Login Pages for more information.