forked from cardosofelipe/fast-next-template
Integrate AuthInitializer component to restore authentication state on app load and enhance User type to align with OpenAPI spec.
This commit is contained in:
@@ -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>
|
||||
|
||||
41
frontend/src/components/auth/AuthInitializer.tsx
Normal file
41
frontend/src/components/auth/AuthInitializer.tsx
Normal file
@@ -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;
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
// Authentication components
|
||||
|
||||
// Initialization
|
||||
export { AuthInitializer } from './AuthInitializer';
|
||||
|
||||
// Route protection
|
||||
export { AuthGuard } from './AuthGuard';
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user