sadasd

frontend/src/components/auth/ProtectedRoute.tsx

@@ -39,15 +39,26 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
 
   // Validate account + plan whenever auth/user changes
   useEffect(() => {
+    console.log('[ProtectedRoute] Auth state changed:', { 
+      isAuthenticated, 
+      hasUser: !!user, 
+      hasAccount: !!user?.account,
+      pathname: location.pathname 
+    });
+    
     if (!isAuthenticated) {
+      console.log('[ProtectedRoute] Not authenticated, will redirect to signin');
       return;
     }
 
     if (!user?.account) {
+      console.error('[ProtectedRoute] User has no account, logging out');
       setErrorMessage('This user is not linked to an account. Please contact support.');
       logout();
       return;
     }
+    
+    console.log('[ProtectedRoute] Auth validation passed');
   }, [isAuthenticated, user, logout]);
 
   // Immediate check on mount: if loading is true, reset it immediately
@@ -114,6 +125,7 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
 
   // Redirect to signin if not authenticated
   if (!isAuthenticated) {
+    console.log('[ProtectedRoute] Redirecting to /signin - not authenticated');
     return <Navigate to="/signin" state={{ from: location }} replace />;
   }
 

frontend/src/components/auth/SignInForm.tsx

@@ -28,6 +28,11 @@ export default function SignInForm() {
 
     try {
       await login(email, password);
+      
+      // CRITICAL: Wait for auth state to persist to localStorage before navigating
+      // Increased to 500ms to ensure Zustand persist middleware completes
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
       // Redirect to the page user was trying to access, or home
       const from = (location.state as any)?.from?.pathname || "/";
       navigate(from, { replace: true });

frontend/src/components/auth/SignUpForm.tsx

@@ -85,9 +85,11 @@ export default function SignUpForm({ planDetails: planDetailsProp, planLoading:
     }
 
     try {
+      console.log('[SignUp] Starting registration...');
       // Generate username from email if not provided
       const username = formData.username || formData.email.split("@")[0];
       
+      console.log('[SignUp] Calling register API...');
       const user = await register({
         email: formData.email,
         password: formData.password,
@@ -98,13 +100,29 @@ export default function SignUpForm({ planDetails: planDetailsProp, planLoading:
         plan_slug: planSlug || undefined,
       });
 
+      console.log('[SignUp] Registration successful, user:', user);
+      console.log('[SignUp] Auth state before delay:', useAuthStore.getState());
+
+      // CRITICAL: Wait for auth state to persist to localStorage before navigating
+      // Increased to 500ms to ensure Zustand persist middleware completes
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      // Verify auth state is persisted
+      const persistedState = localStorage.getItem('auth-storage');
+      console.log('[SignUp] Persisted auth state:', persistedState);
+      console.log('[SignUp] Auth state after delay:', useAuthStore.getState());
+
       const status = user?.account?.status;
+      console.log('[SignUp] Account status:', status);
       if (status === "pending_payment") {
+        console.log('[SignUp] Navigating to /account/plans');
         navigate("/account/plans", { replace: true });
       } else {
+        console.log('[SignUp] Navigating to /sites');
         navigate("/sites", { replace: true });
       }
     } catch (err: any) {
+      console.error('[SignUp] Registration error:', err);
       setError(err.message || "Registration failed. Please try again.");
     }
   };

frontend/src/store/authStore.ts

@@ -35,6 +35,7 @@ interface AuthState {
   refreshToken: string | null;
   isAuthenticated: boolean;
   loading: boolean;
+  _hasHydrated: boolean; // Track if persist has completed rehydration
   
   // Actions
   login: (email: string, password: string) => Promise<void>;
@@ -44,6 +45,7 @@ interface AuthState {
   setToken: (token: string | null) => void;
   refreshToken: () => Promise<void>;
   refreshUser: () => Promise<void>;
+  setHasHydrated: (hasHydrated: boolean) => void;
 }
 
 export const useAuthStore = create<AuthState>()(
@@ -53,6 +55,7 @@ export const useAuthStore = create<AuthState>()(
       token: null,
       isAuthenticated: false,
       loading: false, // Always start with loading false - will be set true only during login/register
+      _hasHydrated: false, // Will be set to true after persist rehydration completes
       
       login: async (email, password) => {
         set({ loading: true });