Add protected route

frontend/package.json

@@ -15,6 +15,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1"

frontend/src/App.tsx

@@ -3,13 +3,35 @@ import CssBaseline from "@mui/material/CssBaseline";
 import LoginPage from "./components/LoginPage.tsx";
 import { Route, Routes } from "react-router-dom";
 import MainPage from "./components/MainPage.tsx";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import ProtectedRoute from "./components/ProtectedRoute.tsx";
 
 export default function App() {
+  const [user, setUser] = useState<string | null | undefined>(undefined);
+
+  const loadUser = () => {
+    axios
+      .get("/api/auth/me")
+      .then((response) => {
+        setUser(response.data);
+      })
+      .catch(() => {
+        setUser(null);
+      });
+  };
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
   return (
     <React.Fragment>
       <CssBaseline />
       <Routes>
-        <Route path="/" element={<MainPage />} />
+        <Route element={<ProtectedRoute user={user} />}>
+          <Route path="/" element={<MainPage />} />
+        </Route>
         <Route path="/login" element={<LoginPage />} />
       </Routes>
     </React.Fragment>

frontend/src/components/ProtectedRoute.tsx

@@ -0,0 +1,13 @@
+import { Navigate, Outlet } from "react-router-dom";
+
+type ProtectedRouteProps = {
+  user: string | undefined | null;
+};
+
+export default function ProtectedRoute({ user }: ProtectedRouteProps) {
+  if (user === undefined) {
+    return <div>Loading...</div>;
+  }
+
+  return user ? <Outlet /> : <Navigate to="/login" />;
+}