Can't read cookie while hosted on netlify

Support
, ,
1

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.

2

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:

3

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

1 Like