load user only when needed

Author: Jawnnypoo

src/App.tsx

@@ -6,11 +6,10 @@ import Terms from './pages/Terms';
 import Privacy from './pages/Privacy';
 import LearnMore from './pages/LearnMore';
 import Pricing from './pages/Pricing';
-import {AuthProvider, useAuth} from './contexts/AuthContext';
+import {AuthProvider} from './contexts/AuthContext';
 
 const AppContent: React.FC = () => {
     const [currentPage, setCurrentPage] = useState('welcome');
-    const {user, isLoading} = useAuth();
 
     useEffect(() => {
         const handleHashChange = () => {
@@ -42,92 +41,7 @@ const AppContent: React.FC = () => {
         };
     }, []);
 
-    // Show loading while checking auth state
-    if (isLoading) {
-        return (
-            <div style={{
-                minHeight: '100vh',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: '#111827',
-                padding: '20px',
-                fontFamily: '"Fira Code", "JetBrains Mono", "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace'
-            }}>
-                <div style={{
-                    background: '#1f2937',
-                    border: '1px solid #374151',
-                    borderRadius: '16px',
-                    boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
-                    padding: '48px 40px',
-                    textAlign: 'center',
-                    maxWidth: '400px',
-                    width: '100%'
-                }}>
-                    <div style={{
-                        width: '48px',
-                        height: '48px',
-                        margin: '0 auto 24px',
-                        background: '#ff6b35',
-                        borderRadius: '8px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontSize: '24px',
-                        color: 'white',
-                        fontWeight: 'bold'
-                    }}>
-                        S
-                    </div>
-                    <h1 style={{
-                        fontSize: '24px',
-                        fontWeight: '600',
-                        color: '#f9fafb',
-                        margin: '0 0 8px 0'
-                    }}>
-                        Salamander
-                    </h1>
-                    <p style={{
-                        fontSize: '14px',
-                        color: '#d1d5db',
-                        margin: '0 0 32px 0',
-                        fontWeight: '500'
-                    }}>
-                        Never be AFK
-                    </p>
-                    <div style={{
-                        width: '32px',
-                        height: '32px',
-                        border: '3px solid #374151',
-                        borderTop: '3px solid #ff6b35',
-                        borderRadius: '50%',
-                        animation: 'spin 1s linear infinite',
-                        margin: '0 auto'
-                    }}></div>
-                </div>
-            </div>
-        );
-    }
-
-    // If user is logged in and trying to access auth page, redirect to account
-    // UNLESS there's a callback/redirect_url parameter (CLI auth flow)
-    if (user && currentPage === 'auth') {
-        // Parse URL parameters from the hash (e.g., #auth?callback=...)
-        const hashParts = window.location.hash.split('?');
-        const urlParams = new URLSearchParams(hashParts[1] || '');
-        const hasCallback = urlParams.get('callback') || urlParams.get('redirect_url');
-
-        if (!hasCallback) {
-            window.location.hash = 'account';
-            return null;
-        }
-    }
-
-    // If user is not logged in and trying to access account page, redirect to welcome
-    if (!user && currentPage === 'account') {
-        window.location.hash = 'welcome';
-        return null;
-    }
+    // No global auth checks - let individual pages handle their own auth requirements
 
     if (currentPage === 'auth') {
         return <Auth/>;

src/contexts/AuthContext.tsx

@@ -1,11 +1,12 @@
-import React, {createContext, ReactNode, useCallback, useContext, useEffect, useState} from 'react';
-import {GoogleAuthProvider, OAuthProvider, signInWithCredential, signInWithPopup, onAuthStateChanged} from 'firebase/auth';
+import React, {createContext, ReactNode, useCallback, useContext, useState} from 'react';
+import {GoogleAuthProvider, OAuthProvider, signInWithCredential, signInWithPopup} from 'firebase/auth';
 import {auth} from '../config/firebase';
 import {getUserFromFirestore, User} from '../services/userService';
 
 interface AuthContextType {
     user: User | null;
     isLoading: boolean;
+    loadUserState: () => Promise<void>;
     login: (credential: string, provider?: 'google' | 'apple') => Promise<void>;
     loginWithApple: () => Promise<void>;
     logout: () => void;
@@ -21,36 +22,32 @@ interface AuthProviderProps {
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({children}) => {
     const [user, setUser] = useState<User | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-        // Listen to Firebase auth state changes
-        const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
-            if (firebaseUser) {
-                // User is signed in, fetch their profile data
-                try {
-                    const userData = await getUserFromFirestore(firebaseUser.uid);
-                    const appUser: User = {
-                        id: userData.id,
-                        displayName: userData.displayName,
-                        email: userData.email,
-                        plan: userData.plan,
-                        messagesRemaining: userData.messagesRemaining,
-                    };
-                    setUser(appUser);
-                } catch (error) {
-                    console.error('Error fetching user data:', error);
-                    setUser(null);
-                }
-            } else {
-                // User is signed out
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Function to manually load user state when needed
+    const loadUserState = useCallback(async () => {
+        setIsLoading(true);
+        const firebaseUser = auth.currentUser;
+
+        if (firebaseUser) {
+            try {
+                const userData = await getUserFromFirestore(firebaseUser.uid);
+                const appUser: User = {
+                    id: userData.id,
+                    displayName: userData.displayName,
+                    email: userData.email,
+                    plan: userData.plan,
+                    messagesRemaining: userData.messagesRemaining,
+                };
+                setUser(appUser);
+            } catch (error) {
+                console.error('Error fetching user data:', error);
                 setUser(null);
             }
-            setIsLoading(false);
-        });
-
-        // Cleanup subscription on unmount
-        return () => unsubscribe();
+        } else {
+            setUser(null);
+        }
+        setIsLoading(false);
     }, []);
 
     const login = async (credential: string, provider: 'google' | 'apple' = 'google'): Promise<void> => {
@@ -154,6 +151,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({children}) => {
     const value: AuthContextType = {
         user,
         isLoading,
+        loadUserState,
         login,
         loginWithApple,
         logout,

src/pages/Account/Account.tsx

@@ -7,7 +7,12 @@ import {getPlansFromFirestore, getRunnersFromFirestore, Plan, Runner} from '../.
 import {ApiError, RunnerApiService} from '../../services/apiService';
 
 const Account: React.FC = () => {
-    const {user, logout, refreshUserData} = useAuth();
+    const {user, logout, refreshUserData, loadUserState, isLoading} = useAuth();
+
+    useEffect(() => {
+        // Load user state when Account page mounts
+        loadUserState();
+    }, [loadUserState]);
     const [plans, setPlans] = useState<Plan[]>([]);
     const [isLoadingPlans, setIsLoadingPlans] = useState(true);
     const [runners, setRunners] = useState<Runner[]>([]);
@@ -147,8 +152,31 @@ const Account: React.FC = () => {
     };
 
 
+    // If no user after loading, redirect to auth
+    if (!user && !isLoading) {
+        window.location.hash = 'auth';
+        return null;
+    }
+
+    // Still loading user state
     if (!user) {
-        return null; // This should not happen since App component handles redirects
+        return (
+            <div className="account-container">
+                <Header isSubpage={true}/>
+                <div className="account-content" style={{paddingTop: '6rem', textAlign: 'center'}}>
+                    <div style={{
+                        width: '32px',
+                        height: '32px',
+                        border: '3px solid #374151',
+                        borderTop: '3px solid #ff6b35',
+                        borderRadius: '50%',
+                        animation: 'spin 1s linear infinite',
+                        margin: '0 auto 16px'
+                    }}></div>
+                    <p style={{ color: '#d1d5db' }}>Loading your account...</p>
+                </div>
+            </div>
+        );
     }
 
     if (isLoadingPlans || isLoadingRunners) {

src/pages/Auth/Auth.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import './Auth.css';
 import {useAuth} from '../../contexts/AuthContext';
 import {auth} from '../../config/firebase';
+import {User as FirebaseUser} from 'firebase/auth';
 
 const CLIENT_ID = '87955960620-dv9h8pfv4a97mno598dcc3m1nlt0h6u4.apps.googleusercontent.com';
 
@@ -22,17 +23,38 @@ declare global {
 
 const Auth: React.FC = () => {
     const [isGoogleLoaded, setIsGoogleLoaded] = useState(false);
-    const {user, login, loginWithApple} = useAuth();
+    const {login, loginWithApple} = useAuth();
     const [isGenerating, setIsGenerating] = useState(false);
     const [isRedirecting, setIsRedirecting] = useState(false);
+    const [firebaseUser, setFirebaseUser] = useState<FirebaseUser | null>(null);
+    const [checkingAuth, setCheckingAuth] = useState(true);
 
     // Get redirect URL from URL params (for CLI integration)
     // Parse URL parameters from the hash (e.g., #auth?callback=...)
     const hashParts = window.location.hash.split('?');
     const urlParams = new URLSearchParams(hashParts[1] || '');
     const redirectUrl = urlParams.get('redirect_url') || urlParams.get('callback');
 
-    const generateTokenAndRedirect = async () => {
+    // Check Firebase auth state on mount
+    useEffect(() => {
+        const unsubscribe = auth.onAuthStateChanged((user) => {
+            setFirebaseUser(user);
+            setCheckingAuth(false);
+
+            // If user is signed in and we have a callback URL, generate token and redirect
+            if (user && redirectUrl) {
+                generateTokenAndRedirect(user);
+            } else if (user && !redirectUrl) {
+                // Normal web flow - redirect to account
+                window.location.hash = 'account';
+            }
+        });
+
+        return () => unsubscribe();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [redirectUrl]);
+
+    const generateTokenAndRedirect = async (user: FirebaseUser) => {
         if (!redirectUrl || !user) return;
 
         setIsGenerating(true);
@@ -72,29 +94,19 @@ const Auth: React.FC = () => {
         }
     };
 
-    useEffect(() => {
-        // If user is signed in and we have a redirect URL, generate token and redirect
-        if (user && redirectUrl && !isGenerating && !isRedirecting) {
-            generateTokenAndRedirect();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [user, redirectUrl, isGenerating, isRedirecting]);
+    // This useEffect is no longer needed as we handle auth state in the onAuthStateChanged above
 
     const handleCredentialResponse = useCallback(async (response: any) => {
         console.log('Encoded JWT ID token: ' + response.credential);
 
         try {
             await login(response.credential);
-            // If we have a redirect URL, the useEffect will handle the redirect
-            if (!redirectUrl) {
-                // Redirect to account page after successful login
-                window.location.hash = 'account';
-            }
+            // Auth state change will handle the redirect automatically
         } catch (error) {
             console.error('Failed to process login:', error);
             alert(error instanceof Error ? error.message : 'Sign-in failed. Please try again.');
         }
-    }, [login, redirectUrl]);
+    }, [login]);
 
     useEffect(() => {
         const initializeGoogle = () => {
@@ -131,19 +143,15 @@ const Auth: React.FC = () => {
     const handleAppleAuth = async () => {
         try {
             await loginWithApple();
-            // If we have a redirect URL, the useEffect will handle the redirect
-            if (!redirectUrl) {
-                // Redirect to account page after successful login
-                window.location.hash = 'account';
-            }
+            // Auth state change will handle the redirect automatically
         } catch (error) {
             console.error('Apple sign-in failed:', error);
             alert(error instanceof Error ? error.message : 'Apple sign-in failed. Please try again.');
         }
     };
 
-    // Show loading state if generating token or redirecting
-    if (isGenerating || isRedirecting) {
+    // Show loading state if checking auth, generating token, or redirecting
+    if (checkingAuth || isGenerating || isRedirecting) {
         return (
             <div className="auth-container">
                 <div className="auth-card">
@@ -164,7 +172,7 @@ const Auth: React.FC = () => {
                             margin: '0 auto 16px'
                         }}></div>
                         <p style={{ color: '#d1d5db', fontSize: '14px' }}>
-                            {isRedirecting ? 'Redirecting to CLI...' : 'Generating authentication token...'}
+                            {isRedirecting ? 'Redirecting to CLI...' : isGenerating ? 'Generating authentication token...' : 'Loading...'}
                         </p>
                         {isRedirecting && (
                             <p style={{ color: '#9ca3af', fontSize: '12px', marginTop: '16px', fontStyle: 'italic' }}>

src/pages/Welcome/Welcome.tsx

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './Welcome.css';
 import Footer from '../../components/Footer';
 import Header from '../../components/Header';
+import { useAuth } from '../../contexts/AuthContext';
 
 const Welcome: React.FC = () => {
+    const { loadUserState } = useAuth();
+
+    useEffect(() => {
+        // Load user state when Welcome page mounts
+        loadUserState();
+    }, [loadUserState]);
     return (
         <div className="welcome">
             <Header/>