Getting application icon

Help
,
3

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.