fix(frontend): Fix Zustand authStore hydration timing issue
Fix race condition where Epic form checked user authentication before Zustand persist middleware completed hydration from localStorage. Root cause: - authStore uses persist middleware to restore from localStorage - Hydration is asynchronous - Epic form checked user state before hydration completed - Result: "User not authenticated" error on page refresh Changes: - Add isHydrated state to authStore interface - Add onRehydrateStorage callback to track hydration completion - Update epic-form to check isHydrated before checking user - Disable submit button until hydration completes - Show "Loading..." button text during hydration - Improve error messages for better UX - Add console logging to track hydration process Testing: - Page refresh should now wait for hydration - Epic form correctly identifies logged-in users - Submit button disabled until auth state ready - Clear user feedback during loading state Fixes: Epic creation "User not authenticated" error on refresh 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,7 @@ interface AuthState {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
isHydrated: boolean;
|
||||
|
||||
setUser: (user: User) => void;
|
||||
clearUser: () => void;
|
||||
@@ -18,6 +19,7 @@ export const useAuthStore = create<AuthState>()(
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: true,
|
||||
isHydrated: false,
|
||||
|
||||
setUser: (user) =>
|
||||
set({ user, isAuthenticated: true, isLoading: false }),
|
||||
@@ -31,6 +33,16 @@ export const useAuthStore = create<AuthState>()(
|
||||
user: state.user,
|
||||
isAuthenticated: state.isAuthenticated,
|
||||
}),
|
||||
onRehydrateStorage: () => (state) => {
|
||||
console.log('[AuthStore] Hydration started');
|
||||
if (state) {
|
||||
state.isHydrated = true;
|
||||
console.log('[AuthStore] Hydration completed', {
|
||||
user: state.user?.id,
|
||||
isAuthenticated: state.isAuthenticated
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user