config for hosted login page

I am aware of config.extraParams which is great, but the default hosted page seems to have options to configure allowedConnections, rememberLastLogin and prefill. I just don’t know how to get those parameters to the page. They are extracted from the @@config@@ object as connection, prompt and login_hint but setting those in the query parameter string doesn’t work. Is it possible, or do I need to customize the page and go through extraParams?

Using the Hosted Login Page, only some authorized parameters are permitted, which will be populated in the config.extraParams. You can check the full list of permitted parameters [here] (auth0.js/parameters-whitelist.js at 72bfbbb5d5e08cc5ad60eb387bd18c3824786627 · auth0/auth0.js · GitHub).

As an example, to have a prefill value, you’d have to enter a login_hint value in your authorize request as:

<script src="http://cdn.auth0.com/js/auth0/9.1.0/auth0.min.js"></script>
(...)
var webAuth = new auth0.WebAuth({ (...)});
(...)
webAuth.authorize({
  login_hint: "email@example.com"
});

In the hosted login page, the value is extracted from the config.extraParams:

var loginHint = config.extraParams.login_hint;

And finally put into the prefill value of Lock:

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
(...)
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
(...)
}

You can read more about the parameters on the /authorize endpoint here: Auth0 Universal Login

1 Like

Thank you for that.

I am now using extraParams to perform additional configuration of the hosted login page like the logo and theme color. I do this by adding parameters to the query-string (I am not using the SDK, I make a get request manually). This works but I am worried that Auth0 might suddenly block my additional parameters because they are not OIDC-compliant. Does anyone know if this is something I should be concerned about?

3 Likes