fix: google oauth button

src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx

@@ -10,13 +10,11 @@ import {
 } from '../../api/identityAPI';
 import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import { useApi } from '@/hooks/useApi';
-import { Icon, useToast } from '@rkheftan/harmony-ui';
+import { useToast } from '@rkheftan/harmony-ui';
 import { useTranslation } from 'react-i18next';
-import { Box, Button } from '@mui/material';
+import { Box } from '@mui/material';
-import { Google } from 'iconsax-react';
 
 interface GoogleAuthenticationV2Props {
-  disabled: boolean;
   authFactory: AuthFactory;
   onGoogleAuthenticated: (
     loginResult: LoginResult,
@@ -25,31 +23,17 @@ interface GoogleAuthenticationV2Props {
 }
 
 export const GoogleAuthenticationV2 = ({
-  disabled,
   authFactory,
   onGoogleAuthenticated,
 }: GoogleAuthenticationV2Props) => {
   const toast = useToast();
   const { t } = useTranslation('authentication');
-  const { loading: loginWithGoogleLoading, execute: loginWithGoogleCall } =
+  const { execute: loginWithGoogleCall } = useApi(loginOrSignUpWithGoogle);
-    useApi(loginOrSignUpWithGoogle);
-  const googleButtonRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  const googleBtnRef = useRef<HTMLDivElement>(null);
-    const initializeData = {
+  const renderedRef = useRef(false);
-      client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
-      callback: handleCredentialResponse,
-    };
 
-    google.accounts.id.initialize(initializeData);
+  const handleCredentialResponse = async (response: any) => {
-
-    google.accounts.id.renderButton(
-      document.getElementById('google-signin-button'),
-      { theme: 'outline' },
-    );
-  }, []);
-
-  const handleCredentialResponse = async (response: { credential: any }) => {
     const idToken = response.credential;
 
     try {
@@ -82,31 +66,58 @@ export const GoogleAuthenticationV2 = ({
     }
   };
 
-  const handleGoogleLogin = () => {
+  useEffect(() => {
-    if (googleButtonRef.current) {
+    // Ensure the DOM element exists
-      const googleCustomRenderedDivs =
+    if (!googleBtnRef.current || renderedRef.current) return;
-        googleButtonRef.current.querySelectorAll('div');
 
-      googleCustomRenderedDivs.forEach((b) => b.click());
+    // Logic to initialize Google Button
-    }
+    const initializeGoogle = () => {
+      if (!window.google) return;
+
+      google.accounts.id.initialize({
+        client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+        callback: handleCredentialResponse,
+      });
+
+      google.accounts.id.renderButton(googleBtnRef.current, {
+        theme: 'outline', // Matches your MUI 'variant="outlined"'
+        size: 'large', // Standard button size
+        type: 'standard', // The standard "Sign in with Google" button
+        text: 'signin_with', // Text: "Sign in with Google"
+        shape: 'rectangular', // Matches your MUI button shape
+        width: '456', // Set a width (Google caps this at 400px)
+        logo_alignment: 'left',
+        height: '44',
+      });
+
+      renderedRef.current = true;
     };
 
+    if (window.google?.accounts) {
+      initializeGoogle();
+    } else {
+      const timer = setInterval(() => {
+        if (window.google?.accounts) {
+          initializeGoogle();
+          clearInterval(timer);
+        }
+      }, 500);
+      return () => clearInterval(timer);
+    }
+  }, []);
+
   return (
     <>
-      <Box sx={{ display: 'none !important' }}>
+      <Box
-        <div ref={googleButtonRef} id="google-signin-button"></div>
+        sx={{
-      </Box>
+          width: '100%',
-
+          display: 'flex',
-      <Button
+          justifyContent: 'center',
-        type="button"
+          minHeight: 44,
-        onClick={handleGoogleLogin}
+        }}
-        disabled={disabled}
-        loading={loginWithGoogleLoading}
-        variant="outlined"
-        startIcon={<Icon Component={Google} variant="Bold" />}
       >
-        {t('loginForm.loginWithGoogle')}
+        <div ref={googleBtnRef} id="google-signin-button"></div>
-      </Button>
+      </Box>
     </>
   );
 };

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -207,7 +207,6 @@ export function LoginRegisterForm({
             <GoogleAuthenticationV2
               authFactory={authFactory}
               onGoogleAuthenticated={onGoogleAuthenticated}
-              disabled={userStatusLoading}
             />
           </Stack>
         </Box>