Auth0 Home Blog Docs

Hosted Login - Dynamic Lock title?

lock
hosted-login
hosted-login-page

#1

Is it possible to dynamically set the Lock title to customise to the Client being used to login with?
I have attempted to pass a function to it (in the same way the documentation indicates you can for things such as the prefill section of an additionalSignupField) but I am getting errors in the console (specifically “Uncaught SyntaxError: Unexpected token var” which seems to indicate I may not be allowed to dynamically set it)


Auth0-lock Dynamic signUpTitle
#2

Since you are using the hosted login page, you have two options to dynamically change Lock’s title. You define the title on your code using Auth0.js or directly on the Lock.js code in the hosted login page. On both cases, you can make use of its [languageDictionary] (https://auth0.com/docs/libraries/lock/v11/configuration#languagedictionary-object-) property of Lock.

To change the title using the first option, where the title is defined on your code, you should first call the hosted login page with:

var webAuth = new auth0.WebAuth({
    (...)
)};
webAuth.authorize({
    title: "Title is a title"
});

In the hosted login page, you’ll need to fetch this new property from the extraParams as:

if (config.extraParams.title) {
    languageDictionary = { title: config.extraParams.title };
} 

As an alternative, you have the second option, where you put your whole logic into the hosted login page, defining the titles per client id in there. You can fetch the client id value from the config and override the languageDictionary as:

if (config.clientID === '{YOUR_CLIENT_ID}') {
    languageDictionary = {
        title: "This is a title"
    };
}

In both cases, since there is already some logic in hosted login page to properly set the languageDictionary, make sure your new languageDictionary with the title is not overridden afterwards.