Fix: Implement loading strategy for hooks

Modify hooks to prevent premature Firestore requests before authentication. Add loading states and ensure hooks run only after authentication.

Author: lovable-dev[bot]

src/contexts/AuthContext.tsx

@@ -24,23 +24,27 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // Vérifier le cache localStorage d'abord
+    console.log('🔐 AuthProvider - Initialisation');
+    
+    // Vérifier le cache localStorage pour un chargement quasi-instantané
     const cachedUser = localStorage.getItem('auth_user');
     if (cachedUser) {
-      console.log('🔥 Cache utilisateur trouvé, chargement instantané');
-      setLoading(false);
+      console.log('🔐 Cache utilisateur trouvé, chargement ultra-rapide');
+      // Gardons loading=true pour attendre la confirmation Firebase
     }
 
     const unsubscribe = onAuthStateChanged(auth, (user) => {
-      console.log('🔥 Auth state changed:', user ? 'Connected' : 'Disconnected');
+      console.log('🔐 Firebase Auth state changed:', user ? 'CONNECTÉ' : 'DÉCONNECTÉ');
       setUser(user);
-      setLoading(false);
+      setLoading(false); // AUTH COMPLÈTE ICI
 
       // Cache simple
       if (user) {
         localStorage.setItem('auth_user', 'true');
+        console.log('🔐 Utilisateur authentifié:', user.uid);
       } else {
         localStorage.removeItem('auth_user');
+        console.log('🔐 Utilisateur déconnecté');
       }
     });
 

src/hooks/useAffiliates.ts

@@ -18,67 +18,69 @@ import { Affiliate } from '@/types';
 export const useAffiliates = (campaignId?: string) => {
   const [affiliates, setAffiliates] = useState<Affiliate[]>([]);
   const [loading, setLoading] = useState(true);
-  const { user } = useAuth();
+  const { user, loading: authLoading } = useAuth();
 
   useEffect(() => {
-    console.log('🔄 useAffiliates effect triggered');
-    console.log('👤 User:', user?.uid);
-    console.log('📋 CampaignId:', campaignId);
+    console.log('👥 useAffiliates - Effect triggered');
+    console.log('👥 authLoading:', authLoading, 'user:', !!user, 'campaignId:', campaignId);
+    
+    // PROTECTION STRICTE : Aucune requête avant auth complète
+    if (authLoading) {
+      console.log('👥 Auth encore en cours, pas de requête Firebase');
+      return;
+    }
 
     if (!user) {
-      console.log('❌ No user, clearing affiliates');
+      console.log('👥 Pas d\'utilisateur, nettoyage des affiliés');
       setAffiliates([]);
       setLoading(false);
       return;
     }
 
+    console.log('👥 Auth OK, démarrage requête Firestore pour user:', user.uid);
+
     const affiliatesRef = collection(db, 'affiliates');
     let q;
 
     if (campaignId) {
-      console.log('🎯 Querying affiliates for specific campaign:', campaignId);
+      console.log('👥 Requête pour campagne spécifique:', campaignId);
       q = query(
         affiliatesRef, 
         where('campaignId', '==', campaignId), 
         where('userId', '==', user.uid),
         orderBy('createdAt', 'desc')
       );
     } else {
-      console.log('🎯 Querying all affiliates for user:', user.uid);
+      console.log('👥 Requête tous affiliés pour user:', user.uid);
       q = query(
         affiliatesRef, 
         where('userId', '==', user.uid), 
         orderBy('createdAt', 'desc')
       );
     }
 
-    console.log('🔗 Setting up Firestore listener...');
     const unsubscribe = onSnapshot(q, (snapshot) => {
-      console.log('📊 Firestore snapshot received');
-      console.log('📄 Documents count:', snapshot.docs.length);
+      console.log('👥 Firestore snapshot reçu, docs:', snapshot.docs.length);
 
       const affiliatesData = snapshot.docs.map(doc => {
         const data = doc.data();
-        console.log('📋 Affiliate doc:', { id: doc.id, data });
         return {
           id: doc.id,
           ...data,
           createdAt: data.createdAt?.toDate(),
         };
       }) as Affiliate[];
 
-      console.log('✅ Processed affiliates:', affiliatesData);
+      console.log('👥 Affiliés chargés:', affiliatesData.length);
       setAffiliates(affiliatesData);
       setLoading(false);
     }, (error) => {
-      console.error('❌ Firestore listener error:', error);
-      console.error('❌ Error code:', error.code);
-      console.error('❌ Error message:', error.message);
+      console.error('👥 Erreur Firestore:', error);
       setLoading(false);
     });
 
     return unsubscribe;
-  }, [user, campaignId]);
+  }, [user, authLoading, campaignId]); // Dépendance sur authLoading aussi
 
   const generateTrackingCode = () => {
     return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

src/hooks/useCampaigns.ts

@@ -1,4 +1,3 @@
-
 import { useEffect, useState } from 'react';
 import { 
   collection, 
@@ -18,33 +17,38 @@ import { Campaign } from '@/types';
 export const useCampaigns = () => {
   const [campaigns, setCampaigns] = useState<Campaign[]>([]);
   const [loading, setLoading] = useState(true);
-  const { user } = useAuth();
+  const { user, loading: authLoading } = useAuth();
 
   useEffect(() => {
-    console.log('useCampaigns effect triggered, user:', user?.uid);
+    console.log('🎯 useCampaigns - Effect triggered');
+    console.log('🎯 authLoading:', authLoading, 'user:', !!user);
+    
+    // PROTECTION STRICTE : Aucune requête avant auth complète
+    if (authLoading) {
+      console.log('🎯 Auth encore en cours, pas de requête Firebase');
+      return;
+    }
 
     if (!user) {
-      console.log('No user, clearing campaigns');
+      console.log('🎯 Pas d\'utilisateur, nettoyage des campagnes');
       setCampaigns([]);
       setLoading(false);
       return;
     }
 
+    console.log('🎯 Auth OK, démarrage requête Firestore pour user:', user.uid);
+    
     const campaignsRef = collection(db, 'campaigns');
-    // Requête temporaire sans orderBy pour éviter l'erreur d'index
     const q = query(
       campaignsRef, 
       where('userId', '==', user.uid)
     );
 
-    console.log('Setting up Firestore listener for user:', user.uid);
-
     const unsubscribe = onSnapshot(q, (snapshot) => {
-      console.log('Firestore snapshot received, docs count:', snapshot.docs.length);
+      console.log('🎯 Firestore snapshot reçu, docs:', snapshot.docs.length);
 
       const campaignsData = snapshot.docs.map(doc => {
         const data = doc.data();
-        console.log('Campaign doc data:', data);
         return {
           id: doc.id,
           ...data,
@@ -53,22 +57,22 @@ export const useCampaigns = () => {
         };
       }) as Campaign[];
 
-      // Tri côté client en attendant l'index Firestore
+      // Tri côté client
       campaignsData.sort((a, b) => {
         if (!a.createdAt || !b.createdAt) return 0;
         return b.createdAt.getTime() - a.createdAt.getTime();
       });
 
-      console.log('Processed campaigns data:', campaignsData);
+      console.log('🎯 Campagnes chargées:', campaignsData.length);
       setCampaigns(campaignsData);
       setLoading(false);
     }, (error) => {
-      console.error('Firestore listener error:', error);
+      console.error('🎯 Erreur Firestore:', error);
       setLoading(false);
     });
 
     return unsubscribe;
-  }, [user]);
+  }, [user, authLoading]); // Dépendance sur authLoading aussi
 
   const createCampaign = async (campaignData: Omit<Campaign, 'id' | 'createdAt' | 'updatedAt' | 'userId'>) => {
     if (!user) throw new Error('User not authenticated');