Can't read cookie while hosted on netlify

I do have a similiar problem as stated in this thread: Browser isnot receiving cookies after deployment

My setup is:

This vue3 app contains a global navigation guard, which looks like this:

function getCookieValue(name) {
  return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
}
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    const hasCookie = getCookieValue('user')
    if (hasCookie) {
      next()
    } else {
      next('/auth')
    }
  } else {
    next()
  }
})

This means:

  • If a route contains the meta ā€˜requiresAuth’ with value ā€˜true’, we will try to read the value from a cookie called ā€˜user’.
  • If we do get a value, this means the user is authenticated and therefore can continue to the page he wants to visit.
  • If we do get an empty-string, this means the user isn’t authenticated and is redirect to auth-page.
  • Please note: I’m aware that this isn’t fully secure at all and needs some improvements but that isn’t the point here.

While in dev everything works, I always get an empty-string when running the same hosted on netlify. What I’ve found out so far:

  • The cookie is generated and sent back to the frontend hosted on netlify, I can see the headers and cookie when opening the network tab of dev-tools (screenshot from live-version on netlify):
    netlify_cookie1
  • However: In local dev I’m also able to see these cookies within the ā€œstorage/cookiesā€ tab of browsers dev-tools, while they don’t show up in the same places for the same code hosted on netlify ( this isn’t a real problem for me but it seems to be relevant and related to my problem described below).
  • I can use the cookie shown above afterwards to do another succesfully call to an api endpoint which needs auth and can see it being used & sent in the requests-header of that request. So it must be present in frontend and I can use it as stated before for example with axios. But whenever I try to read it (as shown above within the navigation guard) I only get an empty-string (only on netlify, in local-dev this works). This of course leads to breaking the navigation guard in that matter that a user is always redirect to the auth-page.
  • Please also note: Only the token cookie has the ā€œhttpOnlyā€ flag set and is therefore not readable from javascript. The user cookie hasn’t this flag as you can see above.

What am I doing wrong? I’m quite sure that I’m getting some basic wrong/not right for using netlify (as it’s my first time using a cdn like netlify) and would be glad about anyone that can point me into the right direction. What I try to achive is to ā€˜read’ if a user is already logged-in when opening the page and my idea was to simply check if this cookie is present or not (and as said before this works locally while it doesn’t work on netlify). Storing the jwt in localStorage and read it from there isn’t an option due to security concerns.

Problem solved…

According to mdn web docs (Set-Cookie - HTTP | MDN):

Lax: Means that the cookie is not sent on cross-site requests, such as on requests to load images or frames, but is sent when a user is navigating to the origin site from an external site (for example, when following a link). This is the default behavior if the SameSite attribute is not specified.

When a cookie does not have a value for ā€˜domain’ it seems calls between a.mydomain.tld and b.mydomain.tld are interpreted as cross-site-requests and therefore the browser refuses to accept the cookie (while axios still interprets and use it from the response header). Once I’ve configured my backend to create cookies with ā€˜domain=mydomain.tld’ everything worked as expected and the cookie is now stored by the browser :slight_smile:

thanks for coming back and sharing your solution with the community!

1 Like