fix: check status of loading google oauth script (#313)

Author: lihebi

ui/public/index.html

@@ -18,7 +18,6 @@
     <script>
       window.GOOGLE_CLIENT_ID = "REPLACE_GOOGLE_CLIENT_ID";
     </script>
-    <script src="https://accounts.google.com/gsi/client" async defer></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

ui/src/pages/login.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 import Avatar from "@mui/material/Avatar";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -42,12 +42,68 @@ function Copyright(props: any) {
 
 const theme = createTheme();
 
+// useLoadGsiScript from
+// https://github.com/MomenSherif/react-oauth/blob/244d2b970d910af18a1bfdf2a74625834e087b40/packages/%40react-oauth/google/src/GoogleOAuthProvider.tsx
+interface UseLoadGsiScriptOptions {
+  /**
+   * Nonce applied to GSI script tag. Propagates to GSI's inline style tag
+   */
+  nonce?: string;
+  /**
+   * Callback fires on load [gsi](https://accounts.google.com/gsi/client) script success
+   */
+  onScriptLoadSuccess?: () => void;
+  /**
+   * Callback fires on load [gsi](https://accounts.google.com/gsi/client) script failure
+   */
+  onScriptLoadError?: () => void;
+}
+
+function useLoadGsiScript(options: UseLoadGsiScriptOptions = {}): boolean {
+  const { nonce, onScriptLoadSuccess, onScriptLoadError } = options;
+
+  const [scriptLoadedSuccessfully, setScriptLoadedSuccessfully] =
+    useState(false);
+
+  const onScriptLoadSuccessRef = useRef(onScriptLoadSuccess);
+  onScriptLoadSuccessRef.current = onScriptLoadSuccess;
+
+  const onScriptLoadErrorRef = useRef(onScriptLoadError);
+  onScriptLoadErrorRef.current = onScriptLoadError;
+
+  useEffect(() => {
+    const scriptTag = document.createElement("script");
+    scriptTag.src = "https://accounts.google.com/gsi/client";
+    scriptTag.async = true;
+    scriptTag.defer = true;
+    scriptTag.nonce = nonce;
+    scriptTag.onload = () => {
+      setScriptLoadedSuccessfully(true);
+      onScriptLoadSuccessRef.current?.();
+    };
+    scriptTag.onerror = () => {
+      setScriptLoadedSuccessfully(false);
+      onScriptLoadErrorRef.current?.();
+    };
+
+    document.body.appendChild(scriptTag);
+
+    return () => {
+      document.body.removeChild(scriptTag);
+    };
+  }, [nonce]);
+
+  return scriptLoadedSuccessfully;
+}
+
 declare var google: any;
 
 export function GoogleSignin() {
   const { handleGoogle } = useAuth();
+  const scriptLoadedSuccessfully = useLoadGsiScript();
 
   useEffect(() => {
+    if (!scriptLoadedSuccessfully) return;
     console.log("nodeenv", process.env.NODE_ENV);
     let client_id =
       process.env.NODE_ENV === "development"
@@ -62,7 +118,7 @@ export function GoogleSignin() {
       document.getElementById("googleLoginDiv"),
       { theme: "outline", size: "large" } // customization attributes
     );
-  }, [handleGoogle]);
+  }, [handleGoogle, scriptLoadedSuccessfully]);
   return <Box id="googleLoginDiv"></Box>;
 }