From 73286ca7f620dc65a846bd453ca9c8bf5476f473 Mon Sep 17 00:00:00 2001
From: Jeffrey <jeffreyzhao2003gmail.com>
Date: Tue, 11 Jun 2024 22:13:53 -0400
Subject: [PATCH] fix error where login with wrong role and refreshing page
 still logs in

---
 frontend/src/APIClients/AuthAPIClient.ts |  1 -
 frontend/src/components/auth/Login.tsx   | 25 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/APIClients/AuthAPIClient.ts b/frontend/src/APIClients/AuthAPIClient.ts
index 0372ad8..7acdc3e 100644
--- a/frontend/src/APIClients/AuthAPIClient.ts
+++ b/frontend/src/APIClients/AuthAPIClient.ts
@@ -16,7 +16,6 @@ const login = async (
       { email, password },
       { withCredentials: true },
     );
-    localStorage.setItem(AUTHENTICATED_USER_KEY, JSON.stringify(data));
     return data;
   } catch (error) {
     return null;
diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
index 87f44c0..cb8bfca 100644
--- a/frontend/src/components/auth/Login.tsx
+++ b/frontend/src/components/auth/Login.tsx
@@ -9,6 +9,7 @@ import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
+import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
 
 type GoogleResponse = GoogleLoginResponse | GoogleLoginResponseOffline;
 
@@ -31,15 +32,24 @@ const Login = (): React.ReactElement => {
   const searchParams = new URLSearchParams(location.search);
   const role = searchParams.get("role");
 
+  if (authenticatedUser) {
+    return <Redirect to={HOME_PAGE} />;
+  }
+
+  if (!role || !["administrator", "facilitator", "learner"].includes(role)) {
+    // need this changed when welcome page exists
+    return <Redirect to="/welcome" />;
+  }
+
   const onLogInClick = async () => {
     const user: AuthenticatedUser = await authAPIClient.login(email, password);
 
-    if (user && user.role.toLowerCase() !== role?.toLocaleLowerCase()) {
+    if (user && user.role.toLowerCase() !== role.toLocaleLowerCase()) {
       // change this later to not use an alert
       // eslint-disable-next-line no-alert
-      window.alert(`Bad login. Expected ${user.role}, got ${role}`);
-      return;
+      alert(`Bad login. Expected ${user.role}, got ${role}`);
     }
+    localStorage.setItem(AUTHENTICATED_USER_KEY, JSON.stringify(user));
     setAuthenticatedUser(user);
   };
 
@@ -54,15 +64,6 @@ const Login = (): React.ReactElement => {
     setAuthenticatedUser(user);
   };
 
-  if (authenticatedUser) {
-    return <Redirect to={HOME_PAGE} />;
-  }
-
-  if (!role || !["administrator", "facilitator", "learner"].includes(role)) {
-    // need this changed when welcome page exists
-    return <Redirect to="/welcome" />;
-  }
-
   return (
     <div style={{ textAlign: "center" }}>
       <h1>{capitalizeFirstLetter(role)} Login</h1>