From 62bd4f23b5422f5c2387ec435ed3f9a5ee3f4b53 Mon Sep 17 00:00:00 2001
From: Justin Forest <hex@umonkey.net>
Date: Sun, 7 Apr 2024 23:24:27 +0400
Subject: [PATCH] Fix login infinite loop

---
 .../SelectLocationDialog.tsx                  |  4 ++
 .../LoginWithGoogleButton.tsx                 |  2 +-
 .../elements/LoginWithGoogleButton/hooks.ts   | 40 ++++++++-----------
 frontend/src/utils/userinfo.ts                | 12 +++++-
 4 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/dialogs/SelectLocationDialog/SelectLocationDialog.tsx b/frontend/src/components/dialogs/SelectLocationDialog/SelectLocationDialog.tsx
index c933b57e..2dc1f4f0 100644
--- a/frontend/src/components/dialogs/SelectLocationDialog/SelectLocationDialog.tsx
+++ b/frontend/src/components/dialogs/SelectLocationDialog/SelectLocationDialog.tsx
@@ -19,6 +19,10 @@ export const SelectLocationDialog = (props: IProps) => {
 
   const handleLoginSuccess = () => {
     console.debug("Login successful.");
+
+    // For some reason, userInfo is not updated immediately after login,
+    // so we need to reload the page to get the updated userInfo.
+    window.location.reload();
   };
 
   const handleLoginError = () => {
diff --git a/frontend/src/components/elements/LoginWithGoogleButton/LoginWithGoogleButton.tsx b/frontend/src/components/elements/LoginWithGoogleButton/LoginWithGoogleButton.tsx
index 5bcdd94f..d4113978 100644
--- a/frontend/src/components/elements/LoginWithGoogleButton/LoginWithGoogleButton.tsx
+++ b/frontend/src/components/elements/LoginWithGoogleButton/LoginWithGoogleButton.tsx
@@ -24,6 +24,6 @@ export const LoginWithGoogleButton = (props: IProps) => {
   };
 
   return (
-    <Button variant="contained" color="success" disabled={props.disabled} onClick={handleClick}>Continue</Button>
+    <Button variant="contained" color="success" disabled={props.disabled} onClick={handleClick}>Log In with Google</Button>
   );
 };
diff --git a/frontend/src/components/elements/LoginWithGoogleButton/hooks.ts b/frontend/src/components/elements/LoginWithGoogleButton/hooks.ts
index 2dd41c79..5ff9a040 100644
--- a/frontend/src/components/elements/LoginWithGoogleButton/hooks.ts
+++ b/frontend/src/components/elements/LoginWithGoogleButton/hooks.ts
@@ -14,9 +14,22 @@ export const useGoogleAuth = (props: IProps) => {
   const { setUserInfo } = useUserInfo();
 
   const loginFunction = useGoogleLogin({
-    onSuccess: (response) => {
-      console.debug("Received a token from Google.");
-      setToken(response);
+    onSuccess: async (response) => {
+      console.debug("Google auth successful, received access token.");
+
+      const token = response.access_token;
+
+      try {
+        const res = await treeMapService.loginGoogle(token);
+        console.info("Logged in with Google.");
+
+        setUserInfo(res);
+
+        props.onSuccess();
+      } catch (e) {
+        console.error("Error logging in with Google:", e);
+        props.onError();
+      }
     },
 
     onError: (error) => {
@@ -26,27 +39,6 @@ export const useGoogleAuth = (props: IProps) => {
     },
   });
 
-  // When a Google token is received, exchange it for user info.
-  useEffect(() => {
-    (async () => {
-      if (token) {
-        console.debug("Access token received from Google. Logging in.");
-
-        try {
-          const res = await treeMapService.loginGoogle(token.access_token);
-
-          setUserInfo(res);
-          console.info("Logged in with Google.");
-
-          props.onSuccess();
-        } catch (e) {
-          console.error("Error logging in with Google:", e);
-          props.onError();
-        }
-      }
-    })();
-  }, [token, setUserInfo, props]);
-
   return {
     login: () => { loginFunction() },
   };
diff --git a/frontend/src/utils/userinfo.ts b/frontend/src/utils/userinfo.ts
index dfa3c84c..e39e08e7 100644
--- a/frontend/src/utils/userinfo.ts
+++ b/frontend/src/utils/userinfo.ts
@@ -21,6 +21,8 @@ export const useUserInfo = () => {
   const [userInfo, setUserInfo] = useState<IUserInfo | null>(readStoredValue());
 
   const handleChange = useCallback((event: StorageEvent) => {
+    console.debug("CHANGE", event);
+
     if (event.key === USER_INFO_KEY) {
       console.debug("User info change detected.");
       setUserInfo(JSON.parse(event.newValue || "null"));
@@ -37,14 +39,20 @@ export const useUserInfo = () => {
   }, [handleChange]);
 
   // Modify the stored value.
+  // The storage event is only triggered when the value is changed in another tab.
+  // So we need to also trigger the change manually.
   const setter = (value: IUserInfo | null) => {
     try {
       if (value) {
         localStorage.setItem(USER_INFO_KEY, JSON.stringify(value));
-        console.debug("User info updated.");
+        console.debug("User info updated in localStorage.");
+
+        setUserInfo(value);
       } else {
         localStorage.removeItem(USER_INFO_KEY);
-        console.debug("User info removed.");
+        console.debug("User info removed from localStorage.");
+
+        setUserInfo(null);
       }
     } catch (e) {
       console.error("Error updating user info.", e);