Ensure logged in users can't go to login or register pages

client/src/components/ProtectedRoute/InverseProtectedRoute.tsx

+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+function InverseProtectedRoute() {
+  const { isAuth } = useAuth();
+
+  if (!isAuth) {
+    return <Outlet></Outlet>
+  }
+
+  return <Navigate to={'/'}></Navigate>
+}
+
+export default InverseProtectedRoute;

client/src/main.tsx

@@ -6,6 +6,7 @@ import Login from './components/Login/Login.tsx';
 import Register from './components/Register/Register.tsx';
 import Logout from './components/Logout/Logout.tsx';
 import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
+import InverseProtectedRoute from './components/ProtectedRoute/InverseProtectedRoute.tsx';
 import Dashboard from './components/Dashboard/Dashboard.tsx';
 import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
 import BookingList from './components/BookingList/BookingList.tsx';
@@ -23,21 +24,26 @@ const router = createBrowserRouter([
     element: <App></App>,
     children: [
       {
-        path: 'login',
-        element: <Login></Login>
-      },
-      {
-        path: 'register',
-        element: <Register></Register>
-      },
-      {
-        path: 'logout',
-        loader: LogoutUser,
-        element: <Logout></Logout>
+        element: <InverseProtectedRoute></InverseProtectedRoute>,
+        children: [
+          {
+            path: 'login',
+            element: <Login></Login>
+          },
+          {
+            path: 'register',
+            element: <Register></Register>
+          }
+        ]
       },
       {
         element: <ProtectedRoute></ProtectedRoute>,
         children: [
+          {
+            path: 'logout',
+            loader: LogoutUser,
+            element: <Logout></Logout>
+          },
           {
             path: 'customer-dashboard',
             loader: GetCustomerDashboardData,