vuejs3nuxt3.jsmsal.jsmsal-reactmsal

ClientAuthError: state_mismatch: State mismatch error. Please check your network. Continued requests may cause cache overflow


I use msal-browser v2.37.1 with Nuxt3 /Vue3 and it works totally fine in most cases. It works fine when the window.location url looks like this:

https://test.com or https://test.com/user/2?page=profile

but shows for some reason, when I add an additional query param, it starts to fail, for e.g.

https://test.com/user/2?page=profile&section=identification and gives these error:

ClientAuthError: state_mismatch: State mismatch error. Please check your network. Continued requests may cause cache overflow. at ClientAuthError2.AuthError2 [as constructor]

So, just by adding an extra param, it starts complaining.

I tried investigating the msal source code but couldn't find the snippet where this error occurs. I tried adding state in the msal config when initiating a request, but same result.

EDIT: Upon more investivation, found that the serverResponseHash and cachedState do not match.

MSAL Source Code - Showing the exact place where it throws the error


Solution

  • Fixed it by changing the cache location to 'localStorage'. This change is needed in the msal config before creating an instance of PublicClientApplication.

    auth: {
      ...
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false,
    },