Customize Login Page in New Universal Login?

We want to improve the branding of our existing login page. After going through the docs, I have couple of questions:

  1. As per the docs, we can use page templates & customize the html in new universal login. The page template has to have {%- auth0:widget -%}. Now, If I want to improve the branding of the widget itself, can i use the no-code editor to do so? Will the combination of page templates and no-code editor work?
  2. As per docs, I understand that page templates can be updated only via management apis. But when I navigate to “Branding > Universal Login > Advanced Options > Login”, I can enable “Customize Login Page” and provide custom HTML there. Can I provide my page templates here? Or is this only meant for Classic Universal Login where complete HTML (using auth0.js & other cdns) can be changed? (If “Customize Login Page” is only for Classic Universal Login, why is it also shown when I have enabled New Universal Login?)

Hi @sreekar , thanks for sharing your questions in the Community!

You can use no-code editor where you set default widget appearance for all New Universal Login pages and the Liquid-based page templates where you can conditionally modify the widget and page elements based on, for example, the application id to which a user logs in.

The best way to assure both approaches (no-code + liquid page templates in case of New Universal Login Pages) works without collisions is to give them a shot on a free test tenant with access to all (also paid) features.

In this separate scenario, AFAIK, you do not use liquid-based page templates like above, but the lock library and templates listed here: Customize Classic Universal Login Pages and configure the screen using the available lock configuration options listed here https://auth0.com/docs/libraries/lock/lock-configuration

Hope this helps!

Thanks for the reply @marcelina.barycka. Few follow-ups:

Please correct me if I am wrong but based on the links that you have provided, it seems like this is meant for only Classic universal login and not New universal login.

  • Why is this option available even if I have enabled New universal login?
  • What happens if I enable New universal login and also enable Customize Login Page? Will it internally consider Classic universal login?
  • If I want to stick to New universal login, I shouldn’t enable this right?

Hi @sreekar , thank you for following up!

These materials refer to the of lock.js library (valid for Classic login experience) which you can also use with templates listed as options to customize a “Login” page:

This gives you an option to stick with the New Universal Login branding for all pages beside the Login pages if you decided to customize them with this editor. So the Login / password reset pages will be customized with this custom HTML while for example the MFA screen will remain under default New Universal Experience branding.

I would consider it with this category. It will simply overwrite the Login pages while leaving other pages untouched.

I would stick with the New Universal Login experience and customize with no-code for default setting and with Liquid page templates to adjust branding based on conditions, like a specific application.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.