Storing session in Browser for express.js (MERN Stack)

Question

I've been trying to store a user's email in the session for my express.js file. But everytime I try something, and call another function, the session remains undefined. I wanted to store it in the browser only without storing each session in the database. Been working on this for weeks now, and I can't seem to find the answer.

server.js file:

import express from 'express';
import cookieParser from 'cookie-parser';
import session from 'express-session';
const app = express();
app.use(cookieParser());
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    cookie: {
        maxAge  : 1000 * 60 * 60 * 3, // if 1 day * 24 but since *3 its for 3 hours only
    },
}))

app.post('/user/login', (req, res) => { 
    const loginUser = req.body;
    const email = loginUser['email'];
    const password = loginUser['password'];
    if (!email || !password){ 
        res.status(400).json({success: false, error: "Please provide email and password"});
    }
    try { 
        Users.findOne({ email: email }, (err, user) => { 
            if (password == user['password']){
                req.session.user(user['email']);
                res.status(200).send(user_email);
            } else {
                res.status(400).json({success: false, error: "incorrect password"});
            }
        });
    } catch { 
    }
})

Calling the Login file from the frontend (react js):

import React, { useState } from 'react';
import { Grid, TextField, Button } from '@mui/material';
import "./SignUpLogin.css";
import axios from '../../axios';
import useForm from './useForm';
import { Form } from './useForm';


const initialValues = { 
    email: '',
    password: ''
}

function Login({ modalFunc }) { 

    const LoginUser = e => { 
        console.log("INSIDE LOGIN USER");
        modalFunc();
        e.preventDefault();
        axios.post('/user/login', values, {withCredentials: true})
            .then(response => { 
                console.log("in login user");
                console.log(response.data);
            })
    }

    const {
        values, 
        setValues, 
        handleInputChange
    } = useForm(initialValues);

    return (
        <div className="Login">
            <Form> 
                <Grid item>
                    <TextField
                        required 
                        variant="outlined"
                        label="Email"
                        name="email"
                        color="secondary"
                        fullWidth
                        value={ values.email } 
                        onChange={ handleInputChange }
                    />
                </Grid>
                <Grid item>
                    <TextField 
                    required 
                        variant="outlined"
                        label="Password"
                        name="password"
                        type="password"
                        color="secondary"
                        fullWidth
                        value={ values.password }
                        onChange={ handleInputChange }
                    />
                </Grid>
                <Grid item> 
                    <Button 
                        variant="contained"
                        fullWidth
                        onClick = { LoginUser }>
                    Login
                    </Button>
                </Grid>
            </Form>
        </div>
    )
}

export default Login

But when I call server.js again in another get function, session is undefined.

app.get('/user/loggedIn', (req, res) => { 
    console.log(req.session.user);
    user_email = req.session.user;
    if (req.session.user) {
        Users.findOne({ email: user_email }, (err, user) => { 
            // console.log("in logged in, in server!!!");
            // console.log(user);
            res.status(200).send(user);
        })
    } else { 
        console.log("no session");
        res.status(400);
    }
})

Calling app.get('/user/loggedIn') in react.js file:

function Header() {
  const [modalOpen, setModalOpen] = useState(false); 
  const changeModal = () => { 
    setModalOpen(!modalOpen)
  }

  const [user, setUser] = useState(null);
  useEffect(() => { 
    // axios.get('/user/loggedIn', {}, {withCredentials: true})
    axios.get('/user/loggedIn', {}, {withCredentials: true})
    .then(response => { 
      // console.log("RESPONSE FROM LOGGED IN");
      // console.log(response.data);
      setUser(response.data);
    })
  })

Answer 1

server.js

app.use(
    cors({
        origin: "http://localhost:3000",
        credentials: true,
    })
);

withCredentials should be defined this way

axios.defaults.withCredentials = true;