Nuxt auth SSR cookie issue only when closing browser and loading the page

Question

I use nuxt and nuxt-auth-next, With a laravel api backend.
When i completely close browser and load the page nuxt cannot read cookies on server-side and wont be able to understand that i am logged in, and on client-side it understands that i have cookie so there will be a difference in my server-side and client-side loading some component based on user being logged in, and then, obviously, this will happen:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Now when i refresh this page. the problem will go away and everything will be ok.

I also checked if cookies are not availble on server-side when loading for the first time:

 if (process.client) {
        console.log('cookie = ', this.$cookies.get('auth._token.laravelJWT'));
 } else {
        console.log('cookie = ', this.$cookies.get('auth._token.laravelJWT'));
 }

The result on console will be this:

Nuxt SSR
cookie = undefined

Client: 
cookie = Bearer blablabla

Having the same issue, have you found a solution for this? – Kazmi Dec 09 '20 at 08:48 — Kazmi, Dec 09 '20 at 08:48
Did you figure out a solution to this? Please update us. – Aysennoussi Feb 08 '21 at 18:46 — Aysennoussi, Feb 08 '21 at 18:46

score 4 · Answer 1 · answered Jul 12 '21 at 05:58

It's very likely that your cookies are set to session-only (default for nuxt auth module), which explains why you face problems after you close the browser. To fix it, given them an expiration date, so the server will understand this is an authenticated user.

To expires in 8 days, your nuxt.config.js should look like this:

export default {
  ssr: true,
  ...
  auth: {
    cookie: {
      options: {
        expires: 8
      }
    },
    ...
  },
}

score 2 · Answer 2 · answered Feb 13 '21 at 11:30

From https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies :

Session cookies are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use session restoring when restarting, which can cause session cookies to last indefinitely long. Permanent cookies are deleted at a date specified by the Expires attribute, or after a period of time specified by the Max-Age attribute.

If you use nuxt-auth, and you want to avoid the expiration of the session cookies so the closing browser problem, you can set the expires and maxAge attributes in nuxt.config.js :

auth: {
  ...
  cookie: {
    options: {
      expires: new Date(new Date().getTime()+20000000000).getTime(), //thats today + a year
      maxAge: 31622400
    }
  }
},

this code is from nuxtServerInit does not receive auth cookies

score 0 · Answer 3 · answered Sep 16 '20 at 07:08

0

i had this problem while ago. when your project runs in server side you can access your cookies with this package "cookieparser"

this is the way i get user token in server-side :

const cookieparser = process.server ? require('cookieparser') : undefined  


async nuxtServerInit ({ commit }, { req }) {

   if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)

     // if we have a token , get user data with api
     if (parsed.access_token) {
       
     }
  }
}

answered Sep 16 '20 at 07:08

arman amraei

175
1
5

1

The problem is that `req.headers.cookie` is `undefined` in my nuxt application. Important is that this is only undefined when i completely close the browser and re open my website. If i refresh the page again the `req.headers.cookie` will become available again! – Pooria Honarmand Sep 16 '20 at 15:32

Nuxt auth SSR cookie issue only when closing browser and loading the page

3 Answers3