frontend/src/components/AuthenticatedRoute.jsx

@@ -12,7 +12,7 @@ const AuthenticatedRoute = ({ children, isAuthenticated }) => {
     } else if (!isAuthenticated && currentUser?.id) {
       setLocation("/");
     }
-  }, [currentUser]);
+  }, [currentUser, setLocation, isAuthenticated]);
 
   return children;
 };

frontend/src/pages/LoginPage.jsx

@@ -3,7 +3,7 @@ import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
 import { Link, useLocation } from "wouter";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
-import { makeRequest } from "../utils.ts";
+import { sendLogoutRequest, sendLoginRequest } from "../utils.ts";
 
 const LoginPage = () => {
   const [username, setUsername] = useState("");
@@ -15,29 +15,28 @@ const LoginPage = () => {
 
   useEffect(() => {
     if (currentUser?.id) {
-      gotoHome();
+      setLocation("/");
     }
-  }, [currentUser]);
+  }, [currentUser, setLocation]);
 
-  const gotoHome = () => {
-    setLocation("/");
-  };
-
-  const sendLoginRequest = async (e) => {
+  const formCb = async (e) => {
     e?.preventDefault();
-    await makeRequest({
-      url: "http://localhost:5000/login",
-      method: "POST",
-      body: { username, password },
-    })
-      .then((resp) => resp.json())
-      .then((data) => {
-        if (data.error) {
-          setError(data);
-          return;
-        }
-        setCurrentUser(data);
-      });
+    const res = await sendLoginRequest(username, password);
+
+    if (res?.isError) {
+      if (res.message.includes("already")) {
+        setError({
+          ...res,
+          message: "An error occured. Try logging in again.",
+        });
+        await sendLogoutRequest();
+        return;
+      }
+      setError(res);
+      return;
+    }
+    setCurrentUser(res);
+    setLocation("/");
   };
 
   return (
@@ -53,7 +52,7 @@ const LoginPage = () => {
         )}
         <h2>Login</h2>
         <br />
-        <Form onSubmit={sendLoginRequest}>
+        <Form onSubmit={formCb}>
           <Form.Group as={Row} className="mb-3" controlId="username">
             <Form.Label column sm={2} className="me-2">
               Username

frontend/src/pages/LogoutPage.jsx

@@ -3,23 +3,18 @@ import { useContext, useEffect } from "react";
 import { Container } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
-import { makeRequest } from "../utils.ts";
+import { sendLogoutRequest } from "../utils.ts";
 
 const LogoutPage = () => {
   const { setCurrentUser } = useContext(UserContext);
   useEffect(() => {
-    const cleanup = async () => {
-      await makeRequest({
-        url: "http://localhost:5000/logout",
-        method: "POST",
-      });
-
+    (async () => {
+      await sendLogoutRequest();
       await setCurrentUser({});
       localStorage.removeItem("currentUser");
       window.location.href = "/login";
-    };
-    cleanup();
-  }, []);
+    })();
+  }, [setCurrentUser]);
 
   return (
     <React.Fragment>

frontend/src/utils.ts

@@ -1,4 +1,4 @@
-const makeRequest = ({ url, method, body }): Promise<Response> => {
+const makeRequest = ({ url, method, body = {} }): Promise<Response> => {
   return fetch(url, {
     method: method,
     credentials: "include",
@@ -8,4 +8,41 @@ const makeRequest = ({ url, method, body }): Promise<Response> => {
   });
 };
 
-export { makeRequest };
+const sendLoginRequest = async (
+  username: string,
+  password: string
+): Promise<object> => {
+  const p: Promise<object> = new Promise(async (res) => {
+    await makeRequest({
+      url: "http://localhost:5000/login",
+      method: "POST",
+      body: { username, password },
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data.error) {
+          res({ isError: true, ...data });
+        }
+        res({ isError: false, ...data });
+      });
+    res({ isError: true });
+  });
+  return p;
+};
+
+const sendLogoutRequest = async (): Promise<object> => {
+  const p: Promise<object> = new Promise(async (res) => {
+    await makeRequest({
+      url: "http://localhost:5000/logout",
+      method: "POST",
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        res({ isError: false, ...data });
+      });
+    res({ isError: true });
+  });
+  return p;
+};
+
+export { makeRequest, sendLoginRequest, sendLogoutRequest };