[FE-03] Fix race condition in Zustand auth hydration

frontend/lib/store/authStore.ts

@@ -0,0 +1,105 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+export interface AdminUser {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  profilePicture?: string;
+}
+
+interface AuthState {
+  user: AdminUser | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  _hasHydrated: boolean;
+
+  setAuth: (user: AdminUser, token: string) => void;
+  clearAuth: () => void;
+  setLoading: (loading: boolean) => void;
+  updateUser: (user: Partial<AdminUser>) => void;
+  setHasHydrated: (hydrated: boolean) => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+      isLoading: false,
+      _hasHydrated: false,
+
+      setAuth: (user, token) => {
+        set({
+          user,
+          token,
+          isAuthenticated: true,
+          isLoading: false,
+        });
+      },
+
+      clearAuth: () => {
+        set({
+          user: null,
+          token: null,
+          isAuthenticated: false,
+          isLoading: false,
+        });
+      },
+
+      setLoading: (loading) => {
+        set({ isLoading: loading });
+      },
+
+      updateUser: (updates) => {
+        set((state) => ({
+          user: state.user ? { ...state.user, ...updates } : null,
+        }));
+      },
+
+      setHasHydrated: (hydrated) => {
+        set({ _hasHydrated: hydrated });
+      },
+    }),
+    {
+      name: "admin-auth",
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        user: state.user,
+        token: state.token,
+        isAuthenticated: state.isAuthenticated,
+      }),
+      onRehydrateStorage: () => {
+        return (state, error) => {
+          if (!error) {
+            state?.setHasHydrated(true);
+          }
+        };
+      },
+    },
+  ),
+);
+
+export const useAuthRehydrated = () =>
+  useAuthStore((state) => state._hasHydrated);
+
+export const useAuthState = () =>
+  useAuthStore((state) => ({
+    user: state.user,
+    token: state.token,
+    isAuthenticated: state.isAuthenticated,
+    isLoading: state.isLoading,
+    _hasHydrated: state._hasHydrated,
+  }));
+
+export const useAuthActions = () =>
+  useAuthStore((state) => ({
+    setAuth: state.setAuth,
+    clearAuth: state.clearAuth,
+    setLoading: state.setLoading,
+    updateUser: state.updateUser,
+  }));

frontend/providers/ProtectedRoute.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuthStore, useAuthRehydrated } from "@/lib/store/authStore";
+
+function SkeletonLoader() {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-white">
+      <div className="w-full max-w-md p-8 space-y-4">
+        <div className="h-8 bg-gray-200 rounded animate-pulse" />
+        <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4" />
+        <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2" />
+      </div>
+    </div>
+  );
+}
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const router = useRouter();
+  const hasHydrated = useAuthRehydrated();
+  const { isAuthenticated, isLoading } = useAuthStore((state) => ({
+    isAuthenticated: state.isAuthenticated,
+    isLoading: state.isLoading,
+  }));
+
+  useEffect(() => {
+    if (hasHydrated && !isLoading && !isAuthenticated) {
+      router.push("/login");
+    }
+  }, [hasHydrated, isLoading, isAuthenticated, router]);
+
+  if (!hasHydrated || isLoading) {
+    return <SkeletonLoader />;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return <>{children}</>;
+}