I have an Angular 6 SPA and I’m trying to set things up to have a marketing page for my app on a different subdomain, but for users to be able to login or signup directly from that marketing page and then be redirected to the main app. So, for example:
And I’m trying to have it so a user can initiate the flow on the first subdomain and then be redirected and logged-in to the different subdomain.
The problem that I’m facing is that once the user initiates from the first subdomain, an error occurs when being redirected to the second subdomain:
{error: "invalid_token", errorDescription: "state does not match" }
From my understanding, a state gets generated in localStorage when first initiating the flow, but then upon redirection the state doesn’t match because the 2nd subdomain never got that state. I’m wondering if there’s any easy way around that, or if it’s just not a type of flow that’s possible to achieve?
Auth0.js indeed requires the domains of the authentication request and the response to match if you use the default options, because of the way it stores the state and nonce for CSRF login attacks mitigations.
A simple solution for this would be to consider these two applications as different clients and take advantage of SSO:
The user logs in into the first application (the marketing app). The callback URL belongs to this app.
After processing the callback (on the parseHash callback function), redirect the user to the SPA (not sure if you want to do this automatically or after some user interaction like clicking on “Open the app”, but that’s irrelevant).
When the user lands on the SPA, the SPA will see that there’s no session for the user and ask Auth0 for authentication (either authorize() or checkSession()). If the user already has a session in Auth0, there will be no prompt to the user and a new authentication response will be provided to the app.
If you are using universal login (as opposed to embedded login), when the user clicks on “Login” on the marketing app you send the user directly to the SPA, pointing to a login initiation endpoint (e.g. https://app.mydomain.com/login), and have the SPA start the actual login flow.