I am using jwt to authorize users on a react app I am working on. As opposed to using localStorage or sessionStorage to store these tokens, I am sending httpOnly, sameSite: strict, secure cookies as shown.
res
.cookie("jwt-access", accessToken, {
httpOnly: true,
sameSite: "strict",
secure: true,
})
.cookie("jwt-refresh", refreshToken, {
httpOnly: true,
sameSite: "strict",
secure: true,
})
.json({ error: false, response: "Authorized" });My app is successfully able to communicate with my api using the access and refresh tokens while hosted on the same domain as the api server (http://www.example.com/app, http://www.example.com/api).
If I understand correctly the react development server is hosted on an http server running on port 3000. Because this server is considered to be running on a different and unsecure domain, these secure cookies are not able to be properly communicated. I thought reconfiguring these cookies to secure: false and sameSite: "none" would have allowed these cookies to be correctly communicated but it hasn't.
Why is it that these updated cookies are unable to be sent/received with the development server and what can I do to properly configure them?
If its any use, here is the request header from each server:
Production server correctly receives cookies
[Symbol(kHeaders)]: {
host: 'localhost:446',
connection: 'close',
'sec-ch-ua': '"Google Chrome";v="107", "Chromium";v="107", "Not=A?Brand";v="24"',
accept: 'application/json, text/plain, */*',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36',
'sec-ch-ua-platform': '"Windows"',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'https://zyae.net/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9',
cookie: 'jwt-access=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzODJkOWNjYTMwMDM2N2NkOGZlZGZiZiIsImlhdCI6MTY2OTU5ODg4MiwiZXhwIjoxNjY5NTk5NDgyfQ.bYSN7jJwuL2UyLpu3rModl5HAQ7FQ8R7sQUDEOq7Z0g; jwt-refresh=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzODJkOWNjYTMwMDM2N2NkOGZlZGZiZiIsImlhdCI6MTY2OTU5ODg4Mn0.gv4BycPhBlEXOc6TLYj6w07diAQ0hOBQT03tTNfF9Hs'
}Development server
[Symbol(kHeaders)]: {
host: 'localhost:446',
connection: 'close',
pragma: 'no-cache',
'cache-control': 'no-cache',
'sec-ch-ua': '"Google Chrome";v="107", "Chromium";v="107", "Not=A?Brand";v="24"',
accept: 'application/json, text/plain, */*',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36',
'sec-ch-ua-platform': '"Windows"',
origin: 'http://zyae.net:3000',
'sec-fetch-site': 'cross-site',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'http://zyae.net:3000/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9'
}