From c05ec3e61b966d4ff5b3e74c3ce3bec130b8fe41 Mon Sep 17 00:00:00 2001 From: Krishav Raj Singh Date: Thu, 24 Jul 2025 23:42:11 +0530 Subject: [PATCH] removes one tap login --- frontend/src/components/GoogleSignIn.tsx | 214 +++-------------------- 1 file changed, 26 insertions(+), 188 deletions(-) diff --git a/frontend/src/components/GoogleSignIn.tsx b/frontend/src/components/GoogleSignIn.tsx index a4692010..e4d64dee 100644 --- a/frontend/src/components/GoogleSignIn.tsx +++ b/frontend/src/components/GoogleSignIn.tsx @@ -1,220 +1,58 @@ 'use client'; -import { useEffect, useState } from 'react'; -import Script from 'next/script'; +import { useState } from 'react'; import { createClient } from '@/lib/supabase/client'; -import { useAuthMethodTracking } from '@/lib/stores/auth-tracking'; import { toast } from 'sonner'; import { FcGoogle } from "react-icons/fc"; import { Loader2 } from 'lucide-react'; -declare global { - interface Window { - google?: { - accounts: { - id: { - initialize: (config: any) => void; - renderButton: (element: HTMLElement, config: any) => void; - prompt: (notification?: (notification: any) => void) => void; - }; - }; - }; - } -} - interface GoogleSignInProps { returnUrl?: string; } export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) { const [isLoading, setIsLoading] = useState(false); - const [isGoogleLoaded, setIsGoogleLoaded] = useState(false); - const { wasLastMethod, markAsUsed } = useAuthMethodTracking('google'); const supabase = createClient(); - const handleGoogleResponse = async (response: any) => { + const handleGoogleSignIn = async () => { try { setIsLoading(true); - markAsUsed(); - - const { data, error } = await supabase.auth.signInWithIdToken({ + console.log('returnUrl', returnUrl); + + const { error } = await supabase.auth.signInWithOAuth({ provider: 'google', - token: response.credential, + options: { + redirectTo: `${window.location.origin}/auth/callback${ + returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : '' + }`, + }, }); if (error) { - const redirectTo = `${window.location.origin}/auth/callback${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`; - console.log('OAuth redirect URI:', redirectTo); - - const { error: oauthError } = await supabase.auth.signInWithOAuth({ - provider: 'google', - options: { - redirectTo, - }, - }); - - if (oauthError) { - throw oauthError; - } - } else { - window.location.href = returnUrl || '/dashboard'; + throw error; } } catch (error: any) { console.error('Google sign-in error:', error); - - if (error.message?.includes('redirect_uri_mismatch')) { - const redirectUri = `${window.location.origin}/auth/callback`; - toast.error( - `Google OAuth configuration error. Add this exact URL to your Google Cloud Console: ${redirectUri}`, - { duration: 10000 } - ); - } else { - toast.error(error.message || 'Failed to sign in with Google'); - } - + toast.error(error.message || 'Failed to sign in with Google'); setIsLoading(false); } }; - useEffect(() => { - const initializeGoogleSignIn = () => { - if (!window.google || !process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) return; - - window.google.accounts.id.initialize({ - client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, - callback: handleGoogleResponse, - auto_select: false, - cancel_on_tap_outside: false, - }); - - setIsGoogleLoaded(true); - }; - - if (window.google) { - initializeGoogleSignIn(); - } - }, [returnUrl, markAsUsed, supabase]); - - const handleScriptLoad = () => { - if (window.google && process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) { - window.google.accounts.id.initialize({ - client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, - callback: handleGoogleResponse, - auto_select: false, - cancel_on_tap_outside: false, - }); - - setIsGoogleLoaded(true); - } - }; - - const handleGoogleSignIn = () => { - if (!window.google || !isGoogleLoaded) { - toast.error('Google Sign-In is still loading. Please try again.'); - return; - } - - try { - window.google.accounts.id.prompt((notification: any) => { - if (notification.isNotDisplayed() || notification.isSkippedMoment()) { - console.log('One Tap not displayed, using OAuth flow'); - setIsLoading(true); - - const redirectTo = `${window.location.origin}/auth/callback${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`; - console.log('OAuth redirect URI:', redirectTo); - - supabase.auth.signInWithOAuth({ - provider: 'google', - options: { - redirectTo, - }, - }).then(({ error }) => { - if (error) { - console.error('OAuth error:', error); - - if (error.message?.includes('redirect_uri_mismatch')) { - const redirectUri = `${window.location.origin}/auth/callback`; - toast.error( - `Google OAuth configuration error. Add this exact URL to your Google Cloud Console: ${redirectUri}`, - { duration: 10000 } - ); - } else { - toast.error(error.message || 'Failed to sign in with Google'); - } - - setIsLoading(false); - } - }); - } - }); - } catch (error) { - console.error('Error triggering Google sign-in:', error); - setIsLoading(true); - - const redirectTo = `${window.location.origin}/auth/callback${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`; - supabase.auth.signInWithOAuth({ - provider: 'google', - options: { - redirectTo, - }, - }).then(({ error }) => { - if (error) { - console.error('OAuth error:', error); - - if (error.message?.includes('redirect_uri_mismatch')) { - const redirectUri = `${window.location.origin}/auth/callback`; - toast.error( - `Google OAuth configuration error. Add this exact URL to your Google Cloud Console: ${redirectUri}`, - { duration: 10000 } - ); - } else { - toast.error(error.message || 'Failed to sign in with Google'); - } - - setIsLoading(false); - } - }); - } - }; - - if (!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) { - return ( -
- Google Sign-In not configured -
- ); - } - return ( -
- - - {wasLastMethod && ( -
-
-
+