From 4885df80a7a4dc9a89adc22d180205a9b9ba2926 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Sun, 2 Nov 2025 05:59:00 +0100
Subject: [PATCH] Integrate `AuthInitializer` component to restore
 authentication state on app load and enhance `User` type to align with
 OpenAPI spec.

---
 frontend/src/app/providers.tsx                |  2 +
 .../src/components/auth/AuthInitializer.tsx   | 41 +++++++++++++++++++
 frontend/src/components/auth/index.ts         |  3 ++
 frontend/src/stores/authStore.ts              | 12 ++++--
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/auth/AuthInitializer.tsx

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 (
     <QueryClientProvider client={queryClient}>
+      <AuthInitializer />
       {children}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
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 (
+ *     <QueryClientProvider>
+ *       <AuthInitializer />
+ *       {children}
+ *     </QueryClientProvider>
+ *   );
+ * }
+ * ```
+ */
+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 {