104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
interface GoogleLoginProps {
|
|
onSuccess: (user: any, token: string) => void;
|
|
onError: (error: string) => void;
|
|
}
|
|
|
|
// Helper to decode JWT token
|
|
function parseJwt(token: string) {
|
|
try {
|
|
const base64Url = token.split('.')[1];
|
|
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
|
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
|
|
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
|
}).join(''));
|
|
return JSON.parse(jsonPayload);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface Window {
|
|
google: any;
|
|
}
|
|
}
|
|
|
|
const GoogleLogin: React.FC<GoogleLoginProps> = ({ onSuccess, onError }) => {
|
|
const buttonRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
// Initialize Google Sign-In
|
|
const initializeGoogleSignIn = () => {
|
|
if (!window.google) {
|
|
setTimeout(initializeGoogleSignIn, 100);
|
|
return;
|
|
}
|
|
|
|
window.google.accounts.id.initialize({
|
|
client_id: '308004695553-6k34bbq22frc4e76kejnkgq8mncepbbg.apps.googleusercontent.com',
|
|
callback: handleCredentialResponse,
|
|
auto_select: false,
|
|
cancel_on_tap_outside: true,
|
|
});
|
|
|
|
// Render the button
|
|
if (buttonRef.current) {
|
|
window.google.accounts.id.renderButton(
|
|
buttonRef.current,
|
|
{
|
|
theme: 'outline',
|
|
size: 'large',
|
|
text: 'signin_with',
|
|
shape: 'rectangular',
|
|
logo_alignment: 'center',
|
|
width: 300,
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleCredentialResponse = async (response: any) => {
|
|
try {
|
|
// Send the Google credential to our backend
|
|
const res = await fetch('/auth/google/verify', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ credential: response.credential }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
if (data.error === 'pending_approval') {
|
|
// User created but needs approval - still successful login
|
|
onSuccess(data.user, data.token);
|
|
} else {
|
|
throw new Error(data.error || 'Authentication failed');
|
|
}
|
|
} else {
|
|
onSuccess(data.user, data.token);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error during authentication:', error);
|
|
onError(error instanceof Error ? error.message : 'Failed to process authentication');
|
|
}
|
|
};
|
|
|
|
initializeGoogleSignIn();
|
|
}, [onSuccess, onError]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<div ref={buttonRef} className="google-signin-button"></div>
|
|
<p className="mt-4 text-sm text-gray-600">
|
|
Sign in with your Google account to continue
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GoogleLogin; |