diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
index b95e761..68dc6d6 100644
--- a/frontend/src/app/providers.tsx
+++ b/frontend/src/app/providers.tsx
@@ -3,6 +3,7 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useState } from 'react';
+import { AuthInitializer } from '@/components/auth';
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
@@ -23,6 +24,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
return (
+
{children}
diff --git a/frontend/src/components/auth/AuthInitializer.tsx b/frontend/src/components/auth/AuthInitializer.tsx
new file mode 100644
index 0000000..8c3dad2
--- /dev/null
+++ b/frontend/src/components/auth/AuthInitializer.tsx
@@ -0,0 +1,41 @@
+/**
+ * AuthInitializer Component
+ * Loads authentication state from storage on app initialization
+ * Must be a client component within the Providers tree
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useAuthStore } from '@/stores/authStore';
+
+/**
+ * AuthInitializer - Initializes auth state from encrypted storage on mount
+ *
+ * This component should be included in the app's Providers to ensure
+ * authentication state is restored from storage when the app loads.
+ *
+ * @example
+ * ```tsx
+ * // In app/providers.tsx
+ * export function Providers({ children }) {
+ * return (
+ *
+ *
+ * {children}
+ *
+ * );
+ * }
+ * ```
+ */
+export function AuthInitializer() {
+ const loadAuthFromStorage = useAuthStore((state) => state.loadAuthFromStorage);
+
+ useEffect(() => {
+ // Load auth state from encrypted storage on mount
+ loadAuthFromStorage();
+ }, [loadAuthFromStorage]);
+
+ // This component doesn't render anything
+ return null;
+}
diff --git a/frontend/src/components/auth/index.ts b/frontend/src/components/auth/index.ts
index 1f32bf1..49d2efd 100755
--- a/frontend/src/components/auth/index.ts
+++ b/frontend/src/components/auth/index.ts
@@ -1,5 +1,8 @@
// Authentication components
+// Initialization
+export { AuthInitializer } from './AuthInitializer';
+
// Route protection
export { AuthGuard } from './AuthGuard';
diff --git a/frontend/src/stores/authStore.ts b/frontend/src/stores/authStore.ts
index e8031b2..b30e9aa 100644
--- a/frontend/src/stores/authStore.ts
+++ b/frontend/src/stores/authStore.ts
@@ -6,14 +6,20 @@
import { create } from 'zustand';
import { saveTokens, getTokens, clearTokens } from '@/lib/auth/storage';
-// User type - will be replaced with generated types in Phase 2
+/**
+ * User type matching backend UserResponse
+ * Aligns with generated API types from OpenAPI spec
+ */
export interface User {
id: string;
email: string;
- full_name?: string;
+ first_name: string;
+ last_name?: string | null;
+ phone_number?: string | null;
is_active: boolean;
is_superuser: boolean;
- organization_id?: string;
+ created_at: string;
+ updated_at?: string | null;
}
interface AuthState {