diff --git a/frontend/src/components/GoogleSignIn.tsx b/frontend/src/components/GoogleSignIn.tsx index 5a92f544..79e83ee0 100644 --- a/frontend/src/components/GoogleSignIn.tsx +++ b/frontend/src/components/GoogleSignIn.tsx @@ -1,9 +1,8 @@ 'use client'; -import { useEffect, useCallback, useRef, useState } from 'react'; +import { useEffect, useCallback, useState } from 'react'; import Script from 'next/script'; import { createClient } from '@/lib/supabase/client'; -import { useTheme } from 'next-themes'; import { useAuthMethodTracking } from '@/lib/stores/auth-tracking'; import { FcGoogle } from "react-icons/fc"; import { Loader2 } from 'lucide-react'; @@ -16,10 +15,6 @@ declare global { accounts: { id: { initialize: (config: GoogleInitializeConfig) => void; - renderButton: ( - element: HTMLElement, - options: GoogleButtonOptions, - ) => void; prompt: ( callback?: (notification: GoogleNotification) => void, ) => void; @@ -45,16 +40,6 @@ interface GoogleInitializeConfig { itp_support?: boolean; } -interface GoogleButtonOptions { - type?: string; - theme?: string; - size?: string; - text?: string; - shape?: string; - logoAlignment?: string; - width?: number; -} - interface GoogleNotification { isNotDisplayed: () => boolean; getNotDisplayedReason: () => string; @@ -72,7 +57,6 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID; const [isLoading, setIsLoading] = useState(false); const [isGoogleLoaded, setIsGoogleLoaded] = useState(false); - const { resolvedTheme } = useTheme(); const { wasLastMethod, markAsUsed } = useAuthMethodTracking('google'); @@ -96,6 +80,7 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { 'Google sign in successful, preparing redirect to:', returnUrl || '/dashboard', ); + setTimeout(() => { console.log('Executing redirect now to:', returnUrl || '/dashboard'); window.location.href = returnUrl || '/dashboard'; @@ -109,20 +94,22 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { [returnUrl, markAsUsed], ); - const handleManualGoogleSignIn = useCallback(() => { + const handleCustomGoogleSignIn = useCallback(() => { if (isLoading) return; if (!window.google || !googleClientId || !isGoogleLoaded) { console.error('Google sign-in not properly initialized'); + toast.error('Google sign-in not ready. Please try again.'); return; } try { setIsLoading(true); + const timeoutId = setTimeout(() => { console.log('Google sign-in timeout - resetting loading state'); setIsLoading(false); - toast.error('Google sign-in failed. Please try again.'); + toast.error('Google sign-in popup failed to load. Please try again.'); }, 5000); window.google.accounts.id.prompt((notification) => { @@ -138,17 +125,17 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { setIsLoading(false); } }); - } catch (error) { - console.error('Error showing Google sign-in prompt:', error); - setIsLoading(false); - toast.error('Failed to start Google sign-in. Please try again.'); - } + } catch (error) { + console.error('Error showing Google sign-in prompt:', error); + setIsLoading(false); + toast.error('Failed to start Google sign-in. Please try again.'); + } }, [googleClientId, isGoogleLoaded, isLoading]); useEffect(() => { window.handleGoogleSignIn = handleGoogleSignIn; - if (window.google && googleClientId) { + if (window.google && googleClientId && !isGoogleLoaded) { window.google.accounts.id.initialize({ client_id: googleClientId, callback: handleGoogleSignIn, @@ -162,15 +149,15 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { return () => { delete window.handleGoogleSignIn; }; - }, [googleClientId, handleGoogleSignIn]); + }, [googleClientId, handleGoogleSignIn, isGoogleLoaded]); if (!googleClientId) { return ( ); @@ -188,25 +175,26 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { data-callback="handleGoogleSignIn" style={{ display: 'none' }} /> -