Cookie not send when developing React app using axios or fetch, althoug setting withCredentials: true, respectively credentials: 'include'

Question

I am currently developing a React app. I am currently integrating some APIs, that are already live. However, I run into the issue that cookies are not send by the browser.

1. I have an endpoint at https://my-domain.com/api/auth/login and https://my-domain.com/api/auth/login/renew
2. I start my react app npm run start and access it on localhost:3000
3. I can successfully login via the first endpoint which returns 200 and sets a http-only, secure cookie.

set-cookie: refresh=a.b.c; Path=/api/auth; Domain=my-domain.com; Max-Age=2592000; HttpOnly; Secure

4. But when requesting the second endpoint, the cookies are not sent. The pre-flight OPTIONS request works fine and I get a 200 back. But the GET request returns a 401 as the cookie is not set.

I have tested this with fetch and axios and set credentials: include (fetch) and withCredential: true (axios).

// fetch
fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}/api/auth/login/renew`, {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
  },
})

// axios
const customAxios = applyCaseMiddleware(axios.create({
     baseURL: process.env.REACT_APP_BACKEND_BASE_URL,
     headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true,
}));
customAxios.get('/api/auth/login/renew')

I tested on:

• Chromium: Version 99.0.4844.51 (Official Build) Arch Linux (64-bit)
• Firefox Developer Edition: 99.0b3 (64-bit) for Arch Linux

Edit: Can be solved by setting same-site attribute of the cookie to none. However, I would prefer a solution where the server can keep its configuration. How are you doing this, are you locally proxying when developing locally?

Answer 1

The server has to set the same site attribute to none:

set-cookie: refresh=a.b.c; Path=/api/auth; Domain=my-domain.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None

However, I don't ĺike this solution. I would rather like a solution where the server does not have to change anything. So different solutions are welcome.