Fix infinite loop of redirects on Google Sign-In

client/components/GLogin.tsx

@@ -1,44 +1,35 @@
-import React from 'react';
-import { GoogleLogin } from 'react-google-login'
-import GoogleButton from 'react-google-button'
-import { refreshTokenSetup } from './utils/refreshToken'
+import React from "react";
+import { GoogleLogin } from "react-google-login";
+import GoogleButton from "react-google-button";
 import getConfig from "next/config";
 
-
 const { publicRuntimeConfig } = getConfig();
 
 function GLogin(props) {
+  const onSuccess = res => {
+    props.onSuccess(res.profileObj); //Returns profile obj
+  };
 
-    const onSuccess = (res) => {
-        refreshTokenSetup(res) //Refreshes tokens so it doesnt auto-logout
-        props.onSuccess(res.profileObj)//Returns profile obj
-    };
-
-    const onFailure = (res) => {
-        console.log('[Login Failed] res: ', res); // Error message
-    };
-
-    return (
-        <div>
-            <GoogleLogin
-                clientId={publicRuntimeConfig.GOOGLE_CLIENT_ID}
-                buttonText="Login"
-                onSuccess={onSuccess}
-                onFailure={onFailure}
-                cookiePolicy={'single_host_origin'}
-                render={renderProps => (
-                    <GoogleButton
-                        style={{ width: "100%", marginTop: 30 }}
-                        onClick={renderProps.onClick}
-                        disabled={renderProps.disabled}
-                    >
-                        Sign in with Google
-                    </GoogleButton>
-                )}
-                isSignedIn={true}
-            />
-        </div>
-    )
+  return (
+    <div>
+      <GoogleLogin
+        clientId={publicRuntimeConfig.GOOGLE_CLIENT_ID}
+        buttonText="Login"
+        onSuccess={onSuccess}
+        onFailure={props.onFailure}
+        cookiePolicy={"single_host_origin"}
+        render={renderProps => (
+          <GoogleButton
+            style={{ width: "100%", marginTop: 30 }}
+            onClick={renderProps.onClick}
+            disabled={renderProps.disabled}
+          >
+            Sign in with Google
+          </GoogleButton>
+        )}
+      />
+    </div>
+  );
 }
 
-export default GLogin
+export default GLogin;

client/pages/login.tsx

@@ -8,7 +8,12 @@ import Link from "next/link";
 import axios from "axios";
 
 import { useStoreState, useStoreActions } from "../store";
-import { APIv2, DISALLOW_REGISTRATION, DISALLOW_GOOGLE, DISALLOW_VERIFICATION } from "../consts";
+import {
+  APIv2,
+  DISALLOW_REGISTRATION,
+  DISALLOW_GOOGLE,
+  DISALLOW_VERIFICATION
+} from "../consts";
 import { ColCenterV } from "../components/Layout";
 import AppWrapper from "../components/AppWrapper";
 import { TextInput } from "../components/Input";
@@ -18,7 +23,7 @@ import Text, { H2 } from "../components/Text";
 import ALink from "../components/ALink";
 import Icon from "../components/Icon";
 import getConfig from "next/config";
-import GLogin from "../components/GLogin"
+import GLogin from "../components/GLogin";
 
 const LoginForm = styled(Flex).attrs({
   as: "form",
@@ -39,29 +44,29 @@ const LoginPage = () => {
   const gLogin = useStoreActions(s => s.auth.gLogin);
   const [error, setError] = useState("");
   const [verifying, setVerifying] = useState(false);
-  const [loading, setLoading] = useState({ login: false, signup: false, gLogin: false });
+  const [loading, setLoading] = useState({
+    login: false,
+    signup: false,
+    gLogin: false
+  });
   const [formState, { email, password, label }] = useFormState<{
     email: string;
     password: string;
   }>(null, { withIds: true });
 
-  const [google, setGoogle] = useState();
-
-  const googleHandler = profile => {
+  const onGoogleSuccess = async profile => {
     if (!DISALLOW_GOOGLE) {
-      setGoogle(profile);
-
       if (profile.email && profile.googleId) {
         setLoading(s => ({ ...s, gLogin: true }));
         try {
-          gLogin({ email: profile.email, password: profile.googleId })
+          await gLogin({ email: profile.email, password: profile.googleId });
           Router.push("/");
         } catch (error) {
           setError(error.response.data.error);
         }
       }
     }
-  }
+  };
 
   useEffect(() => {
     if (isAuthenticated) Router.push("/");
@@ -189,11 +194,7 @@ const LoginPage = () => {
                 </Button>
               )}
             </Flex>
-            {!DISALLOW_GOOGLE && (
-            <GLogin
-              onSuccess={googleHandler}
-            />
-            )}
+            {!DISALLOW_GOOGLE && <GLogin onSuccess={onGoogleSuccess} />}
             <Link href="/reset-password">
               <ALink
                 href="/reset-password"

client/store/auth.ts

@@ -20,7 +20,6 @@ export interface Auth {
   renew: Thunk<Auth>;
 }
 
-
 export const auth: Auth = {
   domain: null,
   email: null,
@@ -36,13 +35,11 @@ export const auth: Auth = {
     state.domain = null;
     state.email = null;
     state.isAdmin = false;
-    if (!DISALLOW_GOOGLE) {
+    if (!DISALLOW_GOOGLE && window.gapi.auth2) {
       const auth2 = window.gapi.auth2.getAuthInstance();
 
       if (auth2 != null) {
-        auth2.signOut().then(
-          auth2.disconnect()
-        )
+        auth2.signOut().then(auth2.disconnect());
       }
     }
   }),
@@ -54,7 +51,7 @@ export const auth: Auth = {
     actions.add(tokenPayload);
   }),
   gLogin: thunk(async (actions, payload) => {
-    const res = await axios.post(APIv2.AuthGoogle, payload)
+    const res = await axios.post(APIv2.AuthGoogle, payload);
     const { token } = res.data;
     cookie.set("token", token, { expires: 7 });
     const tokenPayload: TokenPayload = decode(token);