Custom cookie sent to browser but not stored - node.js

Question

I've tried multiple configuration and read multiple posts about this issue but I'm still lost.
The custom cookie sent by my api server is received by the browser but never stored. And I can't figure out why.
I developed a node/express api server deployed on heroku.
My front-end uses Vuejs and is deployed on firebase.
Here are the code related to my cookie configuration :
SERVER-SIDE
Cors
app.use(
cors({
origin: 'https://my-app.firebaseapp.com',
credentials: true,
exposedHeaders: ['customCookie']
})
);
Set-cookie
const cookieOptions = {
httpOnly: true,
sameSite: 'None',
expires: expirationDate,
secure: true,
path: '/',
domain: 'https://my-app.firebaseapp.com',
};
res.cookie('customCookie', 'value', cookieOptions)
CLIENT-SIDE
Axios
axios.defaults.baseURL = 'https://my-app.herokuapp.com';
axios.defaults.withCredentials = true;
REQUEST HEADER
POST /auth/sign-in HTTP/1.1
Host: my-app.herokuapp.com
Connection: keep-alive
Content-Length: 55
Pragma: no-cache
Cache-Control: no-cache
Origin: https://my-app.firebaseapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3921.0 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://my-app.firebaseapp.com/auth/sign-in
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7,nl;q=0.6,la;q=0.5
RESPONSE HEADER
HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Dns-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Access-Control-Allow-Origin: https://my-app.firebaseapp.com
Vary: Origin, Accept-Encoding
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: customCookie
Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None
Content-Type: application/json; charset=utf-8
Content-Length: 200
Etag: W/"c8-qlzfwyZ+uJQMQIeJOQnFSQYPR6o"
Date: Sun, 20 Oct 2019 11:54:30 GMT
Via: 1.1 vegur
So, the cookie is correctly sent and received here:
Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None
But when I check the tab : Google Dev Tools >> Application >> Cookies >> my-app...
=> There is no cookie stored and therefore the cookie is not sent on subsequent request...
Any idea/advice ?
Thank you very much for your help,
Romain

Answer 1

I think you need to handle Access-Control.
you can do it by adding this code
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
next();
});
Also, I suppose that you are using Chrome as a browser, can you run chrome without security
by doing this and then check if your cookies stored or not
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
--user-data-dir="C:/Chrome dev session" --args --disable-web-security

Answer 2

I think I get it.
In Chrome (and maybe other navigator), cookies seems to be stored only in the domain address and the domain address, in my case, should be the server app (my-app.herokuapp.com), not the client one (my-app.firebaseapp.com).
In other words, I thought my cookie would be stored and visible in my client-app address but they are actually stored and visible on my domain address.
Now everything works...