So, I am working on a full stack app, with a backend written in Node with Express. The app is currently on an AWS EC2 instance running using Nginx and pm2, hooked up to the database (also AWS) and seems to work fine when I access it via Postman. I can hit the POST /signin request, give it an email and password and it will return an auth cookie, which Postman then uses for subsequent requests, and I get a 200 OK when I hit GET /subscriptions in Postman.
I am now trying to get the frontend up and running. The FE is a React project using Vite, still on localhost, and I am using React Query and Axios to get and manage my data from the BE.
The problem I cannot solve is that the cookie that the backend sends (and it does send it), does not seem to be saved in the browser no matter what. I’ve tried:
- Both Firefox and Chrome
- Using
127.0.0.1 instead of localhost
- Mapping a custom domain
app.something.something to 127.0.0.1 in the hosts file and accessing it that way
- Connecting to the local version of the app, instad of the AWS one
- Tweaking Response headers settings in Nginx on the server to no end
- Adding the
cors package to the BE and setting the headers that way (I removed the Nginx config because it resulted in duplicate headers if I had both)
- Turning off every possible security option for the cookies (
Secure, sameSite, httpOnly)
Nothing seems to work, and I’m out of ideas, and can’t seem to find anything else to try on Google or with Copilot. Again, I can authenticate with Postman, so I think the backend is ok, but something is blocking the same thing in the browser, related to being localhost and/or something to do with headers/CORS/something…
This is how the backend server is setup
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import express from "express";
import morgan from "morgan";
import cors from "cors";
import cookieParser from "cookie-parser";
import router from "./router";
import { createNewUser, signIn } from "./handlers/users";
import { protect } from "./modules/auth";
const app = express();
const corsOptions = {
origin: "http://localhost:5173", // I've changed this to match whatever way I'm accessing localhost
credentials: true,
};
app.use(cookieParser());
app.use(cors(corsOptions));
This is how I set the cookie on successfull login:
const token = createJWT(user);
res.cookie("token", token, {
httpOnly: true,
secure: false,
sameSite: "None",
});
res.json("Authentication success");
And this is how I fetch it with Axios on the FE
export const authApi = axios.create({
baseURL: API_URL,
withCredentials: true,
});
authApi.defaults.headers.common["Content-Type"] = "application/json";
export const loginUser = async (user: LoginInput) => {
const response = await authApi.post<ILoginResponse>("/signin", user);
return response.data;
};
And no matter what I can see the cookie on the response in Firefox
But it seems to not get saved (when I go to Storage > Cookies it’s empty), and not get sent back on the subsequent requests, resulting in the 401s that you see.
Here are the headers for POST /signin
Any help is much appreciated, I’ve wasted two days on this and have no idea what else to try.
