NUXTJS SSR: I have problems with the nuxtServerInit, the req.headers.cookie of the nuxtServerInit is undefined and the cookie is already in my browser

Question

I am new to NuxtJS and have a problem, I am trying to get the token of the user who logged in from the website, the token is stored in the cookie, but, when I start or reload the website page (made with nuxt ssr (universal )), nuxtServerInit should and does start, but req.headers.cookie says it is undefined, so the data cannot be loaded into the store. If I reload the page, the cookie is still in the browser and everything is perfect, the problem is that the req.headers.cookie is: undefined, why? Ahhh, and in development it works perfectly, but in production it doesn't work (in nuxtServerInit the req.headers.cookie is not defined)

I am using Firebase Hosting, Cloud Features, Authentication, Cloud Firestore.

Here is the code:

// store/index.js

import { getUserFromCookie, getUserFromSession } from '../helpers/index.js'

export const actions = {

    async nuxtServerInit({ app, dispatch }, { req, beforeNuxtRender }) {

        console.log('req.headers.cookie: ' + req.headers.cookie)
        console.log('req.session: ', req.session)

        if (process.server) {
            const user = getUserFromCookie(req)
            console.log('process.server: ' + process.server)
            console.log('user: ', user)
            if (user) {
                await dispatch('modules/user/setUSER', {
                    name: !!user.name ? user.name : '',
                    email: user.email,
                    avatar: !!user.picture ? user.picture : '',
                    uid: user.user_id
                })
                await dispatch('modules/user/saveUID', user.user_id)
            } else {
                await dispatch('modules/user/setUSER', null)
                await dispatch('modules/user/saveUID', null)
            }
        }
    }

}

// helpers/index.js

import jwtDecode from 'jwt-decode'
var cookieparser = require('cookieparser')

export function getUserFromCookie(req) {
    if(req.headers.cookie){
        const parsed = cookieparser.parse(req.headers.cookie)
        const accessTokenCookie = parsed.access_token
        if (!accessTokenCookie) return

        const decodedToken = jwtDecode(accessTokenCookie)
        if (!decodedToken) return

        return decodedToken
    }

    return null
}

// pages/auth/signup.vue

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      email: '',
      password: '',
      renderSource: process.static ? 'static' : (process.server ? 'server' : 'client')
    }
  },
  middleware: ['handle-login-route'],
  methods: {
    ...mapActions('modules/user', [ 'login' ]),
    async signUp () {
      try {
        const firebaseUser = await this.$firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        await this.writeUserData(firebaseUser.user.uid, firebaseUser.user.email)
        await this.login(firebaseUser.user)
        this.$router.push('/protected')
      } catch (error) {
        console.log(error.message)
      }
    },
    writeUserData (userId, email) {
      const db = this.$firebase.firestore()

      return db.collection("Usuarios").doc(userId).set({
        email: email
      })
    }
  }
}
</script>

// store/modules/user.js

export const actions = {

    async login({ dispatch, state }, user) {
        console.log('[STORE ACTIONS] - login')
        const token = await this.$firebase.auth().currentUser.getIdToken(true)
        const userInfo = {
            name: user.displayName,
            email: user.email,
            avatar: user.photoURL,
            uid: user.uid
        }

        Cookies.set('access_token', token) // saving token in cookie for server rendering
        await dispatch('setUSER', userInfo)
        await dispatch('saveUID', userInfo.uid)
        console.log('[STORE ACTIONS] - in login, response:', status)

    },

    async logout({ commit, dispatch }) {
        console.log('[STORE ACTIONS] - logout')
        await this.$firebase.auth().signOut()

        Cookies.remove('access_token');
        commit('setUSER', null)
        commit('saveUID', null)
    },

    saveUID({ commit }, uid) {
        console.log('[STORE ACTIONS] - saveUID')
        commit('saveUID', uid)
    },

    setUSER({ commit }, user) {
        commit('setUSER', user)

    }

}

Thanks a lot! :D

Answer 1

if you are hosting it on Firebase you should rename your cookie to "__session", that's the only name you could use on Firebase. Their documentation should make it very clear! Change the following part:

// helpers/index.js
const parsed = cookieparser.parse(req.headers.cookie)
const accessTokenCookie = parsed.__session


// store/modules/user.js
Cookies.set('__session', token)