无法从 Express JS session 在勇敢、firefox 等浏览器以及 chrome 和 edge 中设置 cookie，cookie 无法按预期工作

Question

I have created a website in which I'm facing three issues :

My backend Express JS code:

index.js file

/* eslint-disable no-undef */
const express = require("express");
const cors = require("cors");
const passport = require("passport");
const session = require("express-session");
require("dotenv").config();

// App initialization
const app = express();

const PORT = process.env.PORT || 5000;

// Database connection
require("./db/index").connect();

// Middlewares
app.use(express.json());

// CORS
app.use(
    cors({
        origin: [process.env.FRONTEND_URL, "http://localhost:3000"],
        methods: ["GET", "POST", "PATCH", "DELETE"],
        credentials: true,
    })
);

// Session
app.use(
    session({
        secret: process.env.SESSION_SECRET,
        resave: !process.env.NODE_ENV === "production",
        saveUninitialized: !process.env.NODE_ENV === "production",
        cookie: {
            maxAge: 1000 * 60 * 60 * 24 * 15,
            sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
            secure: process.env.NODE_ENV === "production",
        },
    })
);

if (app.get("env") === "production") {
    app.set("trust proxy", 1); //necessary to set up a cookie in production
}

// Passport
app.use(passport.initialize());
app.use(passport.session());
require("./config/passportConfig")(passport);

// Routes

app.use("/", (_req, res) => {
    res.send("<h1>Welcome to the API :)</h1>");
});

// Listen on port
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

In the front end (React JS) , I'm calling API using Axios like below:

axios.js file

import axios from "axios";

axios.defaults.withCredentials = true;

const customAxios = axios.create({
  baseURL: "https://my-expense-tracker-backend.herokuapp.com",
  timeout: 10000,
});

const requestHandler = (request) => request;

const responseHandler = (response) => {
  return response;
};

const errorHandler = (error) => {
  if (error.response.status === 401) window.location = "/login";
  else if (error.response.status === 0) alert("Server is not running");
  return Promise.reject(error);
};

customAxios.interceptors.request.use(
   (request) => requestHandler(request),
   (error) => errorHandler(error)
);

customAxios.interceptors.response.use(
   (response) => responseHandler(response),
   (error) => errorHandler(error)
);

export default customAxios;

Issues:

1. Unable to set cookies in some browsers like brave, firefox. But cookies are working fine in chrome and edge browser.

2. When I'm logging in to chrome, edge browser, I'm unable to see any cookie but the app is working fine

   

3. When I'm logging in the first time, it's working fine in chrome, and the edge browser, but when I'm trying to log in again after 3 to 4 hours, I'm unable to log in automatically even after setting the cookie for 15 days, I have to login again.

Can someone help with the above problems?

Live Website

Frontend Github link

Backend Github link

Answer 1

For number 1, I guess there is a bit of difference in browsers behaviour while setting sameSite flag. Got this From here

Note: Standards related to the Cookie SameSite attribute recently changed such that:

The cookie-sending behavior if SameSite is not specified is SameSite=Lax. Previously the default was that cookies were sent for all requests. Cookies with SameSite=None must now also specify the Secure attribute (they require a secure context/HTTPS). Cookies from the same domain are no longer considered to be from the same site if sent using a different scheme (http: or https:).

For number 2, probably the origin(url) of the cookie(may be from a backend that's on a different url) is different in this case may be from localhost:3000, remember the cookie will be listed from the origin...so if u crank open a new tab and open up the cookies origin url(may be your back end service) and check cookies u should see the cookie there..