Implement comprehensive frontend infrastructure with role-based authentication

FRONTEND_INTEGRATION.md

@@ -0,0 +1,241 @@
+# Frontend Authentication Integration Guide
+
+This document provides guidance for integrating the frontend authentication system with backend APIs and existing SDLC Core components.
+
+## Authentication API Endpoints
+
+The frontend expects the following API endpoints to be implemented:
+
+### POST /auth/api/login
+**Request:**
+```json
+{
+  "username": "string",
+  "password": "string",
+  "rememberMe": boolean (optional)
+}
+```
+
+**Response (Success - 200):**
+```json
+{
+  "user": {
+    "id": number,
+    "username": "string", 
+    "email": "string",
+    "roles": [
+      {
+        "id": number,
+        "name": "string",
+        "description": "string"
+      }
+    ],
+    "isActive": boolean,
+    "memberSince": "string",
+    "lastLogin": "string"
+  },
+  "token": "string" (optional - for JWT implementation)
+}
+```
+
+**Response (Error - 401):**
+```json
+{
+  "error": "Invalid credentials"
+}
+```
+
+### POST /auth/api/register
+**Request:**
+```json
+{
+  "username": "string",
+  "email": "string", 
+  "password": "string",
+  "confirmPassword": "string"
+}
+```
+
+**Response:** Same as login success response
+
+### POST /auth/api/logout
+**Request:** Empty body or JWT token in headers
+**Response:** 200 OK
+
+### GET /auth/api/user/profile
+**Request:** JWT token in Authorization header (if using JWT)
+**Response:** User object (same format as login response)
+
+## Role-Based Access Integration
+
+### Available Roles
+- `admin` - Full system administrator access
+- `user` - Standard user access  
+- `moderator` - Content moderation access
+- `analyst` - Analytics and reporting access
+- `developer` - Development and deployment access
+
+### Using Authentication in Components
+
+```tsx
+import { useAuth, RequireRole, RequireAuth } from '../stores/authStore';
+
+// Check authentication status
+const { isAuthenticated, user, hasRole } = useAuth();
+
+// Protect entire components
+<RequireAuth>
+  <ProtectedContent />
+</RequireAuth>
+
+// Protect by specific role
+<RequireRole role="admin">
+  <AdminContent />
+</RequireRole>
+
+// Protect by multiple roles
+<RequireRole role={["admin", "developer"]}>
+  <DevContent />
+</RequireRole>
+
+// Check roles in code
+if (hasRole('analyst')) {
+  // Show analytics features
+}
+```
+
+### Protecting API Calls
+
+```tsx
+import { useAuth } from '../stores/authStore';
+
+const MyComponent = () => {
+  const { user, isAuthenticated } = useAuth();
+
+  const callProtectedAPI = async () => {
+    if (!isAuthenticated) {
+      throw new Error('User not authenticated');
+    }
+
+    // Include user token in API calls
+    const response = await fetch('/api/protected-endpoint', {
+      headers: {
+        'Authorization': `Bearer ${user.token}`, // if using JWT
+        'Content-Type': 'application/json'
+      }
+    });
+
+    return response.json();
+  };
+};
+```
+
+## Backend Integration Steps
+
+### 1. Update Authentication Store
+Replace the mock API in `frontend/stores/authStore.tsx`:
+
+```tsx
+// Replace mockApi object with actual API calls
+const api = {
+  login: async (credentials: LoginCredentials): Promise<User> => {
+    const response = await fetch('/auth/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials)
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.message || 'Login failed');
+    }
+
+    return response.json();
+  },
+
+  // ... implement other methods
+};
+```
+
+### 2. Add JWT Token Management (Optional)
+If using JWT tokens:
+
+```tsx
+// Add token to localStorage
+localStorage.setItem('authToken', user.token);
+
+// Include token in API requests
+const token = localStorage.getItem('authToken');
+headers: {
+  'Authorization': `Bearer ${token}`
+}
+
+// Remove token on logout
+localStorage.removeItem('authToken');
+```
+
+### 3. Environment Configuration
+Add environment variables for API endpoints:
+
+```env
+VITE_API_BASE_URL=http://localhost:3000
+VITE_AUTH_ENDPOINT=/auth/api
+```
+
+### 4. Error Handling
+Update error handling for production:
+
+```tsx
+// Add proper error boundaries
+// Implement user-friendly error messages  
+// Add logging for authentication errors
+```
+
+## Security Considerations
+
+1. **HTTPS Only**: Ensure all authentication happens over HTTPS
+2. **Token Expiration**: Implement proper token expiration and refresh
+3. **Rate Limiting**: Add rate limiting to prevent brute force attacks
+4. **Password Policies**: Enforce strong password requirements
+5. **Session Management**: Implement secure session handling
+6. **CSRF Protection**: Add CSRF token validation for forms
+
+## Testing
+
+The authentication system includes comprehensive test scenarios:
+
+1. **Login Flow**: Valid/invalid credentials, remember me functionality
+2. **Registration**: New user creation, validation, role assignment  
+3. **Role Protection**: Access control for admin/user roles
+4. **Navigation**: Context-aware navigation based on auth state
+5. **Session Persistence**: Page refresh maintaining login state
+6. **Logout**: Clean session termination
+
+## Demo Credentials
+
+For development/testing:
+- Admin: `admin` / `admin123`
+- User: `user` / `user123`
+
+Remove these before production deployment.
+
+## Component Architecture
+
+```
+AuthProvider (Context)
+├── App (Main routing logic)
+├── Navigation (Auth-aware navigation)
+├── LoginForm (Authentication form)
+├── RegisterForm (User registration)
+├── Dashboard (User profile & info)
+├── AdminPanel (Role-protected admin interface)
+└── AuthGuards (HOCs for access control)
+    ├── RequireAuth
+    ├── RequireRole  
+    ├── RequireAdmin
+    ├── RequireModerator
+    ├── RequireAnalyst
+    └── RequireDeveloper
+```
+
+This architecture provides a solid foundation for secure, role-based authentication throughout the SDLC Core system.

frontend/App.tsx

@@ -1,35 +1,79 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { SettingsProvider } from './stores/settingsStore';
+import { AuthProvider, useAuth } from './stores/authStore';
 import { Navigation } from './components/Navigation';
 import { SettingsPage } from './pages/SettingsPage';
-import { DashboardPage } from './pages/DashboardPage';
+import { HomePage } from './components/HomePage';
+import { LoginForm } from './components/LoginForm';
+import { RegisterForm } from './components/RegisterForm';
+import { Dashboard } from './components/Dashboard';
+import { AdminPanel } from './components/AdminPanel';
 import './styles.css';
 
-function App() {
-  // Simple routing based on hash
-  const currentHash = window.location.hash.slice(1) || '/';
+const AppContent: React.FC = () => {
+  const { isAuthenticated, isLoading } = useAuth();
+  const [currentHash, setCurrentHash] = useState(window.location.hash.slice(1) || '/');
+
+  // Handle hash changes without page reload
+  useEffect(() => {
+    const handleHashChange = () => {
+      setCurrentHash(window.location.hash.slice(1) || '/');
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  // Redirect to dashboard when authenticated and on login/register pages
+  useEffect(() => {
+    if (isAuthenticated && (currentHash === '/login' || currentHash === '/register')) {
+      window.location.hash = '/dashboard';
+    }
+  }, [isAuthenticated, currentHash]);
 
   const renderPage = () => {
+    if (isLoading) {
+      return (
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+        </div>
+      );
+    }
+
+    // Public routes
+    if (currentHash === '/login') {
+      return <LoginForm />;
+    }
+
+    if (currentHash === '/register') {
+      return <RegisterForm />;
+    }
+
+    // Protected routes
+    if (!isAuthenticated) {
+      if (currentHash === '/') {
+        return <HomePage />;
+      }
+      // Redirect to login for protected routes
+      window.location.hash = '/login';
+      return <LoginForm />;
+    }
+
+    // Authenticated routes
     switch (currentHash) {
+      case '/dashboard':
+        return <Dashboard />;
+      case '/admin':
+        return <AdminPanel />;
       case '/settings':
         return <SettingsPage />;
       case '/':
       default:
-        return <DashboardPage />;
+        // For authenticated users, default to dashboard
+        return <Dashboard />;
     }
   };
 
-  // Update navigation links to use hash routing
-  React.useEffect(() => {
-    const handleHashChange = () => {
-      // Force re-render when hash changes
-      window.location.reload();
-    };
-
-    window.addEventListener('hashchange', handleHashChange);
-    return () => window.removeEventListener('hashchange', handleHashChange);
-  }, []);
-
   return (
     <SettingsProvider>
       <div className="min-h-screen bg-gray-50">
@@ -38,6 +82,14 @@ function App() {
       </div>
     </SettingsProvider>
   );
+};
+
+function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
 }
 
 export default App;