Set cookie from express.js via React.js won't set. (CORS is set up, credentials: 'include' is used)

Question

I am trying to set a cookie from my express backend via React frontend. The cookie is included in the response header but won't be set by the browser. I tested with Chromium and with Firefox, but had no luck. However in Postman it is setting the cookie perfectly fine.

I tried all suggestions I found here but none worked for me.

Express cookie options:

exports.COOKIE_OPTIONS = {
    httpOnly: true,
    secure: false,
    signed: true,
    maxAge: eval(process.env.REFRESH_TOKEN_EXPIRY) * 100,
    sameSite: 'Lax'
}

Express cors setup:

const whitelist = process.env.WHITELISTED_DOMAINS

  ? process.env.WHITELISTED_DOMAINS.split(",")

  : []

const corsOptions = {

  origin: function (origin, callback) {

    if (!origin || whitelist.indexOf(origin) !== -1) {

      callback(null, true)

    } else {

      callback(new Error("Not allowed by CORS"))

    }

  },

  credentials: true,

}

app.use(cors(corsOptions))

With WHITELISTED_DOMAINS = http://localhost:3000 in .env

Express response with cookie:

res.cookie("refreshToken", refreshToken, COOKIE_OPTIONS);
res.send({success: true, token});

React how I fetch:

fetch(process.env.REACT_APP_API_ENDPOINT + "users/login", {
      method: "POST",
      credetials: "include",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({username, password})
});

Everything else is working fine, e.g. the token in the body can be read.

Edit

I also tried it with following options which I got from this answer:
Cookie Options

exports.COOKIE_OPTIONS = {
    httpOnly: true,
    secure: true,
    signed: true,
    maxAge: eval(process.env.REFRESH_TOKEN_EXPIRY) * 100,
    SameSite: 'none'
}

Response with cookie

res.header('Access-Control-Allow-Credentials', true);
res.header("Access-Control-Allow-Headers", "X-Custom-Header");
res.cookie("refreshToken", newRefreshToken, COOKIE_OPTIONS);
res.send({success: true, token});

But it wouldn't work either. Same result. Set-Cookie is present in the response but won't be stored.

Pictures of the response:
Response

No cookies

how are you determining that the cookie isn't being set in the browser? using browser developer tools? — Bravo, Mar 13 '22 at 02:13
@Bravo Yes with the developer tools. Also my authentication won't work like intended without the cookie. So that's another clue. — DomeE__, Mar 13 '22 at 02:15
just to get this straight in my head ... `Set-Cookie` response header does arrive at the browser, it's definitely a signed cookie, but no browser you've tried actually stores the cookie and therefore doesn't send it in subsequent requests — Bravo, Mar 13 '22 at 02:36
@Bravo Exactly. In the response header I receive the Set-Cookie with my refreshToken, Path, max-Age, etc. but it won't be stored. Neither with Firefox nor with Chromium. Also Chromium has no extensions at all and at Firefox are all extensions disabled for localhost. But Postman stores the Cookie just fine. — DomeE__, Mar 13 '22 at 02:42
That is odd, I've never seen Firefox refuse to store a cookie without at least a warning in the developer tools console — Bravo, Mar 13 '22 at 02:57
@Bravo Yeah. I am pretty new to webdev so I can only rely on ressources I find. But I am now trying for hours over hours. But I get always the same result. There is also no warning. I added some screenshots. Maybe they give a clue? — DomeE__, Mar 13 '22 at 03:03
by the way, the request is `localhost:8081` but you're inspecting cookies for `localhost:3000` - the other thing is, `Secure` cookies only work over `https`, and your request is over `http` - though, `localhost` can be considered "secure" in some cases (not sure about cookies though) - are you sure you haven't filtered `Warnings` or any other log level in the console? — Bravo, Mar 13 '22 at 03:13

score 0 · Answer 1 · answered Mar 13 '22 at 03:14

0

The problem was the sameSite option. Apparently this will handled differently as SameSite. Using SameSite with capital "S" worked perfectly fine.

If someone can elaborate why this happens I would be glad.

answered Mar 13 '22 at 03:14

DomeE__

21
3

I was just going to say that the cookie has no SameSite attribute in your picture ... since `sameSite` and `SameSite` are different strings, you'd expect that to make a difference .... but, where did you change sameSite to SameSite ... cookie options takes `sameSite` as a configuration property, not `SameSite` – Bravo Mar 13 '22 at 03:16

Set cookie from express.js via React.js won't set. (CORS is set up, credentials: 'include' is used)

Edit

1 Answers1