google sign in with oauth 2.0. no more console errors or warnings

frontend/src/components/AuthModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useAuth } from "../contexts/AuthContext";
 import PasswordStrengthMeter from "./PasswordStrengthMeter";
 
@@ -20,9 +20,8 @@ const AuthModal: React.FC<AuthModalProps> = ({
   const [lastName, setLastName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
-  const googleButtonRef = useRef<HTMLDivElement>(null);
 
-  const { login, register, googleLogin, updateUser } = useAuth();
+  const { login, register } = useAuth();
 
   // Update mode when modal is opened with different initialMode
   useEffect(() => {
@@ -31,43 +30,29 @@ const AuthModal: React.FC<AuthModalProps> = ({
     }
   }, [show, initialMode]);
 
-  // Initialize Google Sign-In
-  useEffect(() => {
-    if (show && window.google && process.env.REACT_APP_GOOGLE_CLIENT_ID) {
-      try {
-        window.google.accounts.id.initialize({
-          client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
-          callback: handleGoogleResponse,
-          auto_select: false,
-          cancel_on_tap_outside: false,
-        });
-      } catch (error) {
-        console.error("Error initializing Google Sign-In:", error);
-      }
-    }
-  }, [show]);
+  const resetModal = () => {
+    setError("");
+    setEmail("");
+    setPassword("");
+    setFirstName("");
+    setLastName("");
+  };
 
-  const handleGoogleResponse = async (response: any) => {
-    try {
-      setLoading(true);
-      setError("");
+  const handleGoogleLogin = () => {
+    const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+    const redirectUri = `${window.location.origin}/auth/google/callback`;
+    const scope = 'email profile';
+    const responseType = 'code';
 
-      if (!response?.credential) {
-        throw new Error("No credential received from Google");
-      }
+    const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
+      `client_id=${encodeURIComponent(clientId || '')}` +
+      `&redirect_uri=${encodeURIComponent(redirectUri)}` +
+      `&response_type=${responseType}` +
+      `&scope=${encodeURIComponent(scope)}` +
+      `&access_type=offline` +
+      `&prompt=consent`;
 
-      await googleLogin(response.credential);
-      onHide();
-      resetModal();
-    } catch (err: any) {
-      setError(
-        err.response?.data?.error ||
-          err.message ||
-          "Failed to sign in with Google"
-      );
-    } finally {
-      setLoading(false);
-    }
+    window.location.href = googleAuthUrl;
   };
 
   const handleEmailSubmit = async (e: React.FormEvent) => {
@@ -96,27 +81,6 @@ const AuthModal: React.FC<AuthModalProps> = ({
     }
   };
 
-  const handleSocialLogin = (provider: string) => {
-    if (provider === "google") {
-      if (window.google) {
-        try {
-          window.google.accounts.id.prompt();
-        } catch (error) {
-          setError("Failed to open Google Sign-In. Please try again.");
-        }
-      } else {
-        setError("Google Sign-In is not available. Please try again later.");
-      }
-    }
-  };
-
-  const resetModal = () => {
-    setError("");
-    setEmail("");
-    setPassword("");
-    setFirstName("");
-    setLastName("");
-  };
 
   if (!show) return null;
 
@@ -226,8 +190,9 @@ const AuthModal: React.FC<AuthModalProps> = ({
               {/* Social Login Options */}
               <button
                 className="btn btn-outline-dark w-100 mb-2 py-3 d-flex align-items-center justify-content-center"
-                onClick={() => handleSocialLogin("google")}
+                onClick={handleGoogleLogin}
                 disabled={loading}
+                type="button"
               >
                 <i className="bi bi-google me-2"></i>
                 Continue with Google