@proveanything/smartlinks-auth-ui 0.1.10 → 0.1.13

package/dist/index.esm.js

@@ -10646,8 +10646,21 @@ class AuthAPI {
             accountData: data.accountData,
         });
     }
-    async loginWithGoogle(idToken) {
-        return smartlinks.authKit.googleLogin(this.clientId, idToken);
+    async loginWithGoogle(token, options) {
+        this.log.log('loginWithGoogle called:', {
+            tokenType: options?.tokenType || 'id_token',
+            hasUserInfo: !!options?.googleUserInfo,
+            userEmail: options?.googleUserInfo?.email,
+            tokenLength: token?.length,
+        });
+        // Note: The SDK only supports ID tokens currently
+        // Access tokens from popup flow may fail with "Invalid or expired Google token"
+        if (options?.tokenType === 'access_token') {
+            this.log.warn('Warning: Popup flow sends access_token, but backend expects id_token. This may fail.');
+            this.log.warn('Consider using OneTap flow (default) or updating backend to handle access tokens.');
+        }
+        // Pass token to SDK - backend verifies with Google
+        return smartlinks.authKit.googleLogin(this.clientId, token);
     }
     async sendPhoneCode(phoneNumber) {
         return smartlinks.authKit.sendPhoneCode(this.clientId, phoneNumber);
@@ -11204,7 +11217,7 @@ const tokenStorage = {
 };
 
 const AuthContext = createContext(undefined);
-const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccountInfo = false }) => {
+const AuthProvider = ({ children, proxyMode = false, accountCacheTTL = 5 * 60 * 1000, preloadAccountInfo = false }) => {
     const [user, setUser] = useState(null);
     const [token, setToken] = useState(null);
     const [accountData, setAccountData] = useState(null);
@@ -11228,10 +11241,45 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
             }
         });
     }, []);
-    // Initialize auth state from persistent storage
+    // Initialize auth state - different behavior for proxy mode vs standalone mode
     useEffect(() => {
         const initializeAuth = async () => {
             try {
+                if (proxyMode) {
+                    // PROXY MODE: Initialize from URL params and parent via SDK
+                    const params = new URLSearchParams(window.location.search);
+                    const userId = params.get('userId');
+                    if (userId) {
+                        console.log('[AuthContext] Proxy mode: userId detected, fetching account from parent');
+                        try {
+                            // Fetch account details from parent via proxied API call
+                            const accountResponse = await smartlinks.auth.getAccount();
+                            // Build user object from account response
+                            const accountAny = accountResponse;
+                            const userFromAccount = {
+                                uid: userId,
+                                email: accountAny?.email,
+                                displayName: accountAny?.displayName || accountAny?.name,
+                                phoneNumber: accountAny?.phoneNumber,
+                            };
+                            setUser(userFromAccount);
+                            setAccountData(accountResponse);
+                            setAccountInfo(accountResponse);
+                            console.log('[AuthContext] Proxy mode: initialized from parent account');
+                            notifyAuthStateChange('LOGIN', userFromAccount, null, accountResponse, accountResponse);
+                        }
+                        catch (error) {
+                            console.warn('[AuthContext] Proxy mode: failed to fetch account from parent:', error);
+                            // No session - that's ok, user may need to login
+                        }
+                    }
+                    else {
+                        console.log('[AuthContext] Proxy mode: no userId in URL, awaiting login');
+                    }
+                    setIsLoading(false);
+                    return;
+                }
+                // STANDALONE MODE: Load from persistent storage
                 const storedToken = await tokenStorage.getToken();
                 const storedUser = await tokenStorage.getUser();
                 const storedAccountData = await tokenStorage.getAccountData();
@@ -11258,9 +11306,49 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
             }
         };
         initializeAuth();
-    }, []);
-    // Cross-tab synchronization - listen for auth changes in other tabs
+    }, [proxyMode, notifyAuthStateChange]);
+    // Listen for parent auth state changes (proxy mode only)
+    useEffect(() => {
+        if (!proxyMode)
+            return;
+        console.log('[AuthContext] Proxy mode: setting up parent message listener');
+        const handleParentMessage = (event) => {
+            // Handle auth state pushed from parent
+            if (event.data?.type === 'smartlinks:authkit:state') {
+                const { user: parentUser, accountData: parentAccountData, authenticated } = event.data.payload || {};
+                console.log('[AuthContext] Proxy mode: received state from parent:', { authenticated });
+                if (authenticated && parentUser) {
+                    const userObj = {
+                        uid: parentUser.uid || parentUser.id,
+                        email: parentUser.email,
+                        displayName: parentUser.displayName || parentUser.name,
+                        phoneNumber: parentUser.phoneNumber,
+                    };
+                    setUser(userObj);
+                    setAccountData(parentAccountData || null);
+                    setAccountInfo(parentAccountData || null);
+                    notifyAuthStateChange('CROSS_TAB_SYNC', userObj, null, parentAccountData || null, parentAccountData || null);
+                }
+                else {
+                    // Parent indicates no session / logged out
+                    setUser(null);
+                    setToken(null);
+                    setAccountData(null);
+                    setAccountInfo(null);
+                    notifyAuthStateChange('LOGOUT', null, null, null, null);
+                }
+            }
+        };
+        window.addEventListener('message', handleParentMessage);
+        return () => {
+            console.log('[AuthContext] Proxy mode: cleaning up parent message listener');
+            window.removeEventListener('message', handleParentMessage);
+        };
+    }, [proxyMode, notifyAuthStateChange]);
+    // Cross-tab synchronization - standalone mode only
     useEffect(() => {
+        if (proxyMode)
+            return; // Skip cross-tab sync in proxy mode
         console.log('[AuthContext] Setting up cross-tab synchronization');
         const unsubscribe = onStorageChange(async (event) => {
             console.log('[AuthContext] Cross-tab storage event:', event.type, event.key);
@@ -11319,27 +11407,38 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
             console.log('[AuthContext] Cleaning up cross-tab synchronization');
             unsubscribe();
         };
-    }, [notifyAuthStateChange]);
+    }, [proxyMode, notifyAuthStateChange]);
     const login = useCallback(async (authToken, authUser, authAccountData) => {
         try {
-            // Store token, user, and account data
-            await tokenStorage.saveToken(authToken);
-            await tokenStorage.saveUser(authUser);
-            if (authAccountData) {
-                await tokenStorage.saveAccountData(authAccountData);
+            // Only persist to storage in standalone mode
+            if (!proxyMode) {
+                await tokenStorage.saveToken(authToken);
+                await tokenStorage.saveUser(authUser);
+                if (authAccountData) {
+                    await tokenStorage.saveAccountData(authAccountData);
+                }
+                // Set bearer token in global Smartlinks SDK via auth.verifyToken
+                smartlinks.auth.verifyToken(authToken).catch(err => {
+                    console.warn('Failed to set bearer token on login:', err);
+                });
             }
+            // Always update memory state
             setToken(authToken);
             setUser(authUser);
             setAccountData(authAccountData || null);
-            // Set bearer token in global Smartlinks SDK via auth.verifyToken
-            // This both validates the token and sets it for future API calls
-            smartlinks.auth.verifyToken(authToken).catch(err => {
-                console.warn('Failed to set bearer token on login:', err);
-            });
+            // Cross-iframe auth state synchronization
+            // Always notify parent frame of login (both modes, but especially important in proxy mode)
+            const sdk = smartlinks;
+            if (sdk.iframe?.isIframe?.()) {
+                sdk.iframe.sendParentCustom('smartlinks:authkit:login', {
+                    token: authToken,
+                    user: authUser,
+                    accountData: authAccountData || null
+                });
+            }
             notifyAuthStateChange('LOGIN', authUser, authToken, authAccountData || null);
-            // Optionally preload account info on login
-            if (preloadAccountInfo) {
-                // Preload after login completes (non-blocking)
+            // Optionally preload account info on login (standalone mode only)
+            if (!proxyMode && preloadAccountInfo) {
                 getAccount(true).catch(error => {
                     console.warn('[AuthContext] Failed to preload account info:', error);
                 });
@@ -11349,34 +11448,55 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
             console.error('Failed to save auth data to storage:', error);
             throw error;
         }
-    }, [notifyAuthStateChange, preloadAccountInfo]);
+    }, [proxyMode, notifyAuthStateChange, preloadAccountInfo]);
     const logout = useCallback(async () => {
         try {
-            // Clear persistent storage
-            await tokenStorage.clearAll();
+            // Only clear persistent storage in standalone mode
+            if (!proxyMode) {
+                await tokenStorage.clearAll();
+                smartlinks.auth.logout();
+            }
+            // Always clear memory state
             setToken(null);
             setUser(null);
             setAccountData(null);
             setAccountInfo(null);
-            // Clear bearer token from global Smartlinks SDK
-            smartlinks.auth.logout();
+            // Cross-iframe auth state synchronization
+            // Always notify parent frame of logout
+            const sdk = smartlinks;
+            if (sdk.iframe?.isIframe?.()) {
+                sdk.iframe.sendParentCustom('smartlinks:authkit:logout', {});
+            }
             notifyAuthStateChange('LOGOUT', null, null, null);
         }
         catch (error) {
             console.error('Failed to clear auth data from storage:', error);
         }
-    }, [notifyAuthStateChange]);
+    }, [proxyMode, notifyAuthStateChange]);
     const getToken = useCallback(async () => {
+        if (proxyMode) {
+            // In proxy mode, token is managed by parent - return memory state
+            return token;
+        }
         const storedToken = await tokenStorage.getToken();
         return storedToken ? storedToken.token : null;
-    }, []);
+    }, [proxyMode, token]);
     const refreshToken = useCallback(async () => {
         throw new Error('Token refresh must be implemented via your backend API');
     }, []);
-    // Get account with intelligent caching
+    // Get account with intelligent caching (or direct parent fetch in proxy mode)
     const getAccount = useCallback(async (forceRefresh = false) => {
         try {
-            // Check if user is authenticated
+            if (proxyMode) {
+                // PROXY MODE: Always fetch from parent via proxied API, no local cache
+                console.log('[AuthContext] Proxy mode: fetching account from parent');
+                const freshAccountInfo = await smartlinks.auth.getAccount();
+                setAccountInfo(freshAccountInfo);
+                setAccountData(freshAccountInfo);
+                notifyAuthStateChange('ACCOUNT_REFRESH', user, token, freshAccountInfo, freshAccountInfo);
+                return freshAccountInfo;
+            }
+            // STANDALONE MODE: Use caching
             if (!token) {
                 throw new Error('Not authenticated. Please login first.');
             }
@@ -11399,24 +11519,28 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
         }
         catch (error) {
             console.error('[AuthContext] Failed to get account info:', error);
-            // Fallback to stale cache if API fails
-            const cached = await tokenStorage.getAccountInfo();
-            if (cached) {
-                console.warn('[AuthContext] Returning stale cached data due to API error');
-                return cached.data;
+            // Fallback to stale cache if API fails (standalone mode only)
+            if (!proxyMode) {
+                const cached = await tokenStorage.getAccountInfo();
+                if (cached) {
+                    console.warn('[AuthContext] Returning stale cached data due to API error');
+                    return cached.data;
+                }
             }
             throw error;
         }
-    }, [token, accountCacheTTL, user, accountData, notifyAuthStateChange]);
+    }, [proxyMode, token, accountCacheTTL, user, accountData, notifyAuthStateChange]);
     // Convenience method for explicit refresh
     const refreshAccount = useCallback(async () => {
         return await getAccount(true);
     }, [getAccount]);
-    // Clear account cache
+    // Clear account cache (no-op in proxy mode)
     const clearAccountCache = useCallback(async () => {
-        await tokenStorage.clearAccountInfo();
+        if (!proxyMode) {
+            await tokenStorage.clearAccountInfo();
+        }
         setAccountInfo(null);
-    }, []);
+    }, [proxyMode]);
     const onAuthStateChange = useCallback((callback) => {
         callbacksRef.current.add(callback);
         // Return unsubscribe function
@@ -11429,8 +11553,9 @@ const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccoun
         token,
         accountData,
         accountInfo,
-        isAuthenticated: !!token && !!user,
+        isAuthenticated: !!user,
         isLoading,
+        proxyMode,
         login,
         logout,
         getToken,
@@ -11493,7 +11618,34 @@ const loadGoogleIdentityServices = () => {
         document.head.appendChild(script);
     });
 };
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, }) => {
+// Helper to convert generic SDK errors to user-friendly messages
+const getFriendlyErrorMessage = (errorMessage) => {
+    // Check for common HTTP status codes in the error message
+    if (errorMessage.includes('status 400')) {
+        return 'Invalid request. Please check your input and try again.';
+    }
+    if (errorMessage.includes('status 401')) {
+        return 'Invalid credentials. Please check your email and password.';
+    }
+    if (errorMessage.includes('status 403')) {
+        return 'Access denied. You do not have permission to perform this action.';
+    }
+    if (errorMessage.includes('status 404')) {
+        return 'Account not found. Please check your email or create a new account.';
+    }
+    if (errorMessage.includes('status 409')) {
+        return 'This email is already registered.';
+    }
+    if (errorMessage.includes('status 429')) {
+        return 'Too many attempts. Please wait a moment and try again.';
+    }
+    if (errorMessage.includes('status 500') || errorMessage.includes('status 502') || errorMessage.includes('status 503')) {
+        return 'Server error. Please try again later.';
+    }
+    // Return original message if no pattern matches
+    return errorMessage;
+};
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, }) => {
     const [mode, setMode] = useState(initialMode);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
@@ -11526,25 +11678,25 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         mediaQuery.addEventListener('change', updateTheme);
         return () => mediaQuery.removeEventListener('change', updateTheme);
     }, [theme]);
-    // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
+    // Reinitialize Smartlinks SDK when apiEndpoint or proxyMode changes
     // IMPORTANT: Preserve bearer token during reinitialization
     useEffect(() => {
-        log.log('SDK reinitialize useEffect triggered', { apiEndpoint });
+        log.log('SDK reinitialize useEffect triggered', { apiEndpoint, proxyMode });
         setSdkReady(false); // Mark SDK as not ready during reinitialization
         const reinitializeWithToken = async () => {
             if (apiEndpoint) {
-                log.log('Reinitializing SDK with baseURL:', apiEndpoint);
-                // Get current token before reinitializing
-                const currentToken = await auth.getToken();
+                log.log('Reinitializing SDK with baseURL:', apiEndpoint, 'proxyMode:', proxyMode);
+                // Get current token before reinitializing (only in standalone mode)
+                const currentToken = !proxyMode ? await auth.getToken() : null;
                 smartlinks.initializeApi({
                     baseURL: apiEndpoint,
-                    proxyMode: false, // Direct API calls when custom endpoint is provided
+                    proxyMode: proxyMode, // Use prop value
                     ngrokSkipBrowserWarning: true,
                     logger: logger, // Pass logger to SDK for verbose SDK logging
                 });
                 log.log('SDK reinitialized successfully');
-                // Restore bearer token after reinitialization using auth.verifyToken
-                if (currentToken) {
+                // Restore bearer token after reinitialization using auth.verifyToken (standalone mode only)
+                if (currentToken && !proxyMode) {
                     smartlinks.auth.verifyToken(currentToken).catch(err => {
                         log.warn('Failed to restore bearer token after reinit:', err);
                     });
@@ -11552,6 +11704,11 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 // Mark SDK as ready
                 setSdkReady(true);
             }
+            else if (proxyMode) {
+                // In proxy mode without custom endpoint, SDK should already be initialized by parent
+                log.log('Proxy mode without apiEndpoint, SDK already initialized by parent');
+                setSdkReady(true);
+            }
             else {
                 log.log('No apiEndpoint, SDK already initialized by App');
                 // SDK was initialized by App component, mark as ready
@@ -11559,7 +11716,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
         };
         reinitializeWithToken();
-    }, [apiEndpoint, auth, logger, log]);
+    }, [apiEndpoint, proxyMode, auth, logger, log]);
     // Get the effective redirect URL (use prop or default to current page)
     const getRedirectUrl = () => {
         if (redirectUrl)
@@ -11857,14 +12014,18 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
-            // Check if error is about email already registered
-            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
+            // Check if error is about email already registered (by content or 409 status code)
+            const isAlreadyRegistered = mode === 'register' && ((errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) ||
+                errorMessage.includes('status 409'));
+            if (isAlreadyRegistered) {
                 setShowResendVerification(true);
                 setResendEmail(data.email);
                 setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
             }
             else {
-                setError(errorMessage);
+                // Try to extract a more meaningful error message from status codes
+                const friendlyMessage = getFriendlyErrorMessage(errorMessage);
+                setError(friendlyMessage);
             }
             onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -11920,6 +12081,15 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
         // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
         const oauthFlow = config?.googleOAuthFlow || 'oneTap';
+        // Log Google Auth configuration for debugging
+        log.log('Google Auth initiated:', {
+            googleClientId,
+            oauthFlow,
+            currentOrigin: window.location.origin,
+            currentHref: window.location.href,
+            configGoogleClientId: config?.googleClientId,
+            usingDefaultClientId: !config?.googleClientId,
+        });
         setLoading(true);
         setError(undefined);
         try {
@@ -11929,35 +12099,87 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             if (!google?.accounts) {
                 throw new Error('Google Identity Services failed to initialize');
             }
+            log.log('Google Identity Services loaded, using flow:', oauthFlow);
             if (oauthFlow === 'popup') {
                 // Use OAuth2 popup flow (works in iframes but requires popup permission)
                 if (!google.accounts.oauth2) {
                     throw new Error('Google OAuth2 not available');
                 }
+                log.log('Initializing Google OAuth2 popup flow:', {
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    origin: window.location.origin,
+                });
                 const client = google.accounts.oauth2.initTokenClient({
                     client_id: googleClientId,
                     scope: 'openid email profile',
                     callback: async (response) => {
                         try {
+                            log.log('Google OAuth2 popup callback received:', {
+                                hasAccessToken: !!response.access_token,
+                                hasIdToken: !!response.id_token,
+                                tokenType: response.token_type,
+                                expiresIn: response.expires_in,
+                                scope: response.scope,
+                                error: response.error,
+                                errorDescription: response.error_description,
+                            });
                             if (response.error) {
                                 throw new Error(response.error_description || response.error);
                             }
+                            // OAuth2 popup flow returns access_token, not id_token
+                            // We need to use the access token to get user info from Google
                             const accessToken = response.access_token;
-                            // Send access token to backend
-                            const authResponse = await api.loginWithGoogle(accessToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            if (!accessToken) {
+                                throw new Error('No access token received from Google');
                             }
-                            else {
-                                throw new Error('Authentication failed - no token received');
+                            log.log('Fetching user info from Google using access token...');
+                            // Fetch user info from Google's userinfo endpoint
+                            const userInfoResponse = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+                                headers: {
+                                    'Authorization': `Bearer ${accessToken}`,
+                                },
+                            });
+                            if (!userInfoResponse.ok) {
+                                throw new Error('Failed to fetch user info from Google');
                             }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
+                            const userInfo = await userInfoResponse.json();
+                            log.log('Google user info retrieved:', {
+                                email: userInfo.email,
+                                name: userInfo.name,
+                                sub: userInfo.sub,
+                            });
+                            // For popup flow, send the access token to backend
+                            // Note: This may fail if backend only supports ID token verification
+                            try {
+                                const authResponse = await api.loginWithGoogle(accessToken, {
+                                    googleUserInfo: userInfo,
+                                    tokenType: 'access_token',
+                                });
+                                if (authResponse.token) {
+                                    auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                    setAuthSuccess(true);
+                                    setSuccessMessage('Google login successful!');
+                                    onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                                }
+                                else {
+                                    throw new Error('Authentication failed - no token received');
+                                }
+                                if (redirectUrl) {
+                                    setTimeout(() => {
+                                        window.location.href = redirectUrl;
+                                    }, 2000);
+                                }
+                            }
+                            catch (apiError) {
+                                const errorMessage = apiError instanceof Error ? apiError.message : 'Google login failed';
+                                // Check if this is the access token vs ID token mismatch
+                                if (errorMessage.includes('Invalid or expired Google token')) {
+                                    log.error('Popup flow access token rejected by backend. Backend may only support ID tokens.');
+                                    log.error('User info retrieved from Google:', userInfo);
+                                    throw new Error('Google authentication failed. The popup flow may not be supported. Please try again or contact support.');
+                                }
+                                throw apiError;
                             }
                             setLoading(false);
                         }
@@ -11973,6 +12195,10 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
             else {
                 // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                log.log('Initializing Google OneTap flow:', {
+                    client_id: googleClientId,
+                    origin: window.location.origin,
+                });
                 google.accounts.id.initialize({
                     client_id: googleClientId,
                     callback: async (response) => {
@@ -12004,11 +12230,18 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     },
                     auto_select: false,
                     cancel_on_tap_outside: true,
+                    // Note: use_fedcm_for_prompt omitted - requires Permissions-Policy header on hosting server
+                    // Will be needed when FedCM becomes mandatory in the future
                 });
-                google.accounts.id.prompt((notification) => {
-                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-                        setLoading(false);
-                    }
+                // Use timeout fallback instead of deprecated notification methods
+                // (isNotDisplayed/isSkippedMoment will stop working when FedCM becomes mandatory)
+                const promptTimeout = setTimeout(() => {
+                    setLoading(false);
+                }, 5000);
+                google.accounts.id.prompt(() => {
+                    // Clear timeout if prompt interaction occurs
+                    clearTimeout(promptTimeout);
+                    setLoading(false);
                 });
             }
         }