I was working on authentication and when I inspected my cookie in my client and I saw this warning from google chrome [insert image here] that 3rd party cookies are been deprecated and will be blocked in the future. They are working to stop 3rd party tracking via cookies google blog thereby creating tracking protection.In my case I was hosting the backend and the frontend on separate servers. The frontend is hosted on vercel, while the backend on render, so when the backend sends the cookie to the client since they are not on the same server hence different domain an article explaining, the cookie will be treated as a 3rd party cookie.
Cookie prefix
The solution I implemented was from reading mdn documentation mdn_doc. I added a prefix __Host-
to the cookie name. __Host-
is called a cookie prefix. There are two types; __Host-
and __Secure-
.
a. __Host-
means that the cookie is domain-locked, when you set a cookie with this header prefix it is accepted if it's marked with the Secrue
attribute, was sent from a secure origin https
, does not include a Domain
attribute and has the Path
set to '/'
.
So my code looks like this now. After modifying my cookie options, the warning did not show again because.
const cookieOptions = {
maxAge: 60 * 60 * 24 * 30 * 1000, // 30 days
httpOnly: true, // prevents client scripts from accessing the cookie
secure: process.env.NODE_ENV === "production", // the cookie should be sent over secure https connection
sameSite: process.env.NODE_ENV === "development" ? "Lax" : "None",
path: "/",
}
res.cookie(process.env.NODE_ENV === "development"
? "sage_warehouse_token":"__Host-sage_warehouse_token",'refreshToken',cookieOptions)
.header("Authorization", 'accessToken')
If anyone encountered this same issue I would love to know how they resolved it, I am learning backend development with express.js
, which is fun. I am currently working on an e-commerce application to solidify my knowledge as I learn new concepts.
If you are interested in learning backend development and you don't want to do it alone you can checkout HNG where you will participate in tasks with peers and ask for help from mentors as you go along in your tech journey, they also have a premium version where you can earn a certificate and it also comes with some perks.
Top comments (0)