I need to customize the login page for each of my application. It means different application with different UI

[spansare]

Hello Team,

I wanted to do customisation of universal login page, suppose I have two applications in same tenant. I wanted to have different login page UI (customized login page) for different application. I have two applications under single tenant and i wanted to customise the login page for application1 and application2 separatly. It means two applications should have different login page.
How to do this. Please provide me step by step answer. How to do this?

[dawid.matuszczyk]

Hi @spansare

Welcome to the Auth0 Community!

Correct me if I’m wrong. You have two separate applications under one tenant and would like to customize the universal login page for both applications in the single UI instance.

To achieve this flow, you will need to create separate lock configurations within Custom Universal Login Page. Based on the clientID, unique for each application, you can hardcode and conditionally determine which Lock configuration to render for which application.

    if(config.clientID === 'ApplicationAClientID'){
      var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      ...
      }
    }else{
      var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      ...
      }
    } 

For further Lock customization, check our documentation which you can find here

This configuration allows you to change the mode to Passwordless. In the example, Application A will use default Lock, and Application B will use Passwordless mode.

    if(config.clientID === 'ApplicationAClientID'){
      var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      ...
      }
    }else{
      var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
      ...
      }
    }

More details about Lock initial configuration you can find here

Please let me know if you have more questions.

Thanks,
Dawid