Why isn't the express session cookie being stored on the browser's cookie storage on production, but it works on localhost?? (express + react)

Question

I created a test react app which is deployed at vercel and the server is at render.com. To solve cross-site cookie problems I set the same domain on both (app.mydomain.online for the app, and api.mydomain.online for the API). Now, when i look at the cookie in the header, no errors are showing up. However, The cookie still not getting stored.

server is created via npm init. react is created via npm create-react-app.

this is my sample code.

server

const express = require("express");
const cors = require("cors");
const session = require('express-session');
const app = express();
require('dotenv').config();

const PORT = process.env.PORT;

app.use(express.json());
app.use(cors({
    origin: 'https://app.myDomain.online',
    methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
    credentials: true
}));

const oneDay = 1000 * 60 * 60 * 24;
app.set('trust proxy', 1) // trust first proxy
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true, sameSite: 'none' }
}));

app.get('/createSession', (req, res) => {
    req.session.user = 'user';
    res.send('new session is created');
});

app.get('/', (req, res) => {
    res.send('get sess')
});

app.get('/getSession', (req, res) => {
    if(req.session.user){
        res.send('active');
    }else{
        res.send('not active');
    }
});

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

react

import React from 'react'
import { useEffect } from 'react';
import Axios from 'axios';

function Test() {
    
    useEffect(() => {
        Axios.get(' https://api.myDomain.online/createSession',
                  { withCredentials: true }
        );
    }, []);
    
    

    return (
        <div>Test</div>
    )
}

export default Test;

Answer 1

From the documentation for express-session...

cookie.expires

Specifies the Date object to be the value for the Expires Set-Cookie attribute. By default, no expiration is set, and most clients will consider this a “non-persistent cookie” and will delete it on a condition like exiting a web browser application.

The docs go on to prefer the maxAge property to control this. Choose a time frame that makes sense for your application. For example, 1 week...

app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: true,
    cookie: { secure: true, sameSite: "none", maxAge: 7 * 24 * 60 * 60 * 1000 },
  })
);