58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
|
|
import { auth } from '@/app/firebase/config';
|
|
interface GoogleSignInButtonProps {
|
|
onLoginSuccess?: (user: any) => void; // Callback function when login succeeds
|
|
}
|
|
|
|
const GoogleSignInButton: React.FC<GoogleSignInButtonProps> = ({ onLoginSuccess }) => {
|
|
const provider = new GoogleAuthProvider();
|
|
|
|
const handleGoogleSignIn = async () => {
|
|
try {
|
|
const result = await signInWithPopup(auth, provider);
|
|
const user = result.user;
|
|
console.log('Google Sign-In successful:', user);
|
|
if(onLoginSuccess){
|
|
onLoginSuccess(user);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Error during Google Sign-In:', error.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleGoogleSignIn}
|
|
className="w-full py-3 bg-blue-600 text-white rounded-md hover:bg-green-500 transition duration-300 flex items-center justify-center gap-2"
|
|
>
|
|
<svg
|
|
className="w-5 h-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 48 48"
|
|
>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M24 9.5c3.6 0 6.6 1.3 9 3.9l6.7-6.7C35.2 2.8 30.1 0 24 0 14.9 0 7.2 5.5 3.5 13.4l7.9 6.2C13.4 11.1 18.2 9.5 24 9.5z"
|
|
/>
|
|
<path
|
|
fill="#34A853"
|
|
d="M24 48c6.5 0 12-2.2 16-6l-7.5-6.1C30.9 38.2 27.6 39.5 24 39.5c-5.6 0-10.4-3.6-12.2-8.7l-8.1 6.3C7.2 42.7 14.6 48 24 48z"
|
|
/>
|
|
<path
|
|
fill="#4A90E2"
|
|
d="M48 24c0-1.6-.2-3.1-.5-4.6H24v9h13.7c-.6 3-2.2 5.5-4.5 7.3l7.5 6.1C45.6 37.4 48 31 48 24z"
|
|
/>
|
|
<path
|
|
fill="#FBBC05"
|
|
d="M11.8 30.8c-.6-1.7-1-3.5-1-5.5s.4-3.8 1-5.5l-8-6.3C1.8 16.2 0 20 0 24s1.8 7.8 4.7 10.7l7.1-3.9z"
|
|
/>
|
|
</svg>
|
|
Sign in with Google
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default GoogleSignInButton;
|