Solvedlock [v10] Login redirect happens before authenticated event

I'm using auth0 lock v10:

I'm creating, showing and hooking the authenticated event like this:

this.lock = new Auth0Lock('foo', '', { auth: { params: { scope: 'openid given_name family_name email' } } });;
this.lock.on('authenticated', (authResult) => {
localStorage.setItem('id_token', authResult.idToken);
console.log('logged in!');

I am calling login from http://localhost:9000/#/login and the redirect is taking me to http://localhost:9000/. On that page I have a check if localStorage contains id_token but it does not so an error is generated. Immediately after that the authenticated event is triggered, thus setting the id_token.

I am redirected before the authenticated event is triggered, thus the localStorage does not contain id_token.
Why is the redirect happening before the authenticated event, am I missing something?

19 Answers

✔️Accepted Answer

@gnandretta thanks for the answer but I still don't understand the flow. I don't know if it matters but I'm using Aurelia as my JavaScript client framework and I'm not using push state so the URLs includes a hash (#).

I'm using auth0-lock version 10.0 and I show the lock as a modal.

When I login I guess I'm redirected to auth0 some where but the URLs I can see and act upon are these:
Starting: http://localhost:9000/#/login
After login I get redirected to http://localhost:9000/#access_token=xyz&id_token=xyz&token_type=Bearer&state=xyz
After that I get redirected to http://localhost:9000/#

I'm not entirely sure why I get that second redirect and why I get the access_token + id_token + token_type + state added to the query string. It also looks a bit odd that the first parameter (access_token) isn't prefixed with a question mark (?).

When I Get redirected to the last step (http://localhost:9000/#) my app manages to fire an event to my API (http://localhost:9000/api/test/secure) before the lock.on('authenticated', ...) event fires. My API rejects this call as unauthorized.

I managed to circumvent this issue by actually parsing the query string and extracting the id_token in the first redirect step. I don't think this is how I am supposed to handle it.

Also, if I add a redirectUrl in my lock settings then the responseType is automatically changed to "code" and instead of the id_token a code + state is added to the query string. If I set the redirectUrl and also set the responseType to "token", then no parameters are sent to the redirectUrl (!?). This must be a bug.

Any help on this issue is greatly appreciated.

Other Answers:

@gnandretta You are right. I just use the following configuration, for what I need:

const options = { auth: { redirect: false }, autoclose: true };


Related Issues:

lock [v10] Login redirect happens before authenticated event
@gnandretta thanks for the answer but I still don't understand the flow I'm using auth0 lock v10: ht...
lock Typescript definition
@mikeesouth Yeah I ran into that issue with v9 of the auth0-lock as well Is it planed to provide an ...
nextjs auth0 Hosting via Vercel not working because of AUTH0_BASE_URL.
I can confirm that committing a .env.production with the following works Also Description Hi I would...