My team is setting up our page templates using the New Universal Login’s Management API. We’ll have multiple applications under the same tenant. These applications will be different brands, each with their own color schemes and fonts.
It seems that we can create a branding theme via the Management API (Auth0 Management API v2). However, how do we update which theme we use depending on the application name?
Or, alternatively, how do we target the buttons and links in the widget to update their colors and fonts? The classes of these components are all minified. It’s been suggested that we could search the innerHTML like
// for (const a of document.querySelectorAll('a')) {
// if (a.innerHTML.startsWith('Sign up')) {
// a.href = 'https://www.okta.com';
// }
// }
However, we’re supporting nine languages. Between all the prompts and languages, this could quickly get out of hand and is very brittle.
Anyone have any suggestions? That would be much appreciated
Based on your description, I highly encourage you to check the lock configuration within the Login Experience instead of dealing with the innerHTML or searching thru DOM.
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. Inside of Lock page, you can modify and conditionally select different colors for different applications and modify the UI based on your needs. All Theme options you can find here
if(config.clientID === 'ApplicationAClientID'){
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
...
theme: {
primaryColor:'green'
},
...
}
}else{
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
...
theme: {
primaryColor:'blue'
},
...
}
}
For further Lock customization, check our documentation which you can find here
More details about Lock initial configuration you can find here
Thanks for your response. We’re using New Universal Login instead of Classic Universal Login, so unfortunately we’re not using Lock.
However, my team and I have decided to target specific components instead like button[name="action"] (so that we don’t change Google or Facebook login buttons), a, or input. We will then update the colors for the application using {% if application.name == "XYZ" %}. It’s not ideal, but we’re hoping this could be a stand in solution for now until specific themes for specific applications are supported natively by Auth0.