@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/rbac/components/RoleBasedRouter.tsx

@@ -1,440 +0,0 @@
-/**
- * @file Role Based Router Component
- * @package @jmruthers/pace-core
- * @module RBAC/Components/RoleBasedRouter
- * @since 2.0.0
- *
- * A component that provides centralized routing control and prevents apps from
- * implementing custom routing that bypasses permission checks. This is a critical
- * security component that ensures all routes are properly protected.
- *
- * Features:
- * - Centralized routing control
- * - Role-based route protection
- * - Permission-based route filtering
- * - Strict mode to prevent bypassing
- * - Automatic audit logging
- * - Integration with existing RBAC system
- * - Clear error messages for unauthorized routes
- *
- * @example
- * ```tsx
- * // Basic role-based routing
- * <RoleBasedRouter
- *   routes={routeConfig}
- *   fallbackRoute="/unauthorized"
- *   strictMode={true}
- * >
- *   <App />
- * </RoleBasedRouter>
- * 
- * // With custom configuration
- * <RoleBasedRouter
- *   routes={routeConfig}
- *   fallbackRoute="/unauthorized"
- *   strictMode={true}
- *   auditLog={true}
- *   onRouteAccess={(route, allowed) => {
- *     console.log(`Route access: ${route} - ${allowed ? 'allowed' : 'denied'}`);
- *   }}
- * >
- *   <App />
- * </RoleBasedRouter>
- * ```
- *
- * @security
- * - Enforces route-level permissions
- * - Prevents apps from bypassing route protection
- * - Automatic audit logging for all route access attempts
- * - Integration with existing RBAC system
- * - Clear error messages for unauthorized routes
- *
- * @performance
- * - Optimized with useMemo and useCallback
- * - Cached permission checks
- * - Minimal re-renders
- * - Efficient route matching
- *
- * @dependencies
- * - React 19+ - Component framework
- * - React Router - Routing functionality
- * - useCan hook - Permission checking
- * - useUnifiedAuth - Authentication context
- * - RBAC types - Type definitions
- */
-
-import React, { useMemo, useCallback, useEffect, useState, createContext, useContext } from 'react';
-import { useLocation, useNavigate, Outlet } from 'react-router-dom';
-import { useCan } from '../hooks';
-import { useResolvedScope } from '../hooks/useResolvedScope';
-import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
-import { UUID, Permission, Scope, AccessLevel } from '../types';
-import { getRBACLogger } from '../config';
-
-export interface RouteConfig {
-  /** Route path */
-  path: string;
-  
-  /** React component to render */
-  component: React.ComponentType;
-  
-  /** Permissions required for this route */
-  permissions: Permission[];
-  
-  /** If true, this route is public and doesn't require permission checks */
-  public?: boolean;
-  
-  /** Roles that can access this route */
-  roles?: string[];
-  
-  /** Minimum access level required */
-  accessLevel?: AccessLevel;
-  
-  /** Page ID for permission checking */
-  pageId?: string;
-  
-  /** Enable strict mode for this route */
-  strictMode?: boolean;
-  
-  /** Route metadata */
-  meta?: {
-    title?: string;
-    description?: string;
-    requiresAuth?: boolean;
-    hidden?: boolean;
-  };
-}
-
-export interface RouteAccessRecord {
-  route: string;
-  permissions: Permission[];
-  userId: UUID;
-  scope: Scope;
-  allowed: boolean;
-  timestamp: string;
-  pageId?: string;
-  roles?: string[];
-  accessLevel?: AccessLevel;
-}
-
-export interface RoleBasedRouterContextType {
-  /** Get all accessible routes for current user */
-  getAccessibleRoutes: () => RouteConfig[];
-  
-  /** Check if user can access a specific route */
-  canAccessRoute: (path: string) => boolean;
-  
-  /** Get route configuration for a path */
-  getRouteConfig: (path: string) => RouteConfig | null;
-  
-  /** Get route access history */
-  getRouteAccessHistory: () => RouteAccessRecord[];
-  
-  /** Clear route access history */
-  clearRouteAccessHistory: () => void;
-  
-  /** Check if strict mode is enabled */
-  isStrictMode: boolean;
-  
-  /** Check if audit logging is enabled */
-  isAuditLogEnabled: boolean;
-}
-
-export interface RoleBasedRouterProps {
-  /** Route configuration */
-  routes: RouteConfig[];
-  
-  /** Fallback route for unauthorized access */
-  fallbackRoute?: string;
-  
-  /** Child components */
-  children: React.ReactNode;
-  
-  /** Enable strict mode to prevent bypassing (default: true) */
-  strictMode?: boolean;
-  
-  /** Enable audit logging (default: true) */
-  auditLog?: boolean;
-  
-  /** Callback when route access is attempted */
-  onRouteAccess?: (route: string, allowed: boolean, record: RouteAccessRecord) => void;
-  
-  /** Callback when strict mode violation occurs */
-  onStrictModeViolation?: (route: string, record: RouteAccessRecord) => void;
-  
-  /** Maximum number of access records to keep in history */
-  maxHistorySize?: number;
-  
-  /** Custom unauthorized component */
-  unauthorizedComponent?: React.ComponentType<{ route: string; reason: string }>;
-}
-
-const RoleBasedRouterContext = createContext<RoleBasedRouterContextType | null>(null);
-
-/**
- * RoleBasedRouter - Centralized routing control with role-based protection
- * 
- * This component ensures that all routes are properly protected and provides
- * centralized routing control to prevent apps from bypassing route protection.
- * 
- * @param props - Router props
- * @returns React element with role-based routing
- */
-export function RoleBasedRouter({
-  routes,
-  fallbackRoute = '/unauthorized',
-  children,
-  strictMode = true,
-  auditLog = true,
-  onRouteAccess,
-  onStrictModeViolation,
-  maxHistorySize = 1000,
-  unauthorizedComponent: UnauthorizedComponent = DefaultUnauthorizedComponent
-}: RoleBasedRouterProps) {
-  const { user, selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [routeAccessHistory, setRouteAccessHistory] = useState<RouteAccessRecord[]>([]);
-  const [currentRoute, setCurrentRoute] = useState<string>('');
-
-  // Use useResolvedScope to get proper scope (org derived from event if needed)
-  const { resolvedScope } = useResolvedScope({
-    supabase,
-    selectedOrganisationId: selectedOrganisation?.id || null,
-    selectedEventId: selectedEvent?.event_id || null
-  });
-
-  // Get current scope from resolved scope
-  // For event-required apps: org is derived from event
-  // For org-required apps: org comes from selectedOrganisation
-  const currentScope = resolvedScope;
-
-  // Get route configuration for current path
-  const currentRouteConfig = useMemo((): RouteConfig | null => {
-    const currentPath = location.pathname;
-    return routes.find(route => route.path === currentPath) || null;
-  }, [routes, location.pathname]);
-
-  // Check if user can access a specific route
-  const canAccessRoute = useCallback((path: string): boolean => {
-    if (!user?.id || !currentScope) return false;
-    
-    const routeConfig = routes.find(route => route.path === path);
-    if (!routeConfig) return false;
-    
-    // Use the existing RBAC system to check route permissions
-    // This is a synchronous check for the context - actual permission checking
-    // happens in the individual route components using useCan hook
-    // For now, we'll return true and let the individual route components
-    // handle the actual permission checking asynchronously
-    return true;
-  }, [user?.id, currentScope, routes]);
-
-  // Use useCan hook for actual permission checking
-  // Pass null for super admin status (not checked yet - hook will check if needed)
-  const { can: canAccessCurrentRoute, isLoading: permissionLoading } = useCan(
-    user?.id || '',
-    currentScope || { organisationId: '', eventId: undefined, appId: undefined },
-    currentRouteConfig?.permissions?.[0] || 'read:page',
-    currentRouteConfig?.pageId,
-    true, // useCache
-    null, // precomputedSuperAdmin - not checked yet
-    undefined // appName
-  );
-
-  // Check if route is public
-  const isPublicRoute = currentRouteConfig?.public === true;
-  
-  // If route has no permissions and is not public, deny access (secure by default)
-  const hasPermissions = currentRouteConfig?.permissions && currentRouteConfig.permissions.length > 0;
-  const finalCanAccess = isPublicRoute ? true : (hasPermissions ? canAccessCurrentRoute : false);
-  const finalLoading = isPublicRoute ? false : (hasPermissions ? permissionLoading : false);
-
-  // Get all accessible routes for current user
-  const getAccessibleRoutes = useCallback((): RouteConfig[] => {
-    if (!user?.id || !currentScope) return [];
-    
-    return routes.filter(route => canAccessRoute(route.path));
-  }, [user?.id, currentScope, routes, canAccessRoute]);
-
-  // Get route configuration for a path
-  const getRouteConfig = useCallback((path: string): RouteConfig | null => {
-    return routes.find(route => route.path === path) || null;
-  }, [routes]);
-
-  // Get route access history
-  const getRouteAccessHistory = useCallback((): RouteAccessRecord[] => {
-    return [...routeAccessHistory];
-  }, [routeAccessHistory]);
-
-  // Clear route access history
-  const clearRouteAccessHistory = useCallback(() => {
-    setRouteAccessHistory([]);
-  }, []);
-
-  // Record route access attempt
-  const recordRouteAccess = useCallback((
-    route: string,
-    allowed: boolean,
-    routeConfig: RouteConfig
-  ) => {
-    if (!auditLog || !user?.id || !currentScope) return;
-    
-    const record: RouteAccessRecord = {
-      route,
-      permissions: routeConfig.permissions,
-      userId: user.id,
-      scope: currentScope,
-      allowed,
-      timestamp: new Date().toISOString(),
-      pageId: routeConfig.pageId,
-      roles: routeConfig.roles,
-      accessLevel: routeConfig.accessLevel
-    };
-    
-    setRouteAccessHistory(prev => {
-      const newHistory = [record, ...prev];
-      return newHistory.slice(0, maxHistorySize);
-    });
-    
-    if (onRouteAccess) {
-      onRouteAccess(route, allowed, record);
-    }
-    
-    if (strictMode && !allowed && onStrictModeViolation) {
-      onStrictModeViolation(route, record);
-    }
-  }, [auditLog, user?.id, currentScope, maxHistorySize, onRouteAccess, onStrictModeViolation, strictMode]);
-
-  // Check route access on location change
-  useEffect(() => {
-    const currentPath = location.pathname;
-    setCurrentRoute(currentPath);
-    
-    if (!currentRouteConfig) {
-      // Route not found in configuration
-      if (strictMode) {
-        const logger = getRBACLogger();
-        logger.error(`STRICT MODE VIOLATION: Route not found in configuration`, {
-          route: currentPath,
-          userId: user?.id,
-          timestamp: new Date().toISOString()
-        });
-        
-        if (onStrictModeViolation) {
-          onStrictModeViolation(currentPath, {
-            route: currentPath,
-            permissions: [],
-            userId: user?.id || '',
-            scope: currentScope || { organisationId: '' },
-            allowed: false,
-            timestamp: new Date().toISOString()
-          });
-        }
-      }
-      return;
-    }
-    
-    // Use the actual permission check result
-    const allowed = finalCanAccess;
-    // Log route access (including public routes for audit monitoring)
-    recordRouteAccess(currentPath, allowed, currentRouteConfig);
-    
-    if (!allowed && !isPublicRoute) {
-      // Redirect to fallback route (skip for public routes)
-      navigate(fallbackRoute, { replace: true });
-    }
-  }, [location.pathname, currentRouteConfig, canAccessCurrentRoute, recordRouteAccess, strictMode, user?.id, currentScope, onStrictModeViolation, navigate, fallbackRoute, isPublicRoute]);
-
-  // Context value
-  const contextValue = useMemo((): RoleBasedRouterContextType => ({
-    getAccessibleRoutes,
-    canAccessRoute,
-    getRouteConfig,
-    getRouteAccessHistory,
-    clearRouteAccessHistory,
-    isStrictMode: strictMode,
-    isAuditLogEnabled: auditLog
-  }), [
-    getAccessibleRoutes,
-    canAccessRoute,
-    getRouteConfig,
-    getRouteAccessHistory,
-    clearRouteAccessHistory,
-    strictMode,
-    auditLog
-  ]);
-
-  // Show loading state while checking permissions (skip for public routes)
-  if (finalLoading && !isPublicRoute) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">
-          <div className="animate-spin rounded-full size-8 border-b-2 border-main-600 mx-auto mb-4"></div>
-          <p className="text-sec-600">Checking permissions...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Show unauthorized component if user can't access current route
-  if (currentRouteConfig && !finalCanAccess && !isPublicRoute) {
-    return (
-      <UnauthorizedComponent 
-        route={currentRoute} 
-        reason="Insufficient permissions" 
-      />
-    );
-  }
-  return (
-    <RoleBasedRouterContext.Provider value={contextValue}>
-      {children}
-      <Outlet />
-    </RoleBasedRouterContext.Provider>
-  );
-}
-
-/**
- * Hook to use role-based router context
- * 
- * @returns Role-based router context
- * @throws Error if used outside of RoleBasedRouter
- */
-export function useRoleBasedRouter(): RoleBasedRouterContextType {
-  const context = useContext(RoleBasedRouterContext);
-  
-  if (!context) {
-    throw new Error('useRoleBasedRouter must be used within a RoleBasedRouter');
-  }
-  
-  return context;
-}
-
-/**
- * Default unauthorized component
- */
-function DefaultUnauthorizedComponent({ route, reason }: { route: string; reason: string }) {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-screen p-8 text-center">
-      <div className="mb-4">
-        <svg className="w-16 h-16 text-acc-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-        </svg>
-      </div>
-      <h2 className="text-xl font-semibold text-sec-900 mb-2">Access Denied</h2>
-      <p className="text-sec-600 mb-4">
-        You don't have permission to access <code className="bg-sec-100 px-2 py-1 rounded">{route}</code>
-      </p>
-      <p className="text-sm text-sec-500 mb-4">Reason: {reason}</p>
-      <button 
-        onClick={() => window.history.back()}
-        className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
-      >
-        Go Back
-      </button>
-    </div>
-  );
-}
-
-export default RoleBasedRouter;
-