fixed android google login

Author: Yuval

03-Client/android/app/capacitor.build.gradle

@@ -15,6 +15,7 @@ dependencies {
     implementation project(':capacitor-geolocation')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
+    implementation project(':capgo-capacitor-social-login')
 
 }
 

03-Client/android/app/src/main/res/values/strings.xml

@@ -4,4 +4,9 @@
     <string name="title_activity_main">GroundShare</string>
     <string name="package_name">com.groundshare.app</string>
     <string name="custom_url_scheme">com.groundshare.app</string>
+    <!-- Google Sign-In: this is the WEB client ID, not the Android one.
+         The Android OAuth client in Google Cloud Console only authorizes our
+         package + SHA-1; the token's audience must match the backend's
+         Google:ClientId (which is the Web client ID). See AuthController.cs. -->
+    <string name="server_client_id">82985006549-i2dn8m92d760lsdcsvj4sao19a4e46et.apps.googleusercontent.com</string>
 </resources>

03-Client/android/capacitor.settings.gradle

@@ -19,3 +19,6 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
 
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
+include ':capgo-capacitor-social-login'
+project(':capgo-capacitor-social-login').projectDir = new File('../node_modules/@capgo/capacitor-social-login/android')

03-Client/package-lock.json

@@ -23,6 +23,7 @@
     "@capacitor/ios": "^8.3.1",
     "@capacitor/splash-screen": "^8.0.1",
     "@capacitor/status-bar": "^8.0.2",
+    "@capgo/capacitor-social-login": "^8.3.17",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@mui/icons-material": "7.3.5",

03-Client/package.json

@@ -1,8 +1,16 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
+import { Capacitor } from "@capacitor/core";
+import { SocialLogin } from "@capgo/capacitor-social-login";
 import { useAuth } from "../../context/AuthContext";
 
-// Google OAuth client ID — safe to expose (public identifier, not a secret)
+// Google OAuth Web Client ID — safe to expose (public identifier, not a secret).
+// Used in both flows:
+//  - Web: passed to Google Identity Services `initialize({ client_id })`.
+//  - Native: passed as `webClientId` to the Capacitor plugin. The plugin
+//    asks Android's native Sign-In for an ID token whose `aud` equals this
+//    value, so our backend (which validates `aud` against Google:ClientId)
+//    accepts tokens from web AND native with zero backend changes.
 const GOOGLE_CLIENT_ID =
   "82985006549-i2dn8m92d760lsdcsvj4sao19a4e46et.apps.googleusercontent.com";
 
@@ -79,15 +87,30 @@ function loadGoogleScript(): Promise<void> {
     document.head.appendChild(script);
   });
 
-  // If it rejects, allow a later mount to try again rather than being
-  // permanently stuck on the cached rejection.
   gsiLoadPromise.catch(() => {
     gsiLoadPromise = null;
   });
 
   return gsiLoadPromise;
 }
 
+// Module-level guard so we only call SocialLogin.initialize() once per app
+// launch. The plugin throws if initialize is called twice.
+let nativeInitPromise: Promise<void> | null = null;
+
+function initNativeSocialLogin(): Promise<void> {
+  if (nativeInitPromise) return nativeInitPromise;
+  nativeInitPromise = SocialLogin.initialize({
+    google: {
+      webClientId: GOOGLE_CLIENT_ID,
+    },
+  });
+  nativeInitPromise.catch(() => {
+    nativeInitPromise = null;
+  });
+  return nativeInitPromise;
+}
+
 interface SocialLoginButtonsProps {
   label?: string;
   onSuccess?: () => void;
@@ -101,7 +124,44 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
   const [ready, setReady] = useState(false);
   const buttonHostRef = useRef<HTMLDivElement | null>(null);
 
+  const isNative = Capacitor.isNativePlatform();
+
+  async function handleGoogleSuccess(idToken: string) {
+    setLoading(true);
+    setError(null);
+    try {
+      await loginWithGoogle(idToken);
+      if (onSuccess) onSuccess();
+      else navigate("/main");
+    } catch (err: unknown) {
+      const msg = (err as { message?: string })?.message ?? "שגיאה בהתחברות עם Google";
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Native platforms: initialize the plugin once on mount, then show our
+  // branded button whose onClick triggers the native account picker.
   useEffect(() => {
+    if (!isNative) return;
+    let cancelled = false;
+    initNativeSocialLogin()
+      .then(() => {
+        if (!cancelled) setReady(true);
+      })
+      .catch(() => {
+        if (!cancelled) setError("לא ניתן לטעון את שירות Google");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isNative]);
+
+  // Web platform: load Google Identity Services and overlay the transparent
+  // Google-rendered button on top of our branded visual.
+  useEffect(() => {
+    if (isNative) return;
     let cancelled = false;
 
     loadGoogleScript()
@@ -116,18 +176,7 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
           client_id: GOOGLE_CLIENT_ID,
           callback: async (response: { credential: string }) => {
             if (!response?.credential) return;
-            setLoading(true);
-            setError(null);
-            try {
-              await loginWithGoogle(response.credential);
-              if (onSuccess) onSuccess();
-              else navigate("/main");
-            } catch (err: unknown) {
-              const msg = (err as { message?: string })?.message ?? "שגיאה בהתחברות עם Google";
-              setError(msg);
-            } finally {
-              setLoading(false);
-            }
+            await handleGoogleSuccess(response.credential);
           },
           use_fedcm_for_prompt: true,
           auto_select: false,
@@ -153,7 +202,37 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
     return () => {
       cancelled = true;
     };
-  }, [loginWithGoogle, navigate, onSuccess]);
+    // handleGoogleSuccess captures loginWithGoogle/navigate/onSuccess via closure;
+    // we intentionally only re-run when the platform type changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNative]);
+
+  async function handleNativeClick() {
+    if (!ready || loading) return;
+    setError(null);
+    try {
+      const res = await SocialLogin.login({
+        provider: "google",
+        options: {},
+      });
+      // Plugin response shape: { provider, result: { idToken, accessToken, profile, ... } }
+      const result = res as { result?: { idToken?: string } };
+      const idToken = result.result?.idToken;
+      if (!idToken) {
+        setError("לא התקבל טוקן מ-Google");
+        return;
+      }
+      await handleGoogleSuccess(idToken);
+    } catch (err: unknown) {
+      const msg = (err as { message?: string })?.message ?? "שגיאה בהתחברות עם Google";
+      // User-cancelled flows on Android throw with codes like "12501" or
+      // "canceled" — don't show a scary error for those.
+      if (/cancel/i.test(msg) || /12501/.test(msg)) {
+        return;
+      }
+      setError(msg);
+    }
+  }
 
   return (
     <div className="flex flex-col items-center gap-4">
@@ -162,41 +241,36 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
       </p>
       <div className="flex gap-3 justify-center">
         {/* Google — the only provider enabled right now.
-            Facebook and Apple are intentionally commented out until we add server-side verification for them.
-
-            Implementation note: Google Identity Services' `prompt()` call is unreliable
-            on modern browsers (FedCM, third-party cookie blockers, incognito). We use
-            `renderButton()` instead, then visually overlay our branded button on top of
-            the Google-rendered element so clicks fall through to Google's handler.
-            This is the pattern Google recommends and it works across browsers. */}
-        <div className="relative w-[60px] h-[44px]">
-          {/* Branded visual — pointer-events:none so clicks hit the Google button below */}
-          <div
-            aria-hidden="true"
-            className={`absolute inset-0 pointer-events-none bg-white border border-[#dadce0] rounded-[10px] flex items-center justify-center shadow-[0px_1px_3px_rgba(0,0,0,0.08)] ${
-              !ready || loading ? "opacity-60" : ""
-            }`}
+            Native: a regular <button> that calls the Capacitor plugin.
+            Web: branded visual + transparent Google-rendered button overlay. */}
+        {isNative ? (
+          <button
+            type="button"
+            onClick={handleNativeClick}
+            disabled={!ready || loading}
+            aria-label="התחברות עם Google"
+            className="bg-white border border-[#dadce0] hover:bg-[#f8f9fa] transition-colors w-[60px] h-[44px] rounded-[10px] flex items-center justify-center cursor-pointer shadow-[0px_1px_3px_rgba(0,0,0,0.08)] disabled:opacity-60"
           >
-            <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
-              <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
-              <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
-              <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
-              <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
-            </svg>
+            <GoogleLogo />
+          </button>
+        ) : (
+          <div className="relative w-[60px] h-[44px]">
+            <div
+              aria-hidden="true"
+              className={`absolute inset-0 pointer-events-none bg-white border border-[#dadce0] rounded-[10px] flex items-center justify-center shadow-[0px_1px_3px_rgba(0,0,0,0.08)] ${
+                !ready || loading ? "opacity-60" : ""
+              }`}
+            >
+              <GoogleLogo />
+            </div>
+            <div
+              ref={buttonHostRef}
+              aria-label="התחברות עם Google"
+              className="absolute inset-0 opacity-0"
+              style={{ colorScheme: "light" }}
+            />
           </div>
-          {/* Google-rendered clickable surface — transparent, sits on top, handles auth */}
-          <div
-            ref={buttonHostRef}
-            aria-label="התחברות עם Google"
-            className="absolute inset-0 opacity-0"
-            style={{ colorScheme: "light" }}
-          />
-        </div>
-
-        {/*
-        // Facebook — disabled until server-side Facebook token verification is added.
-        // Apple — disabled until server-side Apple token verification (JWKS + private key) is added.
-        */}
+        )}
       </div>
       {loading && (
         <p className="font-['Heebo',sans-serif] text-[#626262] text-[12px]">מתחבר עם Google...</p>
@@ -209,3 +283,14 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
     </div>
   );
 }
+
+function GoogleLogo() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
+      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+    </svg>
+  );
+}