I’m currently facing an issue with setting and storing cookies in the browser while using a React app deployed on GitHub Pages and a Node.js backend hosted on Render. Here’s the setup and the problem I’m encountering:

Setup:

• Frontend: React app deployed on GitHub Pages
• Backend: Node.js server hosted on Render.
• Problem: If I use secure:false, cookies set by the backend are received by the browser on GitHub Pages, but they are not actually being set. If I use secure:true, the cookies do not arrive at all on the client.

Backend:

const express = require('express');
const mongoose = require("mongoose");
const session = require('express-session');
const bodyParser = require('body-parser');
const cors = require('cors');
const http = require('http');
const {passport} = require('./utils/auth');
const userRoutes = require('./router/users');
const roomRoutes = require('./router/rooms');
const socketEvents = require("./utils/socket");

const testHost = 'http://localhost:3000';
const prodHost = 'https://[GITHUB_PAGE]';

const isProd = process.env.NODE_ENV === 'production';

const host = isProd ? prodHost : testHost;

const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
        origin: host,
        methods: ["GET", "POST"]
    }
});
const port = process.env.PORT || 1234;
const mongoURI = '[MONGO_URL]';

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors({
    origin: host,
    credentials: true
}));
app.use(session({
    secret: '[SECRET]',
    resave: false,
    saveUninitialized: false,
    cookie: {
        httpOnly: true,
        secure: isProd,
        sameSite: isProd ? 'None' : 'Lax',
        domain: isProd ? '.onrender.com': "localhost",
        path: '/',
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}));
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/users", userRoutes);
app.use("/api/rooms", roomRoutes);

socketEvents(io);

mongoose.connect(mongoURI, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Database connected");
    server.listen(port, () => {
        console.log(`Server is running on port ${port}`);
    });
})
    .catch((err) => {
        console.log(err);
    });

Frontend request:

import axios from 'axios';

const prodHost = 'https://[RENDER_SITE].onrender.com';
const testHost = 'http://localhost:1234';

const host = process.env.REACT_APP_ENV === 'production' ? prodHost : testHost;

const API = axios.create({
    baseURL: host,
    withCredentials: true
});

Both github and Render are using https, so I am not sure why I am not receiving the cookies