How to Debug Cookies
Companion video: https://www.youtube.com/watch?v=nfNrfi7HmLs
How to Evaluate if it's Working
After you login (or do whatever request returns a cookie), see if the cookie is being stored in your browser by opening Chrome devtools and going to the Application tab. Then click cookies on the left and select your domain:
If a cookie doesn't show up for you, use Firefox devtools to see if the login request sent back a set-cookie
header:
Make sure your Configuration is Correct
credentials
Make sure you set credentials
to include
when you make a request to the server.
For Apollo:
const httpLink = createHttpLink({
uri: config.serverUrl,
credentials: "include"
});
Make sure you set credentials
to true
in your cors settings.
app.use(
cors({
credentials: true,
origin: process.env.ORIGIN
})
);
proxy
If your server is behind a proxy (Heroku, Nginx, Now, etc...) add the following on your server:
app.set("trust proxy", 1);
secure
When creating a cookie, only set secure
to true
if your using https
res.cookie("qid", token, {
path: "/",
httpOnly: true,
secure: false,
maxAge: 1000 * 60 * 60 * 24 * 7 // 7 days
});
3rd party cookies
Sometimes the browser will eat your cookie if it thinks it's a 3rd party one. You can avoid this by using a custom domain and having your backend and frontend on different subdomains. For example, have the website on www.example.com
and the server on api.example.com
.
domain
If you refresh your browser and the cookie disapears this fix is for you.
You'll need a custom domain and when you create your cookie set that as the domain with a period in front:
res.cookie("qid", token, {
path: "/",
httpOnly: true,
secure: false,
domain: '.example.com',
maxAge: 1000 * 60 * 60 * 24 * 7 // 7 days
});
Also make sure if your doing SSR that you forward the cookie header when you SSR requests.