I am trying to get a custom logo to appear in the my application login.
I am currently on the free plan, using the React SPA implementation (Auth0 React SDK Quickstarts: Login)
My image has been added to the Application Logo property in the dashboard as this URL: ico-surveylex-blue
It loads fine in the dashboard, but it doesn’t update in the login implementations (SurveyLex)
What is going on?
Hey there @brontosauruss, did you end up using Lock as mentioned in the quickstart article? In this below documentation of the latest version of lock it dives into setting the value for logo. Please let me know if I am mistaken in your implementation. Thanks in advance!
Hi James,
I used the code suggested in the quickstart guide:
auth0 = new auth0.WebAuth({
domain: 'YOUR_AUTH0_DOMAIN',
clientID: 'YOUR_CLIENT_ID',
redirectUri: 'http://localhost:3000/callback',
responseType: 'token id_token',
scope: 'openid'
});
This is not the Lock widget, right? Am I required to use the Lock widget to customize my login page logo? If so, what purpose does the Application Logo property serve in the Auth0 dashboard?
To clarify, I’m using the Auth0 npm package. Do I need to replace this with the Lock widget to change my logo?
I took a quick look at your login page. It seems that you’re using an old template or have heavily customized the template. If you don’t need / haven’t customized the template then I would suggest you reset the template to the default (though that is not necessary).
In regards to your question about custom logos, the Auth0 Universal Login page will not pull through the logo from an Application and this is on purpose. You can see more about the reasoning in this thread.
If you want to customize the logo then you need to modify the template to have the logo hardcoded. There is a theme object that gets passed to the Auth0Lock constructor with a logo property. If you set this property to your logo URL then it should work.
Thank you for the terrific response @charsleysa! I wanted to follow up @brontosauruss and see if this helped you in your quest or if you had any additional questions? Thanks!
I still don’t understand what the Application Logo property does in the dashboard if it’s not used in the Login screen. Where does it get used?
But I guess the answer is that the only way to customize the Logo is to switch to the Lock widget and pass it in via the prop. So I suppose that answers the question I had and I’ll just redo my login so I can pass in that logo.
Personally, I think it’s poorly explained in the Auth0 docs why/when you should use the widget vs the recommended npm module but that’s a separate issue.
Thank you for the feedback @brontosauruss, we are always looking for ways to improve our documentation. We do currently have this document that dives into when to use Lock.Do you feel this helps set the stage for the use case or should it be further elaborated on in the documentation. Thanks again for helping us refine our documentation.
@James.Morrison, the biggest issue, in my opinion, is that the link you shared describes using Lock vs Custom UI, but you’re telling me I have to switch to Lock to customize my UI. Isn’t that clearly bad wording? The default option your React documentation (Auth0 React SDK Quickstarts: Login) suggests using is the npm package. Maybe this is what you mean by Custom UI, but it seems confusing that this is the default when the Lock widget is referenced as the simpler option in the docs.
Further, if the Custom UI IS the npm library, then why do I need to switch to the Lock widget simply to change my logo? I am already using the npm library. Why can’t I customize the logo there? Why am I being recommended to switch to the Lock widget?
Finally, I still haven’t received an answer as to what the Application Logo actually
Just to clear up any possible confusion, the Lock widget is used by both the Universal Login and embedded logins which means that any customizations you make to the Lock widget can be made in the Universal Login through the Auth0 Management dashboard.
To answer your question about what the Application Logo property does, I believe this is used for the consent dialog feature (see this doc).
One possible solution you might like to try is customizing the Universal Login to have a map of logo URLs with the keys set to the clientIDs, then fetch the logo based on the clientID that’s passed through in the config. This solution means you have to hardcode all the application logos in the Universal Login but it does provide the custom logo per application functionality you are looking for.
Here’s an example template for the Universal Login that can help you achieve this:
<!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.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.11/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;
// OUR LOGO URL MAP
var logoMap = {
'<client id 1>': 'https://example.com/logo1.png',
'<client id 2>': 'https://example.com/logo2.png'
}
// 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: logoMap[config.clientID] // USE CLIENT ID TO GET LOGO
//primaryColor: 'green'
},
prefill: loginHint ? { email: loginHint, username: loginHint } : null,
closable: false,
defaultADUsernameFromEmailPrefix: false,
// uncomment if you want small buttons for social providers
// socialButtonStyle: 'small'
});
lock.show();
</script>
</body>
</html>
Hi @charsleysa
Thanks so much for the lengthy reply. However, this seems to be in conflict with the docs in Auth0’s website.
If you check out the JS SDK library it specifically says:
Auth0.js is a client-side library for Auth0. It is recommended for use in single page apps, and auth0.js in your SPA makes it easier to do authentication and authorization with Auth0.
There is no option to customize the logo in those SDK docs. Therefore I think there should be some clarification in the docs on that.
I am making a React app and literally only want to make a minor customization (the logo to use a custom image instead of the Auth0 default logo).
I have implemented a version of the React solution for the Lock widget here and added my own customization and gotten it to work:
So we can mark this resolved. But this seems like quite a bit of effort and lack of clarity for such a small customization when the recommended default for an SPA (such as my React app) is the SDK.
Thanks for all of your help.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.