fix(SocialLoginButtons): improve Google Sign-In script loading and error handling

Author: Yuval

03-Client/src/app/components/shared/SocialLoginButtons.tsx

@@ -6,13 +6,27 @@ import { useAuth } from "../../context/AuthContext";
 const GOOGLE_CLIENT_ID =
   "82985006549-i2dn8m92d760lsdcsvj4sao19a4e46et.apps.googleusercontent.com";
 
-// Minimal type for Google Identity Services (loaded from script tag)
 interface GoogleAccountsId {
   initialize: (config: {
     client_id: string;
     callback: (response: { credential: string }) => void;
+    use_fedcm_for_prompt?: boolean;
+    auto_select?: boolean;
+    cancel_on_tap_outside?: boolean;
   }) => void;
   prompt: () => void;
+  renderButton: (
+    parent: HTMLElement,
+    options: {
+      type?: "standard" | "icon";
+      theme?: "outline" | "filled_blue" | "filled_black";
+      size?: "small" | "medium" | "large";
+      shape?: "rectangular" | "pill" | "circle" | "square";
+      text?: "signin_with" | "signup_with" | "continue_with" | "signin";
+      logo_alignment?: "left" | "center";
+      width?: number | string;
+    },
+  ) => void;
 }
 
 declare global {
@@ -27,15 +41,35 @@ declare global {
 
 const GSI_SRC = "https://accounts.google.com/gsi/client";
 
+// Single shared promise so multiple mounts / remounts do not append duplicate
+// <script> tags. Duplicates were the root cause of the "Failed to load Google
+// Sign-In script" error: each mount appended a new tag, and the onload/onerror
+// of the *second* tag never fired reliably in some browsers, leaving us in a
+// perpetual "loading" state that surfaced as the Hebrew error message.
+let gsiLoadPromise: Promise<void> | null = null;
+
 function loadGoogleScript(): Promise<void> {
-  return new Promise((resolve, reject) => {
-    if (document.querySelector(`script[src="${GSI_SRC}"]`)) {
-      // Already loaded or loading — wait a tick
-      if (window.google?.accounts?.id) {
-        resolve();
-        return;
-      }
+  if (gsiLoadPromise) return gsiLoadPromise;
+
+  gsiLoadPromise = new Promise<void>((resolve, reject) => {
+    if (window.google?.accounts?.id) {
+      resolve();
+      return;
+    }
+
+    const existing = document.querySelector<HTMLScriptElement>(
+      `script[src="${GSI_SRC}"]`,
+    );
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Failed to load Google Sign-In script")),
+        { once: true },
+      );
+      return;
     }
+
     const script = document.createElement("script");
     script.src = GSI_SRC;
     script.async = true;
@@ -44,6 +78,14 @@ function loadGoogleScript(): Promise<void> {
     script.onerror = () => reject(new Error("Failed to load Google Sign-In script"));
     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;
 }
 
 interface SocialLoginButtonsProps {
@@ -56,13 +98,19 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const initializedRef = useRef(false);
+  const [ready, setReady] = useState(false);
+  const buttonHostRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
+    let cancelled = false;
+
     loadGoogleScript()
       .then(() => {
-        if (initializedRef.current) return;
-        if (!window.google?.accounts?.id) return;
+        if (cancelled) return;
+        if (!window.google?.accounts?.id) {
+          setError("לא ניתן לטעון את שירות Google");
+          return;
+        }
 
         window.google.accounts.id.initialize({
           client_id: GOOGLE_CLIENT_ID,
@@ -81,20 +129,31 @@ export function SocialLoginButtons({ label = "התחברות באמצעות", on
               setLoading(false);
             }
           },
+          use_fedcm_for_prompt: true,
+          auto_select: false,
+          cancel_on_tap_outside: true,
         });
-        initializedRef.current = true;
+
+        if (buttonHostRef.current) {
+          buttonHostRef.current.innerHTML = "";
+          window.google.accounts.id.renderButton(buttonHostRef.current, {
+            type: "icon",
+            theme: "outline",
+            size: "large",
+            shape: "rectangular",
+          });
+        }
+
+        setReady(true);
       })
-      .catch(() => setError("לא ניתן לטעון את שירות Google"));
-  }, [loginWithGoogle, navigate, onSuccess]);
+      .catch(() => {
+        if (!cancelled) setError("לא ניתן לטעון את שירות Google");
+      });
 
-  const handleGoogleClick = () => {
-    if (!window.google?.accounts?.id) {
-      setError("שירות Google עדיין לא מוכן, נסו שוב");
-      return;
-    }
-    setError(null);
-    window.google.accounts.id.prompt();
-  };
+    return () => {
+      cancelled = true;
+    };
+  }, [loginWithGoogle, navigate, onSuccess]);
 
   return (
     <div className="flex flex-col items-center gap-4">
@@ -103,37 +162,40 @@ 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. */}
-        <button
-          type="button"
-          onClick={handleGoogleClick}
-          disabled={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"
-        >
-          {/* Official Google 'G' mark */}
-          <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>
-        </button>
+            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" : ""
+            }`}
+          >
+            <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>
+          </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.
-        <button className="bg-[#ececec] w-[60px] h-[44px] rounded-[10px] flex items-center justify-center cursor-pointer">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d={svgPaths.pb8cc300} fill="black" />
-          </svg>
-        </button>
-
         // Apple — disabled until server-side Apple token verification (JWKS + private key) is added.
-        <button className="bg-[#ececec] w-[60px] h-[44px] rounded-[10px] flex items-center justify-center cursor-pointer">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d={svgPaths.p1a1f100} fill="black" />
-          </svg>
-        </button>
         */}
       </div>
       {loading && (