Set authenticated user in class component (HOC) - Next.js

[gino]

Hi everyone,

I currently have a withAuth HOC that I wrap my pages with, to get the authenticated user. Before I used to pass the user object with getInitialProps, which is annoying to pass as props all the time since this can lead to a lot of nesting. I wanted to use Zustand to set the authenticated user in a store (in sessionStorage or localStorage, not sure which would be the best one for this scenario), from my auth HOC, with the following line:

// `withAuth.js` HOC - The HOC that I wrap my auth pages with.
const me = {
  id: 1,
  username: "testUser",
  email: "[email protected]"
}

const setAuthenticatedUser = useAuthStore.getState().setAuthenticatedUser
setAuthenticatedUser(me)

I am trying to get the user, from the Zustand store (useAuthStore(state => state.authenticatedUser)) in my page component, unfortunately, my store object stays empty and in my server console I get the following message: Persist middleware: unable to update undefined, the given storage is currently unavailable.. However, I've read online that this could be because of Next.js SSR issues, which makes sense.

In the console of my frontend, I receive the following warning:

I am not quite sure how to fix all these issues. I am aware that this all might be happening cause of SSR. Not sure how I am able to achieve the approach I wanted. I want to set the authenticated user in my store and retrieve it wherever I want, instead of passing it as a nested prop.

Does anyone know how I could fix this or how I should do this? I thought this would be a good approach but unfortunately, it doesn't work 😅 Thanks a lot!