Support redirecting to arbitrary URLs after login is succesful

[rolodato]

Currently, the plugin redirects to either the main blog, the original page that was requested before logging in, or the admin panel. This should be configurable with an arbitrary relative or absolute URL.

[woloski]

@glena can you add this?

[glena]

@woloski / @rolodato
Are you sure about it?
Right now it is redirecting always to the home page (which I agree it is not correct).
Instead of redirecting to a fixed url, It should redirect to the one that was requested or (if none) to the home page.
Maybe we can add a configurable url to redirect the user in case of he access directly to the login page. I think that is better to make it works the way wordpress does.

[glena]

ready on dev

[mgonto]

Doesn't work for me.

Got redirected to http://auth0wp.wpengine.com/#_=_ when trying to go to another page. Login URL had the correct one on request param: http://auth0wp.wpengine.com/wp-login.php?redirect_to=http%3A%2F%2Fauth0wp.wpengine.com%2Fwp-admin%2Fthemes.php&reauth=1

[glena]

it is an issue with wpengine (http://wpengine.com/support/cookies-and-php-sessions/).

As the use some kind of evil page cache, the plugin can read the cookies when it come back from Auth0. It should work well with other hostings.

[glena]

@mgonto I have changed to save in both session and cookies. By default it uses the SESSION value but if for some reason it loose the session data (it is common with some redirections, ie. social login, to avoid session hihacking) it looks for the cookie.

But I am having the same issue with wpengine(it is already changed on http://auth0wp.wpengine.com). Cant read the SESSION neither (it is explained also in the link of the last comment).

[mgonto]

What I'm suggesting is to use neither a cookie nor a session.

Once you get the URL and you call lock you send the current url on the state parameter:

lock.show({
  callbackUrl: 'bla',
  state: location.href 
})

Then, once you get back from the redirect, you`d do something like the following:

var hash = lock.parseHash(window.location.hash).
var mainUrl = hash.state;
window.location.href = hash.state;

Would that work @glena?

Cheers!

[glena]

Done!

[jonathanmv]

This doesn't work for me. Im using Lock v10 ("auth0-lock": "10.3.0")

[glena]

@jonathanmv It should be fixed on 3.2.10, can you update and try again?

[jonathanmv]

Hey @glena, thanks for the quick reply.

I updated to auth0-lock: 10.4.0 and still doesn't work.
The 3.2.10 version you highlight is the version of what component or what library?

[glena]

@jonathanmv Sorry, that is the version of the wordpress plugin. The state parameter was wrongly mapped after the lock 10 api change and that was fixed today.

[jonathanmv]

I see @glena. It's me the one reading in the wrong thread, hahaha. I didn't see that this was the wp-auth0 library and not the one for javascript. But, shouldn't it be working the same? That's why I keep on finding answers with different parameters to the lock.show method in order to achieve the redirection.

[glena]

can you elaborate what is the issue you are having and what is the desired behaviour?

I can help you if I know what is the real issue :) (this thread focuses on the hability to redirect a user back to the original url he attempted to access before being redirected to the login screen in the WordPress plugin, not really related to Lock)

[jonathanmv]

I'm trying to do exactly that: redirect the user to the page from which he was prompted to log in.
I've tried setting parameters like state or authParams: {state: 'previousUrl'} or auth: {params: { state: 'previousUrl' }} or authParams: {state: 'ru=previousUrl'} as shown in

• This github issue
• https://auth0.com/forum/t/using-wildcards-on-callback-urls/249/6
• https://auth0.com/docs/libraries/lock/v10/sending-authentication-parameters
• http://stackoverflow.com/a/34491409/1128216

None of them have worked. Maybe i'm doing something wrong when setting the parameters for the lock.show() method.

Thanks for helping out @glena

[glena]

First, if you are using lock 10, the parameters are set on the constructor and not on the show method (see https://auth0.com/docs/libraries/lock)

Second the state param is under auth.params like this {auth: {params: { state:"...." } } } (see https://auth0.com/docs/libraries/lock/v10/customization#params-object-)

The way the state param works is that anything you put in there, will be propagated to your callback url by auth0 so you can receive the previous state after the authentication. What is usually done there is to send the url in that parameter, so you will later receive it and you can redirect the user there.

For example this plugin sets a json in the state parameter that looks like this: {"redirect_to":"http://...."} (you will need to base64 encode it to avoid issues with the format since state should be a string) and this will be received in your callback url as a query string parameter. On your server you will get this parameter, you can decode that and get the url to do the redirection.

[jonathanmv]

Thanks again @glena for the answer. I solved the issue using the state param as you said. However there were additional things I needed to do in order to make it work. I'm sharing those things in here so that it can help someone in the future.

1. Add an auth.params.state property. I set a stringified JSON that contains the pathname to which the user will be redirected to after login. Since I have a SPA with dynamic urls like /profile/profileId from which the user can log in, I needed to be able to show take the user to /profile/profileId once he/she has logged in.
2. Add an auth.redirectUrl property. If I don't add this, auth0 will display show a Callback mismatch error because I don't have the url listed as one of the allowed callback urls.
   I thought adding redirectUrl was going to be enough, but when I do that, the responseType changes to code as described in https://auth0.com/docs/libraries/lock/v10/customization#redirecturl-string-. The problem with this is that now the Lock library won't translate the code in the url into a logged in user and it will be the same as if no authentication was triggered at all. Or at least I don't know who to make the Lock library use the code to trigger an authenticated event. That's why I had to do step 3
3. Add an auth.responseType=token. Doing this will make auth0 include the access_token in the url when redirecting to the url you specified in the step 2. Lock automatically will translate the token as an authenticated user and you will be able to access to the profile, etc. You need, however, to translate the url hash before Lock does it or you will lose the state param. What happens is that Lock will use the hash in the url and then it will delete it, removing the state as well and, in my case, avoiding the user redirection to the right page. Due to this behavior I had to do step 4.
4. Take the state from the hash in the url. When auth0 redirects the browser to the url you set in step 2, it will be something similar to [yourCallbackUrl]#access_token=...&id_token=...&token_type=...&state=.... I took the state from the url's hash (you can access it by window.location.hash) and then redirected the user to the path that I set in step 1 making sure that I included the hash so that Lock can work as it's supposed to. I'm using React and React Router so my code for the routing looks like this

const redirect = (nextState, replace) => {
  const options = getRedirectOptions(nextState.location.hash)
  // Options is an object with the properties pathname and hash
  replace(options)
}

export default (
  <Route path="/" component={App}>
    <Route path="/profile/:profileId" component={ProfileApp} />
    <Route path="/login" onEnter={redirect} />
  </Route>
)

The code to instantiate the Lock object is as follows

const auth = {
    redirectUrl: window.location.origin + '/login',
    responseType: 'token',
    params: {
      state: JSON.stringify({pathname: window.location.pathname})
    }
  }
  const lock = new Auth0Lock(clientId, domain, {auth})
  lock.show()

That was all :)

[mrowles]

Thanks @jonathanmv - nice work.

I am using angular2 and I am running into issues when getting the true path but window.location.pathname is true until you refresh the page. Logic tells me to use @angular/router.url to get the true current path but no idea how to instantiate within a constant.

[jonathanmv]

Hey @mrowles. I don't really understand what you are trying to say in your comment. Could you explain a little bit further please?
On the other hand, I haven't had any experience with angular but I can try to help

[mrowles]

@jonathanmv appreciate the help, was more of a shout out to anyone using angular2 though!

Reread my comment, was half asleep, sorry lol!

I meant to say 'window.location.path' = '/' no matter the path you're at until you refresh the page at 'thing/in-1' with angular pretty routing on (non-hash).

Edit: looks like the authResult back from Auth0 isn't coming back with the state.params.pathname I sent to it, will continue investigating.

[sbefort]

@jonathanmv this works for me, but step 4 is no longer required. The state param is not removed. Perhaps due to a new version of Auth0 Lock?

This is my code to get the state:

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

The state property is inside that console.log output.