Vuex-persistedstate: Vue.js SSR: ReferenceError: window is not defined

[badis]

I am trying to implement firebase authentication on a vue.js, vuex project.
I think this module will help to persiste store data both in server and client sides.
But i got this error : ReferenceError: window is not defined

 DONE  Compiled successfully in 17433ms                                                                                     11:38:23 AM

webpack built 885a204769e45af74490 in 17433ms
error during render : /
ReferenceError: window is not defined
    at createPersistedState (/home/badis/Desktop/vue-hackernews-2.0/node_modules/vuex-persistedstate/dist/vuex-persistedstate.js:54:66)
    at createStore (src/store/index.js:30:14)
    at createApp (src/app.js:21:16)
    at module.exports.__webpack_exports__.default (src/entry-server.js:13:35)
    at module.exports.__webpack_exports__.default (src/entry-server.js:11:9)
    at /home/badis/Desktop/vue-hackernews-2.0/node_modules/vue-server-renderer/build.js:7854:15
    at /home/badis/Desktop/vue-hackernews-2.0/node_modules/vue-server-renderer/build.js:7816:14
    at Object.renderToString (/home/badis/Desktop/vue-hackernews-2.0/node_modules/vue-server-renderer/build.js:7984:9)
    at render (/home/badis/Desktop/vue-hackernews-2.0/server.js:100:12)
    at readyPromise.then (/home/badis/Desktop/vue-hackernews-2.0/server.js:112:27)

How ssr apps handle : localstorage, cookies, sessions ... etc. that are only available on browser ?
Does my approache make sense ?

[robinvdvleuten]

@badis you are trying to access your localstorage in a server environment, which does not make any sense. Please checkout the readme to add a cookie-based storage (https://github.com/robinvdvleuten/vuex-persistedstate#customize-storage)

[badis]

Yes robin, I have tried cookie-based storage.
It doesn't show any errors but the state get initialized when i refresh the page.
Also does this means that the state get transferred between client and server in each http request for syncing ?
I am trying to use these technologies ( firebase auth , vue.js , vuex, ssr , express.js ) together to make a minimal and complete starter project.

Any guidance is highly appreciated.

Thank you !

[robinvdvleuten]

So it seems to be working then. Your console won't show any changes on your cookies in "real-time". And it's correct that you are transferring the state on each request on the same domain as your cookie.
What's your use case? I think it's a good idea to overthink your requirements; why client-side auth with ssr? do you need cookies for ssr or is localstorage on client side fine. It could be possible that your requirements do not match with the usage of this plugin.

[badis]

Thank for your reply @robinvdvleuten .
Please take a look at this : https://stackoverflow.com/questions/46394251/firebase-authentication-with-multiple-providers-in-vue-js-vuex-server-side-rend
I have to develop a starter project where i have to integrate firebase authentication to vue.js, vuex server side rendered app.
I want to:

• authenticate the user on client side .
• save the data on vuex state and persist it on both server and client so when i refresh the page i will see the same state.

Please let me know if i answer your question ? i can provide more details.

[outOFFspace]

Joining to badis question. How make it possible to work with ssr?

[raymayemir]

Anyone solved this problem ?

[DiegoPerea]

Anyone have some workaround? Cookies are not persisting on SSR

[raymayemir]

@DiegoPerea I have not been able to use the plugin. I just put everything in a cookie.

[savikankani1996]

Try moving window to the mounted hook