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§ion=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
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,
},