Ready to post? 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();