Cookie not being set locally with Express and React

Question

I have an ExpressJS app running at localhost:8181 and a ReactJS running at localhost:3000. In my Express app I'm using cookie-session to generate a cookie. The Express app looks like this:

const express = require('express');

const cookieSession = require('cookie-session');
const { v4: uuid } = require('uuid')

const app = express();

app.use(express.json())

app.use(cookieSession({
  name: 'shortlinks',
  keys: [process.env.SESHSECRET],
  maxAge: 30 * 24 * 60 * 60 * 1000 // 30 days
}))


app.use(function(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  req.session.id = (req.session.id || uuid());
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', '*');
  next();
})

app.get(
  '/api/links',
  (req, res, next)=> {
    res.json(readDb());
    next();
  }
)

In my React app I'm making simple GET and POST requests to the Express app. They look like this:

export async function getLink(id) {
  const response = await fetch(`${LINKS_URL}/${id}`, { withCredentials: true, credentials: 'include' });
  const json = await response.json();
  return json;
}

export async function createLink(url) {
  if (!url) return;
  const response = await fetch(LINKS_URL, {
    withCredentials: true,
    credentials: 'include',
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ long_url: url })
  });
  const json = await response.json();
  return json;
}

In Chrome when I inspect the Network responses I see the cookie being set in the response headers:

Set-Cookie: shortlinks=eyJpZCI6IjkxNDg0MTFjLTI5MTAtNGQ5Ni04ZTdhLTZlMzAyZTQ4NzljNiJ9; path=/; expires=Sat, 21 Nov 2020 00:39:18 GMT; httponly
Set-Cookie: shortlinks.sig=kz0vL2oUQ9KYsDrROkLasxV762w; path=/; expires=Sat, 21 Nov 2020 00:39:18 GMT; httponly
X-Powered-By: Express

But when I inspect the cookies in Chrome under Application -> Storage -> Cookies, I do not see any cookies.

What I've tried so far (none of these worked):

• Accessing React via 127.0.0.1:3000 instead of localhost:3000
• Modifying /etc/hosts to map localhost to a generic www.localexample.com URL
• Modifying the fetchs in my React App (adding/removing/changing the credentials and withCredentials parameters)
• Trying a different browser

What else can I try? I've run out of ideas.

Answer 1

Didn't the samesite be found with a warning in the cookie checked in the network tab?

Recently, browsers have introduced a new specification, samesite.

There are three options for samesite: Lax, None, and Strict.

Previously, None was the default, but now Lax is the default.

To give the None option, you need to communicate with https, and you may need to use SSL on the local host for this task.

For more information on Samesite, check out below.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

[additionally]

• Support may vary by browser
• Check cookie domain - localhost or 127.0.0.1 [ with port ] : localhost and 127.0.0.1 are different.

Answer 2

I found the answer here. I added the header res.header('Access-Control-Allow-Credentials', 'true'); to my Express app and credentials: 'include' to my fetch requests, and I now see the cookie in Chrome.