Session is stored in mongoDB store but not in the browser during production

Question

OVERVIEW

• I wrote a react app that interfaces with an Express API
• I implemented oauth2 in conjunction with express sessions for authorization
• Client-side I deployed to Netlify - https://keen-bhaskara-257c68.netlify.app/
• here is the repo: https://github.com/ThevinSilva/loghorizonServer
• server-side to Heroku - https://loghorizon-server.herokuapp.com/
• here is the repo: https://github.com/ThevinSilva/loghorizonClient
• current cors set up

//cloudinary
require("dotenv").config();
cloudinary.config({
  cloud_name: "loghorizon",
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_SECRET,
});
require("./config/passport")(passport);

//MongoDB
connectDB();

//---------------------------------- SERVER ----------------------------------
const app = Express();
const httpServer = http.createServer(app);
const io = Socket(httpServer, {
  cors: {
    origin: process.env.CLIENT_SIDE_URL,
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true,
  },
});

app.use(
  cors({
    origin: process.env.CLIENT_SIDE_URL, // allow to server to accept request from different origin
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true, // allow session cookie from browser to pass through
  })
);

//----------------------------------  MIDDLEWARE ----------------------------------
// increase bandwidth to allow for base64 strings
app.use(Express.json({ limit: "40mb", extended: true }));
app.use(Express.urlencoded({ limit: "40mb", extended: true }));
app.set("trust proxy", 1);
app.use(
  Session({
    name: "LHsession",
    secret: process.env.COOKIE_SECRET,
    resave: true,
    store: new MongoStore({ mongooseConnection: mongoose.connection }),
    cookie: {
      sameSite: false,
      maxAge: 8.64e7,
      secure: false,
      httpOnly: false,
    },
  })
);
// utility for monitoring requests
app.use(Morgan("dev"));

//---------------------------------- Pasport config ----------------------------------
app.use(passport.initialize());
app.use(passport.session());

PROBLEM

The project works flawlessly in my dev environment(tested on multiple computers). Throws the following error: has been blocked by CORS policy: no 'Access-Control-Allow-origin' ...

It's important to note that the actual authorization page with the accounts shows up except when I get redirected back to my web app session isn't stored.

WHAT I'VE TRIED

it goes without saying non of these worked

• I read that adding the line app.set("trust proxy")

app.set("trust proxy", 1);
app.use(
  Session({
    name: "LHsession",
    secret: process.env.COOKIE_SECRET,
    resave: true,
    store: new MongoStore({ mongooseConnection: mongoose.connection }),
    cookie: {
      sameSite: false,
      maxAge: 8.64e7,
      secure: false,
      httpOnly: false,
    },
  })
);

• In Axios I added withCredentials

const server = axios.create({
  withCredentials: true,
  baseURL: process.env.REACT_APP_SERVER + "/board",
});

• I read numerous threads this one seemed promising and might work but I want the client and server to be separate - express session not persisting after deploying to heroku and netlify

Disclaimer

• I'm a 17-year-old hobbyist who's probably way in over his head, please dumb things down my knowledge of networking non-existent. Give me material to read perhaps.
• the environment variables I checked were successfully entered
• The documentation is probably a little weird sorry
• There's numerous errors and warning in the final react build but I think that hardly matters here

Answer 1

Problem solved I registered the two under my website's domain and now it works like a charm. Didn't solve the cors issue but still managed to get my project to work. A more conclusive and thorough run down of potential culprits are on this thread : Cross-Domain Session Cookie (Express API on Heroku + React App on Netlify)