How do I pass configuration options to an Auth0 hosted page using the JS API?

Question

I'm using a Hosted Login page on auth0 and the auth0-js module to authorize my users.

The docs talk about a config object and the page itself clearly shows such an object being deserialized.

However, the docs don't remotely talk about how one is supposed to pass this object to the page. Indeed, the docs indicate an approach that doesn't remotely work (no config parameter being set)

Do I need to serialize the object myself and set a config property or is there some other approach?

Answer 1

I solved the mistery: you have to pass the parameters in the authorize call when you invoke the hosted login page. I made an example that allows to specify the hosted page's language with a parameter.

Script code:

var params=new Array();
params['language'] = 'es';

var webAuth = new auth0.WebAuth({
    domain: 'example.auth0.com',
    clientID: 'YOUR_CLIENT_ID',
    redirectUri: 'https://www.example.com/redirect',
    audience: 'https://example.auth0.com/userinfo',
    responseType: 'code',
    scope: 'openid profile email',
    allowShowPassword: true,
});

webAuth.authorize(params);

Hosted page code:

var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
var language;
if (config.extraParams.language)
  language = config.extraParams.language;
else
    language = 'en';

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  ...
  language: language
});

lock.show();

So, any parameter you specify in the authorize call is accesible using the config.extraParams variable

P.D.: Months late, but I hope it help other users