Custom Authorize params (extraParams)

[herman]

Previously it was possible to supply extraParams using the Auth0.js library, see:

Passing initialScreen to Lock from WebAuth

I’m using WebAuth from auth0-js for a SPA. I’d like to pass the initialScreen: ‘signUp’ option based on if a user has clicked “Login” or “Sign Up”. Is there a straightforward way to do this? I’ve tried defining it in multiple places with no luck. If I manually add it to the hosted Lock config, it obviously works, but I want to be able to send the context from my app.

It seems this is no longer possible, because only whitelisted params are allowed:

auth0/auth0.js/blob/master/src/helper/parameters-whitelist.js

Specifically we want to show the country a user selected at a previous page, and a button to abort the login and change this parameter.

Is it not possible to send extra information to the customized Universal Login Lock pages?

Regards,
Herman

[HeberLZGlobant]

I’m having the same issue, it is critical for us to be able to receive dynamic extra parameters for customizing the login experience

[codenameredpanda]

Check this thread out - Passing initialScreen to Lock from auth0-spa-js - #2 by ogazitt
It helped me. Hope it works for you too. Good luck!

[konrad.sopala]

Thanks for sharing it with the rest of community!

[herman]

I’m not sure if that fixes it @codenameredpanda, because last time I checked those parameters are not allowed and filtered out by the library, in the file I listed in the question. You will see a warning: “Following parameters are not allowed on the /authorize endpoint: [params here]”.

Are you maybe using a older (or newer?!?) version of the library? The method loginWithRedirect is not an option in the library GitHub - auth0/auth0.js: Auth0 headless browser sdk in the WebAuth class. It only has authorize, which, like I said filters out those parameters.

Am I overlooking some functionality?

[codenameredpanda]

@herman , we are not using authO.js anymore. As the link mentions the solution mentioned is for authO-spa-js
Sorry didn’t realize you were looking for authO.js

[nicolas_sabena]

In Auth0.js you can do this:

var webAuth = new auth0.WebAuth({
  domain: domain,
  clientID: clientId,
  redirectUri: window.location.href
});
webAuth.authorize({
  my_custom_param:"value"
});

The code linked above at auth0.js/parameters-whitelist.js at master · auth0/auth0.js · GitHub will give you a warning if your param it’s not in the allow list, but it will be included in the /authorize request nonetheless.

[konrad.sopala]

Thanks for sharing that Nico!

[anatoliib]

@herman, @konrad.sopala, do you have a solution for auth0-react.js?

[rembrandt.reyes]

Do custom params still work for webAuth.authorize? I have added some custom params to auth0.webAuth and when I test this out locally it works, but when I try and do the same test with my changes deployed to my auth0 tenant the custom params get filtered out.

My example is something like this:

socialLogin(cb, connection, someId, someUserSelection) {
    const params = { connection, someUserSelection };

    if (someId) {
      params.someId = someId;
    }

    this.webAuth.authorize(params, cb);
  }
...
socialLogin(()=>{}, 'github', '123', 'pizza');

When checking auth0 rules I would expect there to be values in context.request.query.someId or context.request.query.someUserSelection.

We are using WebAuth version 9.20.2 if that makes any difference.