diff --git a/src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx b/src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx index d5c3631..a6f447c 100644 --- a/src/features/authentication/components/AuthenticationSteps/GoogleAuthenticationV2.tsx +++ b/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 { Google } from 'iconsax-react'; +import { Box } from '@mui/material'; 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 } = - useApi(loginOrSignUpWithGoogle); - const googleButtonRef = useRef(null); + const { execute: loginWithGoogleCall } = useApi(loginOrSignUpWithGoogle); - useEffect(() => { - const initializeData = { - client_id: import.meta.env.VITE_GOOGLE_CLIENT_ID, - callback: handleCredentialResponse, - }; + const googleBtnRef = useRef(null); + const renderedRef = useRef(false); - google.accounts.id.initialize(initializeData); - - google.accounts.id.renderButton( - document.getElementById('google-signin-button'), - { theme: 'outline' }, - ); - }, []); - - const handleCredentialResponse = async (response: { credential: any }) => { + const handleCredentialResponse = async (response: any) => { const idToken = response.credential; try { @@ -82,31 +66,58 @@ export const GoogleAuthenticationV2 = ({ } }; - const handleGoogleLogin = () => { - if (googleButtonRef.current) { - const googleCustomRenderedDivs = - googleButtonRef.current.querySelectorAll('div'); + useEffect(() => { + // Ensure the DOM element exists + if (!googleBtnRef.current || renderedRef.current) return; - 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 ( <> - -
-
- - +
+ ); }; diff --git a/src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx b/src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx index 0d9a792..7e7b8eb 100644 --- a/src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx +++ b/src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx @@ -207,7 +207,6 @@ export function LoginRegisterForm({