Auth0 Home Blog Docs

Can I have a separate customized lock UI for each connection?



From what I’ve read in the documentation it seems that one can only have a single lock UI template when using the hosted lock. I have multiple Connections (for different customers of the same application) and need to display the customer’s logo on the lock control.
How can I have a different lock UI for each Connection with a hosted lock UI. If this is not possible, are there other options?

BTW, my application is an Angular 2 app.


There are a couple of ways to achieve this. Although it is not explicit in the documentation, you can have a different hosted login page template for each connection. To configure each, you’ll need to use the [PATCH /api/v2/clients/{id}] (!/Clients/patch_clients_by_id) endpoint of the management API v2, updating the "custom_login_page_on": true and "custom_login_page": "YOUR HTML" attributes.

If you only want to update the logo per client, a simpler solution is to edit the hosted login page and set the logo per client, using the config.clientID variable to distinguish between them.

var logoURL = '{DEFAULT LOGO}';
if (config.clientID === 'xxxxxxxxxxxx') {
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
theme: {
  logo: logoURL