Is there a way to get the application icon (as on the application settings page) in lock for the hosted login page? It seems that config.icon always returns the account’s general icon in settings.
HI @customautosys,
Welcome to the Auth0 Community!
After investigating this, I found that the application icon set in your application settings appears in a few places such as the list of applications in the Dashboard and customized consent forms.
To render the logo for different applications on your Universal Login Page, you’ll need to specify the logos on your Customized Universal Login page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
</head>
<body>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/base64.js"></script>
<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/lock/11.30/lock.min.js"></script>
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
config.extraParams = config.extraParams || {};
var connection = config.connection;
var prompt = config.prompt;
var languageDictionary;
var language;
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = { title: config.dict.signin.title };
} else if (typeof config.dict === 'string') {
language = config.dict;
}
var loginHint = config.extraParams.login_hint;
//Render different Lock widgets based on application
if(config.clientID === "CLIENT_ID_GOES_HERE") {
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
responseType: (config.internalOptions || {}).response_type ||
(config.callbackOnLocationHash ? 'token' : 'code'),
params: config.internalOptions
},
/* additional config needed to use custom domains
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.auth0Domain
}, */
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
//primaryColor: 'green'
},
closable: false
});
lock.show();
}
//This line controls lock for all other apps
else {
var colors = config.colors || {};
// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
auth: {
redirectUrl: config.callbackURL,
responseType: (config.internalOptions || {}).response_type ||
(config.callbackOnLocationHash ? 'token' : 'code'),
params: config.internalOptions
},
/* additional configuration needed for custom domains
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'YOUR_CUSTOM_DOMAIN'
}, */
assetsUrl: config.assetsUrl,
allowedConnections: connection ? [connection] : null,
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
//logo: 'YOUR LOGO HERE',
primaryColor: colors.primary ? colors.primary : 'green'
},
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
closable: false,
defaultADUsernameFromEmailPrefix: false
});
if(colors.page_background) {
var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
colors.page_background +
' }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.body.appendChild(style);
}
lock.show();
};
</script>
</body>
</html
Once that is complete, you’ll have different logos for your applications on the Universal Login Widget.
Please let me know if you have any questions. I’d be happy to clarify.
Thank you.
OK, so basically I have to manually key in the logo under theme, is there any way to retrieve the path of the application icon which is set in the application settings on the hosted login page? I tried to inspect and dump the config object in the console and the only icon I could find is the global icon for the whole account.
Hi @customautosys,
Thank you for your response.
Circling back, I’d like to clarify that the logos set in the Application properties settings will be on the Login page only for the New Universal Login.
However, if you are using the Classic Universal Login, you will need to customize the Universal Login Page for each app as mentioned in my previous post.
Unfortunately, I don’t believe there is a way to get the config.icon for each application in the way you expect.
Instead, I recommend programmatically configuring the logo based on the clientID for example:
function resolveLogo(clientId) {
var logoUrl;
switch (clientId) {
case '{client-id-of-first-app}':
logoUrl = '{url-of-logo-image}';
break;
case '{client-id-of-second-app}':
logoUrl = '{url-of-logo-image}';
break;
default:
}
return logoUrl;
}
then…
theme: {
logo: resolveLogo(config.clientID),
primaryColor: ...
}
Doing so should help with maintaining your logos on the Universal Login Page.
Please let me know how this works for you.
Thank you.
Yeah, that’s what I’m doing currently but I’m just wondering if I could get the app icon. I can’t use the new experience because for 1 of my custom login providers, I have hard-coded an event linked to 1 of the buttons created by lock to popup a custom dialog required by that provider. Thanks anyway.
1 Like
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.