frontend/src/App.js

@@ -3,6 +3,7 @@ import { Route } from "wouter";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
 import { UserContextProvider } from "./contexts/UserContext";
+import LogoutPage from "./pages/LogoutPage";
 
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
       <UserContextProvider>
         <Route path="/" component={HomePage} />
         <Route path="/login" component={LoginPage} />
+        <Route path="/logout" component={LogoutPage} />
       </UserContextProvider>
     </div>
   );

frontend/src/pages/LogoutPage.jsx

@@ -0,0 +1,24 @@
+import { useContext, useEffect } from "react";
+import UserContext from "../contexts/UserContext";
+import { makeRequest } from "../utils.ts";
+
+const LogoutPage = () => {
+  const { setCurrentUser } = useContext(UserContext);
+  useEffect(() => {
+    const cleanup = async () => {
+      await makeRequest({
+        url: "http://localhost:5000/logout",
+        method: "POST",
+      });
+
+      await setCurrentUser({});
+      localStorage.removeItem("currentUser");
+      window.location.href = "/login";
+    };
+    cleanup();
+  }, []);
+
+  return <div></div>;
+};
+
+export default LogoutPage;