From 8cf4de1a02f3f5acead07495136577c1eb8b1ecb Mon Sep 17 00:00:00 2001 From: Saumya Date: Thu, 17 Jul 2025 13:05:31 +0530 Subject: [PATCH] fix google sign in --- frontend/src/components/GithubSignIn.tsx | 5 +-- frontend/src/components/GoogleSignIn.tsx | 42 +++++++++++++++++++----- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/GithubSignIn.tsx b/frontend/src/components/GithubSignIn.tsx index c4f3966d..2c91a098 100644 --- a/frontend/src/components/GithubSignIn.tsx +++ b/frontend/src/components/GithubSignIn.tsx @@ -6,6 +6,7 @@ import { toast } from 'sonner'; import { Icons } from './home/icons'; import { FaGithub } from "react-icons/fa"; import { useAuthMethodTracking } from '@/lib/stores/auth-tracking'; +import { Loader2 } from 'lucide-react'; interface GitHubSignInProps { returnUrl?: string; @@ -155,9 +156,9 @@ export default function GitHubSignIn({ returnUrl }: GitHubSignInProps) { type="button" > {isLoading ? ( -
+ ) : ( - + )} {isLoading ? 'Signing in...' : 'Continue with GitHub'} diff --git a/frontend/src/components/GoogleSignIn.tsx b/frontend/src/components/GoogleSignIn.tsx index dee547ce..5a92f544 100644 --- a/frontend/src/components/GoogleSignIn.tsx +++ b/frontend/src/components/GoogleSignIn.tsx @@ -6,6 +6,8 @@ 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'; +import { toast } from 'sonner'; declare global { interface Window { @@ -101,22 +103,47 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { } catch (error) { console.error('Error signing in with Google:', error); setIsLoading(false); + toast.error('Google sign-in failed. Please try again.'); } }, [returnUrl, markAsUsed], ); const handleManualGoogleSignIn = useCallback(() => { - if (window.google && googleClientId && isGoogleLoaded) { + if (isLoading) return; + + if (!window.google || !googleClientId || !isGoogleLoaded) { + console.error('Google sign-in not properly initialized'); + 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.'); + }, 5000); + window.google.accounts.id.prompt((notification) => { + clearTimeout(timeoutId); + if (notification.isNotDisplayed() || notification.isSkippedMoment()) { - console.log('Google sign-in was not displayed or skipped'); + console.log('Google sign-in was not displayed or skipped:', + notification.isNotDisplayed() ? notification.getNotDisplayedReason() : notification.getSkippedReason() + ); + setIsLoading(false); + } else if (notification.isDismissedMoment()) { + console.log('Google sign-in was dismissed:', notification.getDismissedReason()); setIsLoading(false); } }); - } - }, [googleClientId, isGoogleLoaded]); + } 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; @@ -134,9 +161,6 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { return () => { delete window.handleGoogleSignIn; - if (window.google) { - window.google.accounts.id.cancel(); - } }; }, [googleClientId, handleGoogleSignIn]); @@ -173,7 +197,7 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { > {isLoading ? ( <> -
+ Signing in... ) : ( @@ -194,7 +218,7 @@ export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { src="https://accounts.google.com/gsi/client" strategy="afterInteractive" onLoad={() => { - if (window.google && googleClientId) { + if (window.google && googleClientId && !isGoogleLoaded) { window.google.accounts.id.initialize({ client_id: googleClientId, callback: handleGoogleSignIn,