Fix google login issue by setting interval

IDinsight · Feb 4, 2025 · bfed58e · bfed58e
1 parent d109524
commit bfed58e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/admin_app/src/app/layout.tsx b/admin_app/src/app/layout.tsx
@@ -7,6 +7,9 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
 import { Suspense } from "react";
+import Script from "next/script";
+import Head from "next/head";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -16,17 +19,18 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en">
-      <head>
+      <Head>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
-        <script src="https://accounts.google.com/gsi/client" async></script>
-        <PublicEnvScript />
-      </head>
+      </Head>
+      {/* Load Google Identity Services before rendering components */}
       <body className={inter.className}>
+        <Script
+          src="https://accounts.google.com/gsi/client"
+          strategy="beforeInteractive"
+        />
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <Suspense>

diff --git a/admin_app/src/app/login/page.tsx b/admin_app/src/app/login/page.tsx
@@ -31,7 +31,7 @@ import { ConfirmationModal } from "@/app/user-management/components/Confirmation
 import { LoadingButton } from "@mui/lab";
 
 const NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID: string =
-  env("NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID") || "";
+  env("NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID") || "ddsd";
 
 const Login = () => {
   const [showRegisterModal, setShowRegisterModal] = React.useState(false);
@@ -43,6 +43,7 @@ const Login = () => {
   const [isLoading, setIsLoading] = React.useState(true);
   const { login, loginGoogle, loginError } = useAuth();
   const [recoveryCodes, setRecoveryCodes] = React.useState<string[]>([]);
+
   const iconStyles = {
     color: appColors.white,
     width: { xs: "30%", lg: "40%" },
@@ -68,22 +69,28 @@ const Login = () => {
       setShowAdminAlertModal(data.require_register);
       setIsLoading(false);
     };
+
     fetchRegisterPrompt();
+
     const handleCredentialResponse = (response: any) => {
       loginGoogle({
         client_id: response.client_id,
         credential: response.credential,
       });
     };
-    const initGoogleSignIn = () => {
-      if (window.google && NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID) {
+
+    const interval = setInterval(() => {
+      if (window.google && window.google.accounts) {
+        clearInterval(interval);
+
         window.google.accounts.id.initialize({
           client_id: NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID,
           callback: handleCredentialResponse,
           state_cookie_domain: "https://example.com",
         });
 
         const signinDiv = document.getElementById("signinDiv");
+
         if (signinDiv) {
           window.google.accounts.id.renderButton(signinDiv, {
             type: "standard",
@@ -94,16 +101,10 @@ const Login = () => {
           });
         }
       }
-    };
-    if (!window.google) {
-      const script = document.createElement("script");
-      script.src = "https://accounts.google.com/gsi/client";
-      script.onload = initGoogleSignIn;
-      document.body.appendChild(script);
-    } else {
-      initGoogleSignIn();
-    }
-  }, [NEXT_PUBLIC_GOOGLE_LOGIN_CLIENT_ID]);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
 
   useEffect(() => {
     if (recoveryCodes.length > 0) {