Customize New UL for organization

Knowledge Articles
1

Problem statement

We have two different flavors of logging in… one includes an org_id to give them a customized login experience to their organization, and the other is a non-org login.

We would like to be able to add some text to the org-login flows only. How can we do this? It seems like the new universal login templates don’t distinguish between org vs non-org logins, and the text customization options don’t appear to have anything either.

Is there any kind of variable notation we can use?
${organizationName ? ‘label for org logins’ : ‘label for non-org logins’}

Solution

As a workaround you could use conditional css to render a different logo if the organization object is available.

Customize New Universal Login Pages.


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

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if organization %}
      #custom-prompt-logo {
      background-image: url('YOUR ORGS LOGO');
      }
      {% else %}
      #custom-prompt-logo {
      background-image: url('NO ORG LOGO');
      }
      {% endif %}
  </style>

  </head>

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

</html>