Firefox react fetch does not include cookie - reactjs

Question

I'm trying to implement Discord OAuth2 in my React app with Spring Boot REST API. How it should work:
In React app (localhost on port1) I manually set window.location.href to my backend application oauth2 authorization endpoint. (localhost port 2 /api/oauth2/authorization/discord)
async function onSubmit() {
try {
window.location.href =
"http test.local port2/api/oauth2/authorization/discord";
} catch (error) {
console.log(error)
}
}
GET request is sent to test.local, which responds with HTTP 302 to https discordapp /oauth2/authorize?... along with Set-Cookie: ... Http header (this is important)
Response headers:
HTTP/1.1 302
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
Set-Cookie: oauth2_auth_request=long_cookie_value; Path=/; Max-Age=180; Expires=Sun, 29 Jan 2023 14:13:47 GMT; SameSite=None
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Location: https discordapp com/oauth2/authorize?response_type=code&client_id=...&redirect_uri=http://localhost:5173/login
Content-Length: 0
Date: Sun, 29 Jan 2023 14:10:47 GMT
Keep-Alive: timeout=60
Connection: keep-alive
User sees the discord login page
Now if I open http test local port2 in the browser I can see that the cookie was set correctly
cookie screenshot
User logs in to discord, discord redirects to http localhost port1/login?code=...&state=...
In react app I fetch GET http test.local port2/api/login/oauth2/code/discord?code=...&state=...
Code:
fetch(
`http test local port2/api/login/oauth2/code/discord?code=${searchParams.get("code")}&state=${searchParams.get("state")}`,
{
credentials: "include",
}
)
.then((res) => res.json())
.then((data) => console.log(data))
Request headers:
GET /api/login/oauth2/code/discord?code=...&state=... HTTP/1.1
Host: sss.test:8081
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0
Accept: */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://localhost:5173/
Origin: http://localhost:5173
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Expected result:
The request is sent together with the cookie set in step 2. (required to confirm that both requests in authorization flow are sent from the same origin)
Actual result:
Cookie is not set.
Observations:
If I open http test.local port2/api/login/oauth2/code/discord?code=...&state=... in the browser, the cookie is set
Request headers:
GET /api/login/oauth2/code/discord?code=...&stat=... HTTP/1.1
Host: sss.test:8081
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cookie: oauth2_auth_request=long_cookie_value
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache
Works on the same domain for FE and BE
Notes:
Using http for development purpose only. I will switch to https and BE available on external server soon, but in the meantime I want to make it work for http and local. BE and FE will be hosted on the same server with proxy for /api requests that will direct api requests to BE port. But I will need cross-origin cookie for local FE development with external BE API anyway.
Chrome blocks non-secure, sameSite: none cookies, so it will not work there. Firefox allows it (for now), so I'm testing on firefox.
Spring Security configuration:
...
.cors()
.configurationSource(request -> {
final CorsConfiguration config = new CorsConfiguration().applyPermitDefaultValues();
config.setAllowCredentials(true);
config.setAllowedOrigins(List.of("http://localhost:5173"));
return config;
})
...
FE should receive JWT token in the response of this request for further authentication.
Sorry for weird URLs sometimes but apparently this question is SPAM -.-