Add Google sign-in functionality to Login and Register pages, including error handling and UI updates for better user experience.

app/login/page.tsx

@@ -21,7 +21,7 @@ function MessageHandler({ setMessage }: { setMessage: (message: { type: string,
 
 export default function LoginPage() {
   const router = useRouter();
-  const { signIn, user } = useAuth();
+  const { signIn, signInWithGoogle, user } = useAuth();
   
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -67,6 +67,28 @@ export default function LoginPage() {
     }
   };
   
+  const handleGoogleSignIn = async () => {
+    try {
+      setIsLoading(true);
+      setMessage({ type: '', content: '' });
+      
+      const { error } = await signInWithGoogle();
+      
+      if (error) {
+        throw new Error(error.message);
+      }
+      
+      // Google OAuth will handle the redirect
+    } catch (error) {
+      console.error('Google login error:', error);
+      setMessage({ 
+        type: 'error', 
+        content: error instanceof Error ? error.message : 'Failed to sign in with Google' 
+      });
+      setIsLoading(false);
+    }
+  };
+  
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       {/* Wrap the component using useSearchParams in Suspense */}
@@ -101,7 +123,31 @@ export default function LoginPage() {
           </div>
         )}
         
-        <form onSubmit={handleEmailSignIn} className="mt-8 space-y-6">
+        {/* Google Sign In Button */}
+        <button
+          type="button"
+          onClick={handleGoogleSignIn}
+          disabled={isLoading}
+          className="w-full flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          <svg className="h-5 w-5 mr-2" viewBox="0 0 24 24" width="24" height="24">
+            <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+              <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
+              <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
+              <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
+              <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
+            </g>
+          </svg>
+          {isLoading ? 'Signing in...' : 'Sign in with Google'}
+        </button>
+        
+        <div className="mt-6 flex items-center justify-center">
+          <div className="border-t border-gray-300 flex-grow mr-3"></div>
+          <span className="text-sm text-gray-500">or</span>
+          <div className="border-t border-gray-300 flex-grow ml-3"></div>
+        </div>
+        
+        <form onSubmit={handleEmailSignIn} className="mt-6 space-y-6">
           <div>
             <label htmlFor="email" className="block text-sm font-medium text-gray-700">
               Email address
@@ -144,7 +190,7 @@ export default function LoginPage() {
               disabled={isLoading}
               className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
             >
-              {isLoading ? 'Signing in...' : 'Sign in'}
+              {isLoading ? 'Signing in...' : 'Sign in with Email'}
             </button>
           </div>
         </form>