Lock: Authenticated event not fired when specifying redirectUrl

[sedubois]

In this branch I've got a functional Auth0 login flow. Now I'd like to add the ability to redirect to another page, which would be specified as query param in the callbackUrl (if you have better suggestions to transfer this information across the redirect, I'm interested).
(I thought of directly specifying the redirect target as callbackUrl, but I'd like to come back to the login route first, because that's where the auth code is loaded: I don't want to load this code in all routes (code is split between routes to reduce download size).)

To achieve this, the first step I took was adding auth: { redirectUrl: ... } in the Auth0Lock constructor options (using same URL as configured in the dashboard). However, as soon as I do that, the 'authenticated' event is not fired any more.

[sedubois]

OK by pure luck, after reading this post I tried adding responseType: 'token' in the auth options, and it worked.

I recommend updating the documentation, this was quite hard to guess. Thanks and keep up the good work with this product 😊

[glena]

One note, I would recommend to use the state param instead of the query string. Whatever you send on the querystring will be propagated to the callback url in the state GET param (https://auth0.com/docs/libraries/lock/v10/customization#params-object-)

var options = {
  auth: {
    params: {state: "foo"},
  }
}

One thing about the state params is that it receives a string value, so if you think on sending an object you will need to encode as json (and encode to base64 might be a good idea to avoid dealing with scaping quotes and that stuff)

[sedubois]

Thanks, I tried to use state but didn't find how to retrieve it within the react-router-redux machinery (how to select it within Login/selector.js in code linked above). I'd like to know though, as it appears cleaner.

[glena]

Since you are setting responseType:token you will receive it in the authResult on the authenticated event.

Try the following:

    const options = {
      auth:{
        responseType: 'token',
        params:{
          state:"some thing I need to preserve"
        }
      }
    };

    const lock = new Auth0Lock(cid, domain, options);

    lock.on("authenticated", function(authResult) {
      console.log(authResult);
    });

    lock.show();

You should receive something like this:

[sedubois]

Thanks, that works 😊

auth: {
  params: {
    state: JSON.stringify({
      secret: this.setSecret(),
      next: nextPathname,
    }),
  },
},

And

return new Promise((resolve) => this.lock.on('authenticated', ({ idToken, state }) => {
  const { secret, next } = JSON.parse(state);
  this.checkSecret(secret);
  localStorage.setItem(TOKEN_KEY, idToken);
  resolve(idToken);
  browserHistory.push(next);
}));

It might help others to add this to the docs. Also, would be nice if Lock accepted any JSON object and would take care of any serialization stuff behind the scenes.

[strengthiness]

I am experiencing this same issue, and using a token is not a viable workaround as I need this to work on Android and Firefox for iOS.

I have created a sample project that reproduces the issue. Note, I am new to react and redux, so may have some things wrong.

https://bitbucket.org/strengthiness/auth0-react-redux-sample/

[glena]

Can you elaborate a little bit?

The solution to this issue is the was explained, not sure what do you mean that using a token is not a viable workaround.