microsoft-authentication-library-for-js: 'ClientAuthError: Invalid state' when returning from a redirect after login

Library

• msal@1.2.1-beta.1

Description

We currently trying to migrate from adal to msal since this will fix the SameSite issue we’re currently facing in Chrome (see #1215). Our client application is a big Angular SPA. As suggested here and here we would like to use a simple html page to redirect to after login after which the application will redirect to the SPA preventing the SPA from rendering twice (once in a hidden iframe and once as expected). We’ve implemented this approach successfully in adal some time ago. We want to keep the same behavior when switching to msal.

I can reproduce the issue without Angular as well (see sample).

The current flow is like this:

1. User navigates to https://localhost:30666/
2. User clicks SignIn triggering a redirect to the AAD login page
3. The AAD login page redirects to https://localhost:30666/auth.html
4. Creating a new instance of UserAgentApplication triggers a redirect to the original url: https://localhost:30666/
5. The msal code on https://localhost:30666/ throws the following exception:

ClientAuthError: Invalid state. b6eae390-7d12-4fe1-b766-ea4c3df01995, state expected : null.
    at ClientAuthError.AuthError [as constructor] (https://localhost:30666/dist/msal/dist/msal.js:1473:28)
    at new ClientAuthError (https://localhost:30666/dist/msal/dist/msal.js:1357:28)
    at Function.ClientAuthError.createInvalidStateError (https://localhost:30666/dist/msal/dist/msal.js:1391:16)
    at UserAgentApplication.saveTokenFromHash (https://localhost:30666/dist/msal/dist/msal.js:3342:59)
    at UserAgentApplication.processCallBack (https://localhost:30666/dist/msal/dist/msal.js:2783:29)
    at UserAgentApplication.handleRedirectCallback (https://localhost:30666/dist/msal/dist/msal.js:2136:18)
    at https://localhost:30666/:52:15

Expected behavior:

1. the msal code detects the authenticated redirect (meaning: UserAgentApplication.getAccount() works as expected after login)
2. token refreshes with a hidden iframe keeps on working as expected

Am I missing something here? Thanks for helping out!

Sample

I have a sample project demonstrating the issue. It’s a modification of your VanillaJSTestApp sample.