Resolve Docker networking issue for middleware token verification

Dynamic API client creation to handle different endpoints for server-side (container-to-container) vs client-side (API gateway) requests.

Author: FooChao

ai/usage-log.md

@@ -281,4 +281,58 @@ Request to implement UserContext for managing user authentication state and crea
 
 ---
 
+## Entry 9
+
+# Date/Time:
+2025-09-16 16:00
+
+# Tool:
+GitHub Copilot (model: Claude Sonnet 4)
+
+# Prompt/Command:
+Configure Nginx reverse proxy for PeerPrep frontend and user service with proper routing, CORS handling, and Next.js client-side navigation support.
+
+# Output Summary:
+- Configured Nginx API gateway for frontend and user service routing
+- Fixed Docker networking issues for login redirects
+- Enhanced API configuration for server-side vs client-side calls
+
+# Action Taken:
+- [x] Accepted as-is
+- [ ] Modified
+- [ ] Rejected
+
+# Author Notes:
+- Validated correctness, security, and performance of the configuration
+
+---
+
+## Entry 10
+
+# Date/Time:
+2025-09-16 16:30
+
+# Tool:
+GitHub Copilot (model: Claude Sonnet 4)
+
+# Prompt/Command:
+Fix Docker networking bug where middleware (server-side) and browser (client-side) need different API endpoints for same service.
+
+# Output Summary:
+- Added dynamic axios client creation to handle different execution contexts
+- Implemented separate URLs for server-side (http://user-service:4000) and client-side (http://localhost/api) calls
+- Fixed middleware token verification failing due to incorrect API endpoint routing
+- Added comprehensive documentation explaining the Docker networking solution
+
+# Action Taken:
+- [x] Accepted as-is
+- [ ] Modified
+- [ ] Rejected
+
+# Author Notes:
+- Validated dynamic client creation approach fixes Docker container-to-container communication issues
+- Confirmed solution maintains proper API gateway routing for browser requests
+
+---
+
 

api-gateway/default.conf

@@ -1,3 +1,8 @@
+# AI Assistance Disclosure:
+# Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+# Purpose: To configure Nginx reverse proxy for PeerPrep frontend and user service with proper routing, CORS handling, and Next.js client-side navigation support.
+# Author Review: I validated correctness, security, and performance of the configuration.
+
 server {
     listen       80;
     listen  [::]:80;
@@ -17,6 +22,38 @@ server {
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
+        
+        # Next.js specific headers for proper routing
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Server $host;
+        proxy_redirect off;
+        
+        # Ensure proper handling of Next.js routes
+        try_files $uri $uri/ @nextjs;
+    }
+    
+    # Fallback for Next.js client-side routing
+    location @nextjs {
+        proxy_pass http://frontend:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Server $host;
+    }
+
+    # Next.js static files and assets
+    location /_next/ {
+        proxy_pass http://frontend:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # Cache static assets
+        expires 1y;
+        add_header Cache-Control "public, immutable";
     }
 
     # User Service API
@@ -58,13 +95,13 @@ server {
     }
 
     # MongoDB Express Admin Interface (if localdb profile is used)
-    location /admin/ {
-        proxy_pass http://mongo-express:8081/;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
+    # location /admin/ {
+    #     proxy_pass http://mongo-express:8081/;
+    #     proxy_set_header Host $host;
+    #     proxy_set_header X-Real-IP $remote_addr;
+    #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    #     proxy_set_header X-Forwarded-Proto $scheme;
+    # }
 
     # Health check endpoint
     location /health {

docker-compose.yml

@@ -51,6 +51,8 @@ services:
     environment:
       - NODE_ENV=production # Set Node.js to production mode
 
+  ### NOTE: LOCAL DATABASE SERVICES YET TO BE TESTED BY ME DO NOT USE YET ###
+
   # MongoDB Database for User Services
   mongodb-user-services:
     image: mongo:7.0.12

frontend/src/app/components/auth/LoginComponent.tsx

@@ -67,12 +67,11 @@ export default function LoginForm() {
         response.data
       );
 
-      // Redirect after short delay
+      // Use router.replace instead of push for better Docker/Nginx compatibility
       setTimeout(() => {
-        // clear the toast
         toast.dismiss();
-        router.push("/home");
-      }, 500);
+        router.replace("/home");
+      }, 1000);
 
     } catch (error) {
       console.error('Login error details:', error);

frontend/src/services/userServiceApi.ts

@@ -1,3 +1,10 @@
+/**
+ * AI Assistance Disclosure:
+ * Tool: GitHub Copilot (model: Claude Sonnet 4), date: 2025-09-16
+ * Purpose: To fix Docker networking bug where middleware (server-side) and browser (client-side) need different API endpoints for same service.
+ * Author Review: I validated correctness, security, and performance of the dynamic client creation approach.
+ */
+
 // API Configuration for PeerPrep Frontend
 // Based on docker-compose.yml configuration with API Gateway
 import axios from 'axios';
@@ -16,19 +23,58 @@ export interface ApiResponse<T = unknown> {
   data?: T;
 }
 
-// Base URL - All API calls go through the API Gateway on port 80
-const BASE_URL = process.env.NODE_ENV === 'production' 
-  ? 'http://localhost/api'        // Through API Gateway (Docker)
-  : 'http://localhost:4000';  // Direct to user-service (Local dev)
+/**
+ * Dynamic Base URL Detection
+ * 
+ * This function determines the correct API endpoint based on execution context:
+ * - Server-side (middleware): Direct container-to-container communication
+ * - Client-side (browser): Through API Gateway proxy
+ * 
+ * This fixes a Docker networking bug where the same code runs in different environments
+ * and needs different URLs to reach the same service.
+ */
+const getBaseURL = () => {
+  // Check if we're running server-side (middleware) or client-side (browser)
+  const isServerSide = typeof window === 'undefined';
+  
+  if (process.env.NODE_ENV === 'production') {
+    if (isServerSide) {
+      // Server-side: Direct call to user-service container
+      // This bypasses the API gateway for internal Docker networking
+      return 'http://user-service:4000';
+    } else {
+      // Client-side: Through API Gateway
+      // Browser requests go through the nginx proxy on localhost
+      return 'http://localhost/api';
+    }
+  } else {
+    // Development: Direct to user-service (no Docker containers)
+    return 'http://localhost:4000';
+  }
+};
 
-// Create axios instance with base configuration
-const apiClient = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-  timeout: 10000, // 10 seconds timeout
-});
+/**
+ * Dynamic Axios Client Creation
+ * 
+ * We create a new axios instance for each request instead of using a module-level singleton.
+ * This is necessary because:
+ * 
+ * 1. The same module code runs in both server-side (middleware) and client-side (browser) contexts
+ * 2. Each context needs a different base URL to reach the user service
+ * 3. A singleton axios instance would "freeze" the URL from the first context that loads it
+ * 4. Dynamic creation ensures getBaseURL() runs fresh for each request context
+ * 
+ * This fixes the Docker networking bug where middleware couldn't reach the user service.
+ */
+const createApiClient = () => {
+  return axios.create({
+    baseURL: getBaseURL(), // Fresh URL calculation for current execution context
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    timeout: 10000, // 10 seconds timeout
+  });
+};
 
 // API Endpoints
 const API_ENDPOINTS = {
@@ -44,6 +90,7 @@ const API_ENDPOINTS = {
  */
 const verifyToken = async (token: string) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.get(`${API_ENDPOINTS.AUTH_SERVICE}/verify-token`, {
       headers: {
         'Authorization': `Bearer ${token}`
@@ -64,6 +111,7 @@ const verifyToken = async (token: string) => {
  */
 const login = async (email: string, password: string) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.post(`${API_ENDPOINTS.AUTH_SERVICE}/login`, {
       email,
       password
@@ -84,6 +132,7 @@ const login = async (email: string, password: string) => {
  */
 const signup = async (username: string, email: string, password: string) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.post(`${API_ENDPOINTS.USER_SERVICE}/`, {
       username,
       email,