Auth Guarding in react

After we authenticate we might want to guard certain routes and redirect to the login page if not authenticated

the most common way to do it is

import { Navigate } from 'react-router-dom';

export const ProtectedRoute = ({ user,children }) => {
  if (!user) {
   return <Navigate to="/login" replace />;
    }
  return children;
  };

and wrap the childern with the component

          <Routes>
            <Route
              path="/"
              element={
                <ProtectedRoute user={user}>
                  <Home user={user} />
                </ProtectedRoute>
              }
            />
            </Routes>

but with the react-router v6+ routes can be nested inside layouts which unlocks new patterns

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PBUser } from '../../utils/types/types';

export const useAuthGuard = (user:PBUser,test_mode:boolean) => {
    const navigate = useNavigate();

    useEffect(() => {
        if (!user?.email && !test_mode) {
            navigate("/auth");
        }
    }, [user?.email]);
};

and use the hook in the main layout or layout for whichever route you want to guard

import { Outlet} from 'react-router-dom';
import { Toolbar } from '../../components/toolbar/Toolbar';
import { PBUser } from '../../utils/types/types';
import { useAuthGuard } from './../../shared/hooks/useAuthGuard';

interface RootLayoutProps {
  user: PBUser;
  test_mode: boolean;
}

export const RootLayout = ({user,test_mode}: RootLayoutProps) => {

  useAuthGuard(user,test_mode)

  return (
    <div className="w-full h-full dark:bg-slate-900">
      <div
        className="h-14 w-full  bg-slate-700 dark:bg-slate-800
          bg-opacity-30 dark:bg-opacity-90 max-h-[50px] p-1
         sticky top-0 z-40"
      >
        <Toolbar user={user} />
      </div>
      <main className=" w-full h-[90%] fixed top-12 overflow-y-scroll">
        <Outlet />
      </main>
    </div>
  );
};