@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/features/auth/hooks/useAuth.tsx

@@ -0,0 +1,205 @@
+import { useState, useEffect, createContext, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { AuthService } from '../../../atoms/services/auth-service';
+import { setGlobalAuthService } from '../../../atoms/services/api/client';
+import type { 
+  AuthConfig, 
+  BaseUser, 
+  LoginCredentials, 
+  AuthContextType 
+} from '../../../atoms/types';
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth<T extends BaseUser = BaseUser>(): AuthContextType<T> {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context as AuthContextType<T>;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+  config?: AuthConfig;
+}
+
+export function AuthProvider<T extends BaseUser = BaseUser>({ 
+  children, 
+  config 
+}: AuthProviderProps) {
+  const [user, setUser] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [permissions, setPermissions] = useState<string[]>([]);
+
+  // Create auth service with default config if none provided
+  const authService = useMemo(() => {
+    const defaultConfig: AuthConfig = {
+      apiUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
+      endpoints: {
+        login: '/auth/login',
+        register: '/auth/register',
+        refresh: '/auth/refresh',
+        me: '/auth/me',
+        logout: '/auth/logout'
+      },
+      tokenStorage: 'localStorage',
+      tokenRefreshBuffer: 5,
+      autoRefresh: true,
+      permissions: {
+        enabled: false
+      }
+    };
+
+    const mergedConfig = config ? { ...defaultConfig, ...config } : defaultConfig;
+    const service = new AuthService<T>(mergedConfig);
+    
+    // Set global reference for API client
+    setGlobalAuthService(service);
+    
+    return service;
+  }, [config]);
+
+  const isAuthenticated = !!user;
+
+  useEffect(() => {
+    // Check for existing auth on mount
+    const initAuth = async () => {
+      setIsLoading(true);
+      
+      try {
+        // Check for stored user
+        const storedUser = authService.getStoredUser();
+        const tokenData = authService.getTokenData();
+        
+        if (storedUser && tokenData?.token) {
+          if (authService.isTokenExpired()) {
+            // Token expired, try to refresh
+            if (tokenData.refreshToken) {
+              try {
+                await authService.refreshToken();
+                setUser(storedUser);
+                
+                // Load fresh user data if possible
+                try {
+                  const freshUser = await authService.getCurrentUser();
+                  if (freshUser) setUser(freshUser);
+                } catch {
+                  // Keep stored user if fresh fetch fails
+                }
+              } catch {
+                // Refresh failed, clear auth
+                authService.clearAuth();
+              }
+            } else {
+              // No refresh token, clear auth
+              authService.clearAuth();
+            }
+          } else {
+            // Token still valid
+            setUser(storedUser);
+            
+            // Optionally validate with server
+            try {
+              const freshUser = await authService.getCurrentUser();
+              if (freshUser) setUser(freshUser);
+            } catch {
+              // Keep stored user if validation fails
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Auth initialization error:', error);
+        authService.clearAuth();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initAuth();
+  }, [authService]);
+
+  const login = async (credentials: LoginCredentials) => {
+    setIsLoading(true);
+    try {
+      const user = await authService.login(credentials);
+      setUser(user);
+      
+      // Extract permissions if user has roles/permissions
+      if (config?.permissions?.enabled && 'permissions' in user) {
+        setPermissions((user as any).permissions || []);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = async () => {
+    setIsLoading(true);
+    try {
+      await authService.logout();
+      setUser(null);
+      setPermissions([]);
+    } catch (error) {
+      console.error('Logout error:', error);
+      // Clear local state anyway
+      authService.clearAuth();
+      setUser(null);
+      setPermissions([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshToken = async () => {
+    await authService.refreshToken();
+  };
+
+  const hasPermission = (permission: string): boolean => {
+    if (!config?.permissions?.enabled) return true;
+    return permissions.includes(permission);
+  };
+
+  const hasRole = (role: string): boolean => {
+    if (!config?.permissions?.enabled) return true;
+    
+    // Check if user has role property
+    if (user && 'role' in user) {
+      return (user as any).role === role;
+    }
+    
+    // Check if user has roles array
+    if (user && 'roles' in user) {
+      return ((user as any).roles || []).includes(role);
+    }
+    
+    // Fallback: check admin/user roles from config
+    const { adminRoles = ['admin'], userRoles = ['user'] } = config.permissions || {};
+    
+    if (adminRoles.includes(role)) {
+      return permissions.includes('admin') || permissions.includes('*');
+    }
+    
+    if (userRoles.includes(role)) {
+      return permissions.length > 0; // Any permissions = user role
+    }
+    
+    return false;
+  };
+
+  const value: AuthContextType<T> = {
+    user,
+    isAuthenticated,
+    isLoading,
+    permissions,
+    login,
+    logout,
+    refreshToken,
+    hasPermission,
+    hasRole,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

package/src/features/auth/hooks/usePermissions.ts

@@ -0,0 +1,35 @@
+import { useAuth } from './useAuth';
+import type { BaseUser } from '../../../atoms/types';
+
+export function usePermissions<T extends BaseUser = BaseUser>() {
+  const { hasPermission, hasRole, permissions, user } = useAuth<T>();
+
+  const can = (permission: string): boolean => hasPermission(permission);
+  
+  const canAny = (permissions: string[]): boolean => 
+    permissions.some(permission => hasPermission(permission));
+  
+  const canAll = (permissions: string[]): boolean => 
+    permissions.every(permission => hasPermission(permission));
+
+  const isRole = (role: string): boolean => hasRole(role);
+  
+  const isAnyRole = (roles: string[]): boolean => 
+    roles.some(role => hasRole(role));
+
+  const isAdmin = (): boolean => hasRole('admin');
+  
+  const isUser = (): boolean => hasRole('user');
+
+  return {
+    can,
+    canAny,
+    canAll,
+    isRole,
+    isAnyRole,
+    isAdmin,
+    isUser,
+    permissions,
+    user
+  };
+}

package/src/features/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/src/features/index.ts

@@ -0,0 +1,2 @@
+// Features - Domain-specific functionality modules
+export * from './auth';