I'm grappling with a perplexing issue that has me stumped. Allow me to explain the situation in detail.
- Within my Nuxt project, I have implemented a modular store.
- There is a global middleware that functions exclusively on the server side (i.e., upon page refresh).
- This middleware's purpose is to verify if a cookie containing user data exists. If so, it initiates a post request to Firebase to authenticate the refresh token and retrieve the user's metadata (such as display name). (I also attempted using NuxtServerInit, but encountered the same dilemma)
- All of these processes operate flawlessly. The operations run smoothly, and through meticulous logging, I can confirm that everything is functioning correctly and the state is being altered accordingly.
During the execution of a loginUser() function, the application's state is adjusted (a token and display name are assigned values). When I log into the web app itself, the cookie is established, and the state is updated properly. Both the token and display name are successfully stored.
However, upon refreshing the page, the middleware executes, updating the state. Yet, upon rendering, it appears that all modifications made to the store during the server-side process are discarded, and the store is reset for client-side usage.
Could there be a missing configuration setting in Nuxt? Is there a specific key that needs to be configured to instruct Nuxt to retain the server-side rendered store?
Has anyone encountered a similar issue? If so, I would greatly appreciate any guidance or insights you could offer.