react-aad

react-aad copied to clipboard

I'm using next.js and on first server side page load am getting the error The cache location provided is not valid. Provided value: localStorage. Possible values are: localStorage, sessionStorage. because localStorage is only available on the client.

Any help would be much appreciated. Thanks.

Facing the same issue I think this library is only built for working on client side.

To be honest, this isn't a use case I know of anyone having tested. The error makes sense because when the AzureAD component renders, MSAL will check the cache for an active session. I see two approaches here:

1. We could create some sort of strategy to defer the check until rendered on the client. At the moment I don't have the bandwidth for this, so I would need some help implementing such a solution.
2. You might have better luck using a different version of the MSAL library which are aimed at server-side authentication. They have different flavors for Node, .NET, etc: https://docs.microsoft.com/en-us/azure/active-directory/develop/reference-v2-libraries

This also happens for any GatsbyJS build.

You can get it to work by checking if the window is undefined before creating an instance of MsalAuthProvider and if so, handle your rendering differently.

@jasonsoden Do you have an example of how you achieved that?

@AndrewCraswell I see a mention in the README about working on a v3. Maybe server side rendering was considered as part of the major bump?

A thought of mine would be to defer to relying on a passed cookie to perform the render as an the authed user. Though when using SSG (Static Site Generation, just went stable in Next.js 9.5) then I think it makes more sense to dynamically load in any user related content on client side.