Cookies are not being set in production-CodePudding

I deployed an express server to heroku as well as a next.js app. The cookies are being sent from the server and even being shown in the network tab:

However, the cookies are not actually stored, all my requests failed because they depends on the csrf cookie, and the storage tab is empty:

This is the code for setting the cookies in the backend:

const csrfProtection = csrf({
  cookie: {
    httpOnly: true,
    sameSite: 'none',
    secure: true,
  },
});

app.set('trust proxy', 1);

app.use(cors({ credentials: true, origin: clientOrigin }));

app.get('/', csrfProtection, function (req: Request, res: Response) {
  res.cookie('XSRF-TOKEN', req.csrfToken(), { sameSite: 'none', secure: true });
  res.end();
});

app.use(csrfProtection);

this is my axios instance:

const baseURL = process.env.baseURL;

const axiosInstance = Axios.create({
  baseURL,
  withCredentials: true,
});

and the request code:

 useEffect(() => {
    dispatch(loadingAction.setToTrue());
    const getCsrf = async () => {
      await axiosInstance.get('/');
    };
    getCsrf()
      .then(() => {
        dispatch(loadingAction.setToFalse());
      })
      .catch((err) => {
        dispatch(loadingAction.setToFalse());
        setError(err);
      });
  }, []);

CodePudding user response：

While looking at your screenshot - I observed that the browser has a different domain set hilife01 vs hilife-1

Accessing throuugh https://hlife01.herokuapp.com/auth/login - gets you the cookies but your App doesn't have the right route configured.

Most likely, The Right domain is not associated with the cookie being set so while setting the cookie, the browser silently rejects the cookie because you are not matching the domain, however it is visible in the address bar.