From 83a6ba41e66c4a946c0707211425075828816d46 Mon Sep 17 00:00:00 2001
From: Jacob Williams <jrw4561@gmail.com>
Date: Thu, 25 Jun 2026 14:37:33 -0400
Subject: [PATCH] Guard Google login and conditionally provide OAuth

Add an error boundary in src/components/folder-tree.tsx and wrap the Login component to avoid crashes if the Google auth widget errors at render time.
---
 src/components/folder-tree.tsx | 13 +++++++++++--
 src/main.tsx                   | 12 ++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/folder-tree.tsx b/src/components/folder-tree.tsx
index 5b4e3c8..b68dda4 100644
--- a/src/components/folder-tree.tsx
+++ b/src/components/folder-tree.tsx
@@ -1,7 +1,16 @@
 import { FolderItem } from '@/utils/types';
 import { Tree, NodeApi, NodeRendererProps } from 'react-arborist';
 import { RiArrowDownSFill, RiArrowRightSFill } from 'react-icons/ri';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, Component } from 'react';
+
+class GoogleAuthBoundary extends Component<{children: React.ReactNode}, {failed: boolean}> {
+    constructor(props: {children: React.ReactNode}) {
+        super(props);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() { return { failed: true }; }
+    render() { return this.state.failed ? null : this.props.children; }
+}
 import AppMgr, { EventType, LoginStatus } from '@/managers/appmgr';
 import useResizeObserver from 'use-resize-observer';
 import { FaRegFolder } from 'react-icons/fa';
@@ -714,7 +723,7 @@ function FolderTree(treeProps: TreeProps) {
         <div className="flex flex-col gap-1 h-full">
             {treeProps.isHeader && (
                 <div className='flex flex-col items-center p-1 gap-1 bg-mountain-mist-100 dark:bg-mountain-mist-950'>
-                    <Login onSuccess={onGoogleLoginSuccess} logoutCallback={onGoogleLogout}/>
+                    <GoogleAuthBoundary><Login onSuccess={onGoogleLoginSuccess} logoutCallback={onGoogleLogout}/></GoogleAuthBoundary>
                 </div>
             )}
             {treeProps.isHeader && (isConnected || isLogin) &&(
diff --git a/src/main.tsx b/src/main.tsx
index 6b6580d..b83286a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -22,13 +22,13 @@ function Root() {
                 setGoogleClientId(data.client_id);
             } catch (error) {
                 console.error('Error fetching Google Client ID:', error);
-                // Handle error appropriately, e.g., show an error message to the user
+                setGoogleClientId('');
             }
         };
         fetchClientId();
     }, []);
 
-    if (!googleClientId) {
+    if (googleClientId === null) {
         // Optionally render a loading spinner or message
         return <div>Loading Google authentication...</div>;
     }
@@ -36,9 +36,13 @@ function Root() {
     return (
         <StrictMode>
             <ThemeInit />
-            <GoogleOAuthProvider clientId={googleClientId}>
+            {googleClientId ? (
+                <GoogleOAuthProvider clientId={googleClientId}>
+                    <App />
+                </GoogleOAuthProvider>
+            ) : (
                 <App />
-            </GoogleOAuthProvider>
+            )}
         </StrictMode>
     );
 }