loginWithRedirect with routes : true triggers loginWithIframe causing invalid_state error

[pherrmann]

loginWithRedirect with routes : true triggers loginWithIframe causing invalid_state error

[cecilia-sanare]

@pherrmann Thanks for submitting an issue!

If you end up submitting a PR for this issue then I'd be happy to look at it.
Otherwise I'll try to look into it sometime this week.

[pherrmann]

I don't immediately have a solution. I'll submit a PR if one comes to me.

The state mismatch alerted me in a round-a-bout way that a second login was occurring while the first one was being processed.

Perhaps, it could check to make sure it's not already processing a login when it falls into the $$onRouteChanged flow. $$onRouteChanged appears to be bound to document 'click' and window 'popstate' events

[cecilia-sanare]

Created a small demo showcasing the issue out on Glitch.

Demo

https://salte-auth-135.glitch.me

Steps to Reproduce

• Enable persistent logs in Chrome (so that the error doesn't get lost)
• Hit here to clear your cache for that site.
• Navigate to the mini-app.
• Login
• At this point the error SHOULD occur.

[cecilia-sanare]

@pherrmann Let me know if v2.1.3 resolves the issue you were seeing!

[pherrmann]

@cecilia-sanare Your update is an improvement as it's no longer calling login twice. However, it appears I'm ending up with the same issue for a different reason.

After avoiding the extra loginWithIframe call, retrieveAccessToken goes on to make a call to retrieve the access token. This calls $accessTokenUrl which updates the profile's $localState to a new uuid. This results in a state mismatch error and an extra call to retrieve the access token.

Could $$onRouteChanged check for login promises before calling retrieveAccessToken?

$$onRouteChanged() {
  if (!this.$utilities.isRouteSecure(location.href, this.$config.routes)) return;
  if(!this.$promises.login) { // don't retrieve access token while logging in
    this.retrieveAccessToken();
  }	
}