client/src/PrivateRoutes.jsx

import React, { useState, useEffect, useContext } from 'react'
import { Outlet, Navigate } from "react-router-dom";
import { UserContext } from './contexts/UserProvider';

function PrivateRoutes() {

  const [isAuth, setIsAuth] = useState(undefined);
  const { user, setUser } = useContext(UserContext);


  const getAuthStatus = async () => {

    const res = await fetch(process.env.REACT_APP_BACKEND_URL + "/session", {
      credentials: "include"
    })

    if (res.ok) { setUser(await res.json()) };
    return res.ok;
  }

  useEffect(() => {
    getAuthStatus().then((status) => {
      console.log(status);
      setIsAuth(status);
    })
  }, [])

  if (isAuth === undefined) {
    return <p>
      Loading ...
    </p>
  }
  else {

    return (
      isAuth ? <Outlet /> : <Navigate to="/login" />
    );

  }

}

export default PrivateRoutes