Custimize Login

Hi community!

I’m looking to create a customized login (instead of using the classic universal one)

I’ve changed the settings of my login page via Auth0 Dashboard > Branding > Universal Login.

Furthermore, I’m using Webflow as a website builder and used the below code to transfer from my ‘Webflow page’ to the Auth0 login page:

<script src="https://cdn.auth0.com/js/lock/11.30.2/lock.min.js"></script>
<script type="text/javascript">

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

ref = getUrlParameter('ref'); 

var options = {
	allowLogin: false,
  	auth: {
    	redirectUrl: 'https://www.thebabygoat.de/about/the-goat-tribe/my-app'
	},
  popupOptions: { width: 300, height: 400, left: 200, top: 300 },
  additionalSignUpFields: [
	{
	type: "hidden",
	name: "ref",
	value: ref
	}
	]
	};

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  'I98AAgGzeIxHMzVXsTgwAXizYBg82dX0',
  'thebabygoat.eu.auth0.com', options
);


lock.show();
</script>

<script> 

</script>

Does someone know how to make sure that my customize login would then show? That would be great!

Thank you!

Best regards,
Thomas

Hi @ThomasTBG ,

It looks like you are doing an embedded login page, if you wanted to use the branding settings on your tenant, you would need to be using the login page hosted by Auth0, accessed by directing users to the /authorize URL for your tenant instead.

For embedded login using Lock, you need to set all the branding etc. within the initialisation’s options, for example by setting the theme options in your code: Lock Configuration Options

1 Like

Hi sgo,

Thank you for your help with this matter.

Could you help me change the above code so that I’m either using the login page hosted by Auth0 or even better changing all the branding within the initialisation’s option by setting the theme in the code?

I’m looking to integrate our,
logo: https://uploads-ssl.webflow.com/5d2483c470f334f7d6a4a7c9/5dc722c32058974c227fddba_The%20Baby%20Goat.png-p-500.png
primaryColor: #929292
Page Background Color: #000000

Again, thank you so much for your help.

Looking forward to hearing from you!

Best regards,
Thomas

Hi @ThomasTBG ,

Sorry for the delay!

If you have to use an embedded login page, then you would need to set the theme object manually in the code as opposed to pulling it out of a config object like the hosted (universal) login page can.

For your case, it would be like this:

var page_background_color = #000000
var lock = new Auth0Lock(<clientID>,<auth0Domain>) {
//other options ommitted for brevity
  theme: {
        logo: 'https://uploads-ssl.webflow.com/5d2483c470f334f7d6a4a7c9/5dc722c32058974c227fddba_The%2520Baby%2520Goat.png-p-500.png'
        primaryColor: '#929292',
         },
//any remaining lock options
});
 if(page_background_color) {
      var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
                 page_background_color +
                ' }';


      var style = document.createElement('style');

      style.appendChild(document.createTextNode(css));

      document.body.appendChild(style);
    }
lock.show();

The Lock reference linked below should also help with any other tweaks you wish to make to the Lock UI/behaviour:

I’d recommend using the Universal (hosted) login page though if Webflow can support it rather than embedded, it has several benefits over using an embedded form. There are some default templates available in Branding > Universal Login > Login you can use as a starting point when you toggle on “Customize Login Page”.

This will use the theming you have set in your tenant’s Branding settings then, using the config object to pull out the settings (let colours = config.colors || {}), before using it in the theme property. See below for the default Lock template (at time of writing).



<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;
    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
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      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>

To reach the Lock page, you’d need to begin an “authorize” flow to redirect the user to Auth0’s Universal Login page. We have multiple SDKs which can handle this for you if Webflow will allow you to incorporate them. For example Auth0.js could be used to begin the flow:

1 Like

Hi @sgo,

Big thank you for your help and long message here!

I’ve tried using your embedded login page coding and set the theme object manually in the code. However, the pop-up doesn’t seem to be working anymore if I change anything on the theme design (Background Color, Logo, or Primary Color)

Might this be something that Auth0 doesn’t allow me to do?

I’d happily share my code with you if you’d like to have a look.

Looking forward to hearing from you!

Best regards,
Thomas

Hey @ThomasTBG - if you are still impacted by this please could you share the code?

1 Like

Hi @sgo ,

Thank you for your response and your help. Would indeed be lovely if you can have a look. This is the code:

<script src="https://cdn.auth0.com/js/lock/11.30.2/lock.min.js"></script>
<script type="text/javascript">

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

ref = getUrlParameter('ref'); 

var options = {
	allowLogin: false,
  	auth: {
    	redirectUrl: 'https://www.thebabygoat.de/about/the-goat-tribe/my-app'
	},
  popupOptions: { width: 300, height: 400, left: 200, top: 300 },
  additionalSignUpFields: [
	{
	type: "hidden",
	name: "ref",
	value: ref
	}
	]
	};

// Initializing our Auth0Lock
var lock = new Auth0Lock(
  'I98AAgGzeIxHMzVXsTgwAXizYBg82dX0',
  'thebabygoat.eu.auth0.com', options
);


lock.show();
</script>

And this is the URL where it’s currently live on:

Thanks a lot!!

Best regards,
Thomas

Thanks Thomas,

I tried out your code locally and was able to add in some theming to the options object successfully:

//rest of code omitted for brevity

var options = {
	allowLogin: true,
  	auth: {
    	redirectUrl: 'http://localhost:3000'
	},
  popupOptions: { width: 300, height: 400, left: 200, top: 300 },
  additionalSignUpFields: [
	{
	type: "hidden",
	name: "ref",
	value: ref
	}
	],
    theme: {
    logo: "https://uploads-ssl.webflow.com/5d2483c470f334f7d6a4a7c9/5dc722c32058974c227fddba_The%2520Baby%2520Goat.png-p-500.png",
    labeledSubmitButton: false,
    primaryColor: "#929292",
    authButtons: {
       "google-oauth2": {
           primaryColor: "#000000",
           foregroundColor: "#929292",
           }
       }
    }
  };

This gave me this popup:

Could you please compare that to what you used previously and let me know if you have any further queries/issues?

2 Likes

Amazing. You are a here @sgo.

Cheers,
Thomas

Glad it’s working for you now Thomas!