Customizing social buttons with Universal Login Customize HTML

Ready to post? :magnifying_glass_tilted_left: First, try searching for your answer.
I am in the process of getting my application listed on the QuickBooks Marketplace, which has stringent requirements for applications seeking approval within their network. One of these requirements involves implementing their custom “Sign in with Intuit” button to facilitate OAuth authentication for users.

Basically I need to replace the social button on the login page with Intuit’s custom button, the best I can seem to do with the customization options with the Universal login page it to update the icon and color of the button that gets created by Lock.

Here is my lock configuration, its mostly default except I have the authButtons option customized in the theme property of the config:

    var intuiLoginButton = "https://auth0sociallogos.s3.us-east-1.amazonaws.com/Sign_in_transparent_btn_med_default.svg";
    // 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/lock-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:            'https://auth0sociallogos.s3.us-east-1.amazonaws.com/LedgerslyIcon.svg',
        primaryColor:    colors.primary ? colors.primary : '#8db6dc',
        authButtons: {
        	"quickbooks-online": {
        		//icon: "https://auth0sociallogos.s3.us-east-1.amazonaws.com/auth0_social_icon_blue_blank.svg",
      			displayName: "Intuit",
            primaryColor: "#0077c5"
          }
      	},
      },
      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();

Hi @jliberi

Welcome to the Auth0 Community!

For the social login button for Intuit, have you created a custom social connection?

If so, I can see that you are customizing it using the theme.authButtons option which would be the recommended approach.

Does Quickbooks have a recommended configuration for the button which you are not able to modify or what is the exact issue that you are having?

Kind Regards.
Nik

Hi @nik.baleca

Yes i created a custom social connection with intuit oauth, named quickbooks-online.

The exact issue is I am not able to customize the social login button to Intuits specifications. I need to be able to do one of two things:

  1. Completely replace the social button on the login page with Intuit’s svg. I can include it in my post for some reason but you can go to Intuit Developer > Publish and List > List your app on our marketplace > App name, logo, and advertising restrictions to see the required SVGs for the Sign in with Intuit login buttons.

  2. Customize the theme.authButtons object in such a way that where I can modify the font and disable the icon property in the button completely. Currently if I set icon to null in authButtons it defaults to the Auth0 logo, which wont pass Intuit’s technical review.

If 2. is the recommended approach, I will also need to style the button with margins, padding, etc so that it matches their branding guidelines.

If the above is not possible I will have to create my own login page, which is fine, but using Auth0’s Universal Login is much easier

Hi again.

Unfortunately, you are not able to completly replace a button on the Universal Login Page. I can see on Intuit’s developer page that it specifies:

If your application is spaced constrained and you must use an icon

You cannot remove the icon from a social/enterprise connection unfortunately, and from what I understand from Intuit’s page, it does allow you to use their logo in some situations.

For the font, you cannot customize it to be specific to the button, you should be able to customize the font via the Dashboard under Branding → Universal Login → Customization Options → Fonts.

Otherwise, social/enterprise connection buttons do not have the option to customize the padding/margin directly. You might want to look into Customizing the Universal Login Page Templates. I believe you should be able to customize the margin and padding of the text available inside the buttons under the Prompts → login section.
This might be helpful in accomplishing the customization of the text.

If I can help with anything else, let me know!

Kind Regards,
Nik