Hello! The code in OP’s post looks like a hybridization of popup flow combined with redirection. The error with invalid token due to mismatched state often occurs because of a crossing of origins between the callback handler and the app’s domain. Here are some important distinctions to make when implementing popup mode:
- The callback page, in this case, needs to live outside of the Angular application on your server. It’s just a static page that is not part of your SPA. It should, however, be of the same origin as your app. If you’re working with the CLI and using the CLI’s serve capabilities, you can do this by using a proxy.
- You do not need to do any hash parsing when using popup mode (parseHash is specific to redirect mode). Popup mode will automatically return your authentication results from the authorize endpoint callback instead.
I am currently in the process of writing a full Angular tutorial on implementing popup mode; the tutorial isn’t written yet, but the sample app is thoroughly under way, and I would be happy to share the application code as soon as it’s completed and made public (should hopefully be sometime in the next couple of weeks).
The response that was posted by @jmangelo here:
is an accurate summary of what needs to happen in the redirect static page that lives on the server.