Fix google error (#483)

Author: lickem22

admin_app/src/app/login/page.tsx

@@ -43,6 +43,13 @@ const Login = () => {
   const [isLoading, setIsLoading] = React.useState(true);
   const { login, loginGoogle, loginError } = useAuth();
   const [recoveryCodes, setRecoveryCodes] = React.useState<string[]>([]);
+  const [isRendered, setIsRendered] = React.useState<boolean>(false);
+  const signinDiv = React.useCallback((node: HTMLDivElement | null) => {
+    if (node !== null) {
+      setIsRendered(true);
+    }
+  }, []);
+
   const iconStyles = {
     color: appColors.white,
     width: { xs: "30%", lg: "40%" },
@@ -63,37 +70,39 @@ const Login = () => {
   };
 
   useEffect(() => {
-    const fetchRegisterPrompt = async () => {
-      const data = await getRegisterOption();
-      setShowAdminAlertModal(data.require_register);
-      setIsLoading(false);
-    };
-    fetchRegisterPrompt();
     const handleCredentialResponse = (response: any) => {
       loginGoogle({
         client_id: response.client_id,
         credential: response.credential,
       });
     };
-    window.google.accounts.id.initialize({
-      client_id: NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID,
-      callback: (data) => handleCredentialResponse(data),
-      state_cookie_domain: "https://example.com",
-    });
-
-    const signinDiv = document.getElementById("signinDiv");
-
-    if (signinDiv) {
-      window.google.accounts.id.renderButton(signinDiv, {
-        type: "standard",
-        shape: "pill",
-        theme: "outline",
-        size: "large",
-        width: 275,
+    if (isRendered) {
+      window.google.accounts.id.initialize({
+        client_id: NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID,
+        callback: (data) => handleCredentialResponse(data),
+        state_cookie_domain: "https://example.com",
       });
+      const signinDivId = document.getElementById("signinDiv");
+      if (signinDivId) {
+        window.google.accounts.id.renderButton(signinDivId, {
+          type: "standard",
+          shape: "pill",
+          theme: "outline",
+          size: "large",
+          width: 275,
+        });
+      }
     }
-  }, []);
+  }, [isRendered]);
 
+  useEffect(() => {
+    const fetchRegisterPrompt = async () => {
+      const data = await getRegisterOption();
+      setShowAdminAlertModal(data.require_register);
+      setIsLoading(false);
+    };
+    fetchRegisterPrompt();
+  }, []);
   useEffect(() => {
     if (recoveryCodes.length > 0) {
       setShowConfirmationModal(true);
@@ -348,7 +357,7 @@ const Login = () => {
               alignItems="center"
               justifyContent="center"
             >
-              <div id="signinDiv" />
+              <div ref={signinDiv} id="signinDiv" />
               <Layout.Spacer multiplier={2.5} />
               <Box display="flex" alignItems="center" width="100%">
                 <Box flexGrow={1} height="1px" bgcolor="lightgrey" />
@@ -360,6 +369,7 @@ const Login = () => {
               <Layout.Spacer multiplier={1.5} />
             </Box>
           )}
+
           <Box
             component="form"
             noValidate