fix(auth): add dedicated GoogleAuthModal popup for reliable Google Sign-In
This commit is contained in:
Shanmuga Krishnan S M
125
src/components/Auth/GoogleAuthModal.tsx
Normal file
125
src/components/Auth/GoogleAuthModal.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { X, ShieldCheck, Sparkles } from 'lucide-react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
|
||||
interface GoogleAuthModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function GoogleAuthModal({ isOpen, onClose }: GoogleAuthModalProps) {
|
||||
const buttonRef = useRef<HTMLDivElement>(null);
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
// Close modal automatically if user gets authenticated
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && isOpen) {
|
||||
onClose();
|
||||
}
|
||||
}, [isAuthenticated, isOpen, onClose]);
|
||||
|
||||
// Render Google Button inside modal when open
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const renderGoogleBtn = () => {
|
||||
if (window.google && buttonRef.current) {
|
||||
buttonRef.current.innerHTML = '';
|
||||
window.google.accounts.id.renderButton(buttonRef.current, {
|
||||
type: 'standard',
|
||||
theme: 'outline',
|
||||
size: 'large',
|
||||
text: 'signin_with',
|
||||
shape: 'pill',
|
||||
logo_alignment: 'left',
|
||||
width: 280,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Render immediately if script is loaded
|
||||
renderGoogleBtn();
|
||||
|
||||
// Or poll briefly if script is loading
|
||||
const interval = setInterval(() => {
|
||||
if (window.google) {
|
||||
renderGoogleBtn();
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="absolute inset-0 bg-slate-950/70 backdrop-blur-md"
|
||||
/>
|
||||
|
||||
{/* Modal Container */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
transition={{ type: 'spring', bounce: 0.2, duration: 0.3 }}
|
||||
className="relative w-full max-w-md bg-slate-900 border border-slate-700/80 rounded-3xl shadow-2xl p-8 z-10 text-center overflow-hidden"
|
||||
>
|
||||
{/* Background Orbs */}
|
||||
<div className="absolute -top-20 -right-20 w-40 h-40 bg-orange-500/20 rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="absolute -bottom-20 -left-20 w-40 h-40 bg-blue-500/20 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 p-2 rounded-full hover:bg-slate-800 text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{/* Icon Header */}
|
||||
<div className="w-16 h-16 rounded-2xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mx-auto mb-5">
|
||||
<Sparkles className="w-8 h-8 text-[#F97316]" />
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<h2
|
||||
className="text-2xl font-bold text-white mb-2"
|
||||
style={{ fontFamily: 'Poppins, sans-serif' }}
|
||||
>
|
||||
Sign In to Freshers Hub
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className="text-xs text-slate-300 mb-6 leading-relaxed"
|
||||
style={{ fontFamily: 'Inter, sans-serif' }}
|
||||
>
|
||||
Sign in with your Google account. Use your{' '}
|
||||
<strong className="text-[#F97316]">@ritchennai.edu.in</strong> college email to unlock the{' '}
|
||||
<strong className="text-emerald-400">Verified Student</strong> badge and post collaboration requests!
|
||||
</p>
|
||||
|
||||
{/* Google Sign-In Button Container */}
|
||||
<div className="flex justify-center my-6 min-h-[44px]">
|
||||
<div ref={buttonRef} />
|
||||
</div>
|
||||
|
||||
{/* Verified Student Callout */}
|
||||
<div className="mt-6 pt-4 border-t border-slate-800/80 flex items-center justify-center gap-2 text-[11px] text-slate-400">
|
||||
<ShieldCheck className="w-4 h-4 text-emerald-400 shrink-0" />
|
||||
<span>Official RIT Student Verification via Google</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createContext, useContext, useState, useEffect, useCallback } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { getBackendUrl } from '@/lib/utils';
|
||||
import GoogleAuthModal from '@/components/Auth/GoogleAuthModal';
|
||||
|
||||
// ──────────────────────────────────────────────────
|
||||
// Types
|
||||
@@ -19,7 +20,10 @@ interface AuthContextType {
|
||||
isAuthenticated: boolean;
|
||||
isVerifiedStudent: boolean;
|
||||
isLoading: boolean;
|
||||
isAuthModalOpen: boolean;
|
||||
loginWithGoogle: () => void;
|
||||
openAuthModal: () => void;
|
||||
closeAuthModal: () => void;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
@@ -27,10 +31,9 @@ interface AuthContextType {
|
||||
// Google Client ID
|
||||
// ──────────────────────────────────────────────────
|
||||
|
||||
// IMPORTANT: Replace this with your actual Google Cloud Console OAuth2 Client ID
|
||||
// Create one at: https://console.cloud.google.com/apis/credentials
|
||||
// Authorized origins: https://rit-services.in, http://localhost:5173
|
||||
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || '';
|
||||
const GOOGLE_CLIENT_ID =
|
||||
import.meta.env.VITE_GOOGLE_CLIENT_ID ||
|
||||
'81935488244-vmab5t8fipfof1n6l7di7eg4fve6k8lf.apps.googleusercontent.com';
|
||||
|
||||
// ──────────────────────────────────────────────────
|
||||
// Context
|
||||
@@ -41,7 +44,10 @@ const AuthContext = createContext<AuthContextType>({
|
||||
isAuthenticated: false,
|
||||
isVerifiedStudent: false,
|
||||
isLoading: true,
|
||||
isAuthModalOpen: false,
|
||||
loginWithGoogle: () => {},
|
||||
openAuthModal: () => {},
|
||||
closeAuthModal: () => {},
|
||||
logout: () => {},
|
||||
});
|
||||
|
||||
@@ -75,6 +81,10 @@ const STORAGE_KEY = 'rit_auth_user';
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
||||
|
||||
const openAuthModal = useCallback(() => setIsAuthModalOpen(true), []);
|
||||
const closeAuthModal = useCallback(() => setIsAuthModalOpen(false), []);
|
||||
|
||||
// Handle the credential response from Google GSI
|
||||
const handleCredentialResponse = useCallback(async (response: { credential: string }) => {
|
||||
@@ -93,6 +103,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const userData: AuthUser = await res.json();
|
||||
setUser(userData);
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
|
||||
setIsAuthModalOpen(false);
|
||||
} catch (err) {
|
||||
console.error('Google auth error:', err);
|
||||
}
|
||||
@@ -109,17 +120,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
// Validate session is still valid against backend
|
||||
fetch(getBackendUrl(`/api/auth/me?email=${encodeURIComponent(parsed.email)}`))
|
||||
.then(res => {
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
// Session expired, clear it
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
setUser(null);
|
||||
} else {
|
||||
// Update with fresh data
|
||||
return res.json();
|
||||
}
|
||||
})
|
||||
.then(freshData => {
|
||||
.then((freshData) => {
|
||||
if (freshData) {
|
||||
setUser(freshData);
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(freshData));
|
||||
@@ -146,7 +155,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
});
|
||||
};
|
||||
|
||||
// The GSI script may not have loaded yet (async), so poll briefly
|
||||
if (window.google) {
|
||||
initGSI();
|
||||
} else {
|
||||
@@ -156,57 +164,33 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
initGSI();
|
||||
}
|
||||
}, 200);
|
||||
// Stop polling after 10 seconds
|
||||
setTimeout(() => clearInterval(interval), 10000);
|
||||
}
|
||||
}, [handleCredentialResponse]);
|
||||
|
||||
const loginWithGoogle = useCallback(() => {
|
||||
if (!GOOGLE_CLIENT_ID) {
|
||||
console.warn('Google Client ID not configured. Set VITE_GOOGLE_CLIENT_ID in .env');
|
||||
return;
|
||||
}
|
||||
// Open the clean Google Sign-In modal directly
|
||||
setIsAuthModalOpen(true);
|
||||
|
||||
// Also trigger One Tap prompt as a secondary background hint if supported
|
||||
if (window.google) {
|
||||
// Trigger the One Tap prompt
|
||||
window.google.accounts.id.prompt((notification) => {
|
||||
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
|
||||
// If One Tap doesn't show (e.g. blocked by browser), fall back to button-based flow
|
||||
// Render a temporary popup button
|
||||
const popup = document.createElement('div');
|
||||
popup.id = 'google-signin-popup';
|
||||
popup.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;background:white;padding:32px;border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);';
|
||||
document.body.appendChild(popup);
|
||||
|
||||
window.google!.accounts.id.renderButton(popup, {
|
||||
theme: 'outline',
|
||||
size: 'large',
|
||||
text: 'signin_with',
|
||||
shape: 'pill',
|
||||
width: 300,
|
||||
});
|
||||
|
||||
// Remove after 30s or when clicked
|
||||
setTimeout(() => popup.remove(), 30000);
|
||||
const observer = new MutationObserver(() => {
|
||||
if (!document.getElementById('google-signin-popup')) {
|
||||
observer.disconnect();
|
||||
try {
|
||||
window.google.accounts.id.prompt();
|
||||
} catch {
|
||||
// Silently ignore if browser blocks One Tap
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, { childList: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
if (user?.email && window.google) {
|
||||
window.google.accounts.id.revoke(user.email, () => {
|
||||
console.log('Google session revoked');
|
||||
});
|
||||
try {
|
||||
window.google.accounts.id.revoke(user.email, () => {});
|
||||
} catch {}
|
||||
}
|
||||
setUser(null);
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
setIsAuthModalOpen(false);
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
@@ -216,11 +200,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
isAuthenticated: !!user,
|
||||
isVerifiedStudent: !!user?.verifiedStudent,
|
||||
isLoading,
|
||||
isAuthModalOpen,
|
||||
loginWithGoogle,
|
||||
openAuthModal,
|
||||
closeAuthModal,
|
||||
logout,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<GoogleAuthModal isOpen={isAuthModalOpen} onClose={closeAuthModal} />
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user