Hello,

I need some help to implemant a persistant auth session in a SSR/PWA quasar app. I’m stuck with hydratation errors from the server because the cookie is not available on server side.

I tried many things but i think i’m a little lost with all of these tests

I tried with a boot file wich persist the state with the cookie but i still get the errors. I followed the indications from this topic : https://forum.quasar-framework.org/topic/3306/how-to-make-vuex-store-persist/t

So far this is what i have done :

#router/index.js
 Router.beforeEach(async (to, from, next) => {
    const requiresAuth = to.matched.some(route => route.meta.requiresAuth)
    if (requiresAuth) {
      await store
        .dispatch('user/startSession')
        .then(() => {
          next()
        })
        .catch(() => {
          next('/login')
        })
    } else {
      next()
    }
  })

#user/actions.js
export async function startSession ({ commit, dispatch, getters }) {
  return new Promise(function (resolve, reject) {

    let token = getters.getUserToken()
    if (token) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
      commit(types.USER_TOKEN_CHANGED, { newToken: token })
      dispatch('me')
      resolve()
    } else {
      reject()
    }
  })
}

I don’t know why it persist all my state object. Path option doens’t seems to work in this boot file :

#boot/persist-auth.js
import { Cookies } from 'quasar'
import createPersistedState from 'vuex-persistedstate'

export default async ({ app, router, store, Vue, ssrContext }) => {
  const cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies
  const options = { path: '/' }
  createPersistedState({
    path: [
      'user',
      'user.token',
      'user.user.token',
      'user.user',
      'User.user',
      'User.user.token'
    ],
    storage: {
      getItem: key => JSON.stringify(cookies.get(key)),
      setItem: (key, value) => cookies.set(key, value, options),
      removeItem: key => cookies.remove(key)
    }
  })(store)
}

With this i get a cookie with all my state object stored in the browser. But when i refresh my browser on a page that need user to get auth, the server render the login page while the browser remains on the page i was (url stay the same).

Did i miss something about the cookies being server side rendered ?
Also if i use the q-nossr component on my pages where auth is necessary will it solve my hydratation problems ?

I saw this issue on Git for adding the ssrContext in the modules. But i do not understand the part of getting the module aware of it. With this i will not need to persist my state and i could check the cookie in my actions, maybe it could correct my issues
https://github.com/quasarframework/quasar/issues/2285

Thanks !