🔧 Update Admin Dashboard and Authentication Flow

✅ Updated Admin Dashboard URL:
- Changed the Admin Dashboard access path from `/admin` to `/manage` in multiple files for consistency.

✅ Enhanced Middleware Authentication:
- Updated middleware to protect new admin routes including `/manage` and `/dashboard`.

✅ Implemented CSRF Protection:
- Added CSRF token generation and validation for login and session validation routes.

✅ Introduced Rate Limiting:
- Added rate limiting for admin routes and CSRF token requests to enhance security.

✅ Refactored Admin Page:
- Created a new admin management page with improved authentication handling and user feedback.

🎯 Overall Improvements:
- Strengthened security measures for admin access.
- Improved user experience with clearer navigation and feedback.
- Streamlined authentication processes for better performance.

DEV-SETUP.md

@@ -47,7 +47,7 @@ This starts only the Next.js development server without Docker services. Use thi
 ### 3. Access Services
 
 - **Portfolio**: http://localhost:3000
-- **Admin Dashboard**: http://localhost:3000/admin
+- **Admin Dashboard**: http://localhost:3000/manage
 - **PostgreSQL**: localhost:5432
 - **Redis**: localhost:6379
 
@@ -235,5 +235,5 @@ The production environment uses the production Docker Compose configuration.
 ## 🔗 Links
 
 - **Portfolio**: https://dk0.dev
-- **Admin**: https://dk0.dev/admin
+- **Admin**: https://dk0.dev/manage
 - **GitHub**: https://github.com/denniskonkol/portfolio

README.md

@@ -41,7 +41,7 @@ npm run start        # Production Server
 ## 🌐 URLs
 
 - **Portfolio**: http://localhost:3000
-- **Admin Dashboard**: http://localhost:3000/admin
+- **Admin Dashboard**: http://localhost:3000/manage
 - **PostgreSQL**: localhost:5432
 - **Redis**: localhost:6379
 
@@ -54,5 +54,5 @@ npm run start        # Production Server
 ## 🔗 Links
 
 - **Live Portfolio**: https://dk0.dev
-- **Admin Dashboard**: https://dk0.dev/admin
+- **Admin Dashboard**: https://dk0.dev/manage
 - **GitHub**: https://github.com/denniskonkol/portfolio

app/admin/page.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import ModernAdminDashboard from '@/components/ModernAdminDashboard';
-
-const AdminPage = () => {
-  return <ModernAdminDashboard />;
-};
-
-export default AdminPage;

app/api/analytics/dashboard/route.ts

@@ -1,27 +1,29 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { projectService } from '@/lib/prisma';
 import { analyticsCache } from '@/lib/redis';
+import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 
 export async function GET(request: NextRequest) {
   try {
+    // Rate limiting
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
+      return new NextResponse(
+        JSON.stringify({ error: 'Rate limit exceeded' }), 
+        { 
+          status: 429, 
+          headers: { 
+            'Content-Type': 'application/json',
+            ...getRateLimitHeaders(ip, 5, 60000)
+          } 
+        }
+      );
+    }
+
     // Check admin authentication
-    const authHeader = request.headers.get('authorization');
+    const authError = requireAdminAuth(request);
-    const basicAuth = process.env.ADMIN_BASIC_AUTH;
+    if (authError) {
-    
+      return authError;
-    if (!basicAuth) {
-      return new NextResponse('Admin access not configured', { status: 500 });
-    }
-
-    if (!authHeader || !authHeader.startsWith('Basic ')) {
-      return new NextResponse('Authentication required', { status: 401 });
-    }
-
-    const credentials = authHeader.split(' ')[1];
-    const [username, password] = Buffer.from(credentials, 'base64').toString().split(':');
-    const [expectedUsername, expectedPassword] = basicAuth.split(':');
-
-    if (username !== expectedUsername || password !== expectedPassword) {
-      return new NextResponse('Invalid credentials', { status: 401 });
     }
 
     // Check cache first

app/api/auth/csrf/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Generate CSRF token
+async function generateCSRFToken(): Promise<string> {
+  const crypto = await import('crypto');
+  return crypto.randomBytes(32).toString('hex');
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    // Rate limiting for CSRF token requests
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    const now = Date.now();
+
+    // Simple in-memory rate limiting for CSRF tokens (in production, use Redis)
+    const key = `csrf_${ip}`;
+    const rateLimitMap = (global as any).csrfRateLimit || ((global as any).csrfRateLimit = new Map());
+
+    const current = rateLimitMap.get(key);
+    if (current && now - current.timestamp < 60000) { // 1 minute
+      if (current.count >= 10) {
+        return new NextResponse(
+          JSON.stringify({ error: 'Rate limit exceeded for CSRF tokens' }),
+          { status: 429, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+      current.count++;
+    } else {
+      rateLimitMap.set(key, { count: 1, timestamp: now });
+    }
+
+    const csrfToken = await generateCSRFToken();
+
+    return new NextResponse(
+      JSON.stringify({ csrfToken }),
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Content-Type-Options': 'nosniff',
+          'X-Frame-Options': 'DENY',
+          'X-XSS-Protection': '1; mode=block',
+          'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+          'Pragma': 'no-cache',
+          'Expires': '0'
+        }
+      }
+    );
+  } catch (error) {
+    return new NextResponse(
+      JSON.stringify({ error: 'Internal server error' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

app/api/auth/login/route.ts

@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+
+// Generate CSRF token
+async function generateCSRFToken(): Promise<string> {
+  const crypto = await import('crypto');
+  return crypto.randomBytes(32).toString('hex');
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    // Rate limiting
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    if (!checkRateLimit(ip, 5, 60000)) { // 5 login attempts per minute
+      return new NextResponse(
+        JSON.stringify({ error: 'Rate limit exceeded' }), 
+        { 
+          status: 429, 
+          headers: { 
+            'Content-Type': 'application/json',
+            ...getRateLimitHeaders(ip, 5, 60000)
+          } 
+        }
+      );
+    }
+
+    const { password, csrfToken } = await request.json();
+
+    if (!password) {
+      return new NextResponse(
+        JSON.stringify({ error: 'Password required' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // CSRF Protection
+    const expectedCSRF = request.headers.get('x-csrf-token');
+    if (!csrfToken || !expectedCSRF || csrfToken !== expectedCSRF) {
+      return new NextResponse(
+        JSON.stringify({ error: 'CSRF token validation failed' }),
+        { status: 403, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Get admin credentials from environment
+    const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
+    const [expectedUsername, expectedPassword] = adminAuth.split(':');
+
+    // Secure password comparison
+    if (password === expectedPassword) {
+      // Generate cryptographically secure session token
+      const timestamp = Date.now();
+      const crypto = await import('crypto');
+      const randomBytes = crypto.randomBytes(32);
+      const randomString = randomBytes.toString('hex');
+
+      // Create session data
+      const sessionData = {
+        timestamp,
+        random: randomString,
+        ip: ip,
+        userAgent: request.headers.get('user-agent') || 'unknown'
+      };
+
+      // Encrypt session data
+      const sessionJson = JSON.stringify(sessionData);
+      const sessionToken = btoa(sessionJson);
+
+      return new NextResponse(
+        JSON.stringify({
+          success: true,
+          message: 'Login successful',
+          sessionToken
+        }),
+        {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Content-Type-Options': 'nosniff',
+            'X-Frame-Options': 'DENY',
+            'X-XSS-Protection': '1; mode=block'
+          }
+        }
+      );
+    } else {
+      return new NextResponse(
+        JSON.stringify({ error: 'Invalid password' }), 
+        { status: 401, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  } catch (error) {
+    return new NextResponse(
+      JSON.stringify({ error: 'Internal server error' }), 
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

app/api/auth/validate/route.ts

@@ -0,0 +1,93 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { sessionToken, csrfToken } = await request.json();
+
+    if (!sessionToken) {
+      return new NextResponse(
+        JSON.stringify({ valid: false, error: 'No session token provided' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // CSRF Protection
+    const expectedCSRF = request.headers.get('x-csrf-token');
+    if (!csrfToken || !expectedCSRF || csrfToken !== expectedCSRF) {
+      return new NextResponse(
+        JSON.stringify({ valid: false, error: 'CSRF token validation failed' }),
+        { status: 403, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Decode and validate session token
+    try {
+      const decodedJson = atob(sessionToken);
+      const sessionData = JSON.parse(decodedJson);
+
+      // Validate session data structure
+      if (!sessionData.timestamp || !sessionData.random || !sessionData.ip || !sessionData.userAgent) {
+        return new NextResponse(
+          JSON.stringify({ valid: false, error: 'Invalid session token structure' }),
+          { status: 401, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+
+      // Check if session is still valid (2 hours)
+      const sessionTime = sessionData.timestamp;
+      const now = Date.now();
+      const sessionDuration = 2 * 60 * 60 * 1000; // 2 hours
+
+      if (now - sessionTime > sessionDuration) {
+        return new NextResponse(
+          JSON.stringify({ valid: false, error: 'Session expired' }),
+          { status: 401, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+
+      // Validate IP address (optional, but good security practice)
+      const currentIp = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+      if (sessionData.ip !== currentIp) {
+        // Log potential session hijacking attempt
+        console.warn(`Session IP mismatch: expected ${sessionData.ip}, got ${currentIp}`);
+        return new NextResponse(
+          JSON.stringify({ valid: false, error: 'Session validation failed' }),
+          { status: 401, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+
+      // Validate User-Agent (optional)
+      const currentUserAgent = request.headers.get('user-agent') || 'unknown';
+      if (sessionData.userAgent !== currentUserAgent) {
+        console.warn(`Session User-Agent mismatch`);
+        return new NextResponse(
+          JSON.stringify({ valid: false, error: 'Session validation failed' }),
+          { status: 401, headers: { 'Content-Type': 'application/json' } }
+        );
+      }
+
+      return new NextResponse(
+        JSON.stringify({ valid: true, message: 'Session valid' }),
+        {
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Content-Type-Options': 'nosniff',
+            'X-Frame-Options': 'DENY',
+            'X-XSS-Protection': '1; mode=block'
+          }
+        }
+      );
+    } catch (error) {
+      return new NextResponse(
+        JSON.stringify({ valid: false, error: 'Invalid session token format' }),
+        { status: 401, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  } catch (error) {
+    return new NextResponse(
+      JSON.stringify({ valid: false, error: 'Internal server error' }), 
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+}

app/api/projects/route.ts

@@ -1,9 +1,33 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
+import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 
 export async function GET(request: NextRequest) {
   try {
+    // Rate limiting
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
+      return new NextResponse(
+        JSON.stringify({ error: 'Rate limit exceeded' }), 
+        { 
+          status: 429, 
+          headers: { 
+            'Content-Type': 'application/json',
+            ...getRateLimitHeaders(ip, 10, 60000)
+          } 
+        }
+      );
+    }
+
+    // Check admin authentication for admin endpoints
+    const url = new URL(request.url);
+    if (url.pathname.includes('/manage') || request.headers.get('x-admin-request') === 'true') {
+      const authError = requireAdminAuth(request);
+      if (authError) {
+        return authError;
+      }
+    }
     const { searchParams } = new URL(request.url);
     const page = parseInt(searchParams.get('page') || '1');
     const limit = parseInt(searchParams.get('limit') || '50');

app/manage/page.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  Lock, 
+  Eye, 
+  EyeOff, 
+  Shield, 
+  AlertTriangle, 
+  CheckCircle,
+  XCircle,
+  Loader2
+} from 'lucide-react';
+import ModernAdminDashboard from '@/components/ModernAdminDashboard';
+
+// Security constants
+const MAX_ATTEMPTS = 3;
+const LOCKOUT_DURATION = 15 * 60 * 1000; // 15 minutes
+const SESSION_DURATION = 2 * 60 * 60 * 1000; // 2 hours (reduced from 24h)
+const RATE_LIMIT_DELAY = 1000; // 1 second base delay
+
+// Password hashing removed - now handled server-side securely
+
+// Rate limiting with exponential backoff
+const getRateLimitDelay = (attempts: number): number => {
+  return RATE_LIMIT_DELAY * Math.pow(2, attempts);
+};
+
+interface AuthState {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  showLogin: boolean;
+  password: string;
+  showPassword: boolean;
+  error: string;
+  attempts: number;
+  isLocked: boolean;
+  lastAttempt: number;
+  csrfToken: string;
+}
+
+const AdminPage = () => {
+  const [authState, setAuthState] = useState<AuthState>({
+    isAuthenticated: false,
+    isLoading: true,
+    showLogin: false,
+    password: '',
+    showPassword: false,
+    error: '',
+    attempts: 0,
+    isLocked: false,
+    lastAttempt: 0,
+    csrfToken: ''
+  });
+
+  // Fetch CSRF token
+  const fetchCSRFToken = useCallback(async () => {
+    try {
+      const response = await fetch('/api/auth/csrf');
+      const data = await response.json();
+      if (response.ok && data.csrfToken) {
+        setAuthState(prev => ({ ...prev, csrfToken: data.csrfToken }));
+        return data.csrfToken;
+      }
+    } catch (error) {
+      console.error('Failed to fetch CSRF token:', error);
+    }
+    return '';
+  }, []);
+
+  // Check if user is locked out
+  const checkLockout = useCallback(() => {
+    const lockoutData = localStorage.getItem('admin_lockout');
+    if (lockoutData) {
+      try {
+        const { timestamp, attempts } = JSON.parse(lockoutData);
+        const now = Date.now();
+
+        if (now - timestamp < LOCKOUT_DURATION) {
+          setAuthState(prev => ({
+            ...prev,
+            isLocked: true,
+            attempts,
+            isLoading: false
+          }));
+          return true;
+        } else {
+          localStorage.removeItem('admin_lockout');
+        }
+      } catch (error) {
+        localStorage.removeItem('admin_lockout');
+      }
+    }
+    return false;
+  }, []);
+
+  // Check session validity via API
+  const checkSession = useCallback(async () => {
+    const authStatus = sessionStorage.getItem('admin_authenticated');
+    const sessionToken = sessionStorage.getItem('admin_session_token');
+    
+    if (!authStatus || !sessionToken) {
+      setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
+      return false;
+    }
+
+    try {
+      // Validate session with server
+      const response = await fetch('/api/auth/validate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': authState.csrfToken
+        },
+        body: JSON.stringify({
+          sessionToken,
+          csrfToken: authState.csrfToken
+        })
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.valid) {
+        setAuthState(prev => ({ 
+          ...prev, 
+          isAuthenticated: true, 
+          isLoading: false,
+          showLogin: false 
+        }));
+        return true;
+      } else {
+        // Session invalid, clear storage
+        sessionStorage.clear();
+        setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
+        return false;
+      }
+    } catch (error) {
+      // Network error, clear session
+      sessionStorage.clear();
+      setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
+      return false;
+    }
+  }, []);
+
+  // Initialize authentication check
+  useEffect(() => {
+    const initAuth = async () => {
+      // Add random delay to prevent timing attacks
+      await new Promise(resolve => setTimeout(resolve, Math.random() * 500 + 200));
+
+      // Fetch CSRF token first
+      await fetchCSRFToken();
+
+      if (!checkLockout()) {
+        await checkSession();
+      }
+    };
+
+    initAuth();
+  }, [checkLockout, checkSession, fetchCSRFToken]);
+
+  // Handle login submission
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (authState.isLocked || authState.isLoading) return;
+
+    setAuthState(prev => ({ ...prev, isLoading: true, error: '' }));
+
+    try {
+      // Rate limiting delay
+      const delay = getRateLimitDelay(authState.attempts);
+      await new Promise(resolve => setTimeout(resolve, delay));
+
+      // Send login request to secure API
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': authState.csrfToken
+        },
+        body: JSON.stringify({
+          password: authState.password,
+          csrfToken: authState.csrfToken
+        })
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        // Successful login
+        const now = Date.now();
+        const sessionToken = data.sessionToken;
+        
+        localStorage.removeItem('admin_lockout');
+        sessionStorage.setItem('admin_authenticated', 'true');
+        sessionStorage.setItem('admin_login_time', now.toString());
+        sessionStorage.setItem('admin_session_token', sessionToken);
+        
+        setAuthState(prev => ({
+          ...prev,
+          isAuthenticated: true,
+          showLogin: false,
+          isLoading: false,
+          password: '',
+          attempts: 0,
+          error: ''
+        }));
+      } else {
+        // Failed login
+        const newAttempts = authState.attempts + 1;
+        const newLastAttempt = Date.now();
+        
+        if (newAttempts >= MAX_ATTEMPTS) {
+          // Lock user out
+          localStorage.setItem('admin_lockout', JSON.stringify({
+            timestamp: newLastAttempt,
+            attempts: newAttempts
+          }));
+          
+          setAuthState(prev => ({
+            ...prev,
+            isLocked: true,
+            attempts: newAttempts,
+            lastAttempt: newLastAttempt,
+            isLoading: false,
+            error: `Zu viele fehlgeschlagene Versuche. Zugang für ${Math.ceil(LOCKOUT_DURATION / 60000)} Minuten gesperrt.`
+          }));
+        } else {
+          setAuthState(prev => ({
+            ...prev,
+            attempts: newAttempts,
+            lastAttempt: newLastAttempt,
+            isLoading: false,
+            error: data.error || `Falsches Passwort. ${MAX_ATTEMPTS - newAttempts} Versuche übrig.`,
+            password: ''
+          }));
+        }
+      }
+    } catch (error) {
+      setAuthState(prev => ({
+        ...prev,
+        isLoading: false,
+        error: 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.'
+      }));
+    }
+  };
+
+  // Handle logout
+  const handleLogout = () => {
+    sessionStorage.clear();
+    setAuthState(prev => ({
+      ...prev,
+      isAuthenticated: false,
+      showLogin: true,
+      password: '',
+      error: ''
+    }));
+  };
+
+  // Get remaining lockout time
+  const getRemainingTime = () => {
+    const lockoutData = localStorage.getItem('admin_lockout');
+    if (lockoutData) {
+      try {
+        const { timestamp } = JSON.parse(lockoutData);
+        const remaining = Math.ceil((LOCKOUT_DURATION - (Date.now() - timestamp)) / 1000 / 60);
+        return Math.max(0, remaining);
+      } catch {
+        return 0;
+      }
+    }
+    return 0;
+  };
+
+  // Loading state
+  if (authState.isLoading && !authState.showLogin) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="text-center"
+        >
+          <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Loader2 className="w-8 h-8 text-white animate-spin" />
+          </div>
+          <p className="text-white text-lg">Überprüfe Berechtigung...</p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  // Lockout state
+  if (authState.isLocked) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-red-900 via-gray-900 to-red-900 flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="bg-white/10 backdrop-blur-md rounded-2xl border border-red-500/30 p-8 max-w-md w-full text-center"
+        >
+          <div className="mb-6">
+            <Shield className="w-16 h-16 text-red-400 mx-auto mb-4" />
+            <h1 className="text-2xl font-bold text-white mb-2">Zugang gesperrt</h1>
+            <p className="text-gray-300">
+              Zu viele fehlgeschlagene Anmeldeversuche
+            </p>
+          </div>
+          
+          <div className="bg-red-500/20 border border-red-500/30 rounded-lg p-4 mb-6">
+            <AlertTriangle className="w-8 h-8 text-red-400 mx-auto mb-2" />
+            <p className="text-red-200 text-sm">
+              Versuche: {authState.attempts}/{MAX_ATTEMPTS}
+            </p>
+            <p className="text-red-200 text-sm">
+              Verbleibende Zeit: {getRemainingTime()} Minuten
+            </p>
+          </div>
+          
+          <p className="text-gray-400 text-sm">
+            Der Zugang wird automatisch nach {Math.ceil(LOCKOUT_DURATION / 60000)} Minuten freigeschaltet.
+          </p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  // Login form
+  if (authState.showLogin || !authState.isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-8 max-w-md w-full"
+        >
+          <div className="text-center mb-8">
+            <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Lock className="w-8 h-8 text-white" />
+            </div>
+            <h1 className="text-2xl font-bold text-white mb-2">Admin-Zugang</h1>
+            <p className="text-gray-300">Bitte geben Sie das Admin-Passwort ein</p>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-6">
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
+                Passwort
+              </label>
+              <div className="relative">
+                <input
+                  type={authState.showPassword ? 'text' : 'password'}
+                  id="password"
+                  value={authState.password}
+                  onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
+                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all pr-12"
+                  placeholder="Admin-Passwort eingeben"
+                  required
+                  disabled={authState.isLoading}
+                  autoComplete="current-password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
+                  disabled={authState.isLoading}
+                >
+                  {authState.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+            </div>
+
+            <AnimatePresence>
+              {authState.error && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="bg-red-500/20 border border-red-500/30 rounded-lg p-3"
+                >
+                  <p className="text-red-200 text-sm">{authState.error}</p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <button
+              type="submit"
+              disabled={authState.isLoading || !authState.password}
+              className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 disabled:from-gray-600 disabled:to-gray-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 disabled:cursor-not-allowed"
+            >
+              {authState.isLoading ? (
+                <div className="flex items-center justify-center">
+                  <Loader2 className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></Loader2>
+                  Anmeldung...
+                </div>
+              ) : (
+                'Anmelden'
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-gray-400 text-xs">
+              Versuche: {authState.attempts}/{MAX_ATTEMPTS}
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    );
+  }
+
+  // Authenticated state - show admin dashboard
+  return (
+    <div className="relative">
+      {/* Logout button */}
+      <div className="fixed top-4 right-4 z-50">
+        <button
+          onClick={handleLogout}
+          className="bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-200 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2"
+        >
+          <XCircle className="w-4 h-4" />
+          <span>Logout</span>
+        </button>
+      </div>
+      
+      <ModernAdminDashboard isAuthenticated={authState.isAuthenticated} />
+    </div>
+  );
+};
+
+export default AdminPage;

components/AnalyticsDashboard.tsx

@@ -67,15 +67,22 @@ interface PerformanceData {
   topInteractions: Record<string, number>;
 }
 
-export function AnalyticsDashboard() {
+interface AnalyticsDashboardProps {
+  isAuthenticated?: boolean;
+}
+
+export function AnalyticsDashboard({ isAuthenticated = true }: AnalyticsDashboardProps) {
   const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
   const [performanceData, setPerformanceData] = useState<PerformanceData | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetchAnalyticsData();
+    // Only fetch data if authenticated
-  }, []);
+    if (isAuthenticated) {
+      fetchAnalyticsData();
+    }
+  }, [isAuthenticated]);
 
   const fetchAnalyticsData = async () => {
     try {

components/ModernAdminDashboard.tsx

@@ -60,10 +60,14 @@ interface Project {
   };
 }
 
-const ModernAdminDashboard: React.FC = () => {
+interface ModernAdminDashboardProps {
+  isAuthenticated?: boolean;
+}
+
+const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
   const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
   const [projects, setProjects] = useState<Project[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   // Mock stats for overview
   const stats = {
@@ -75,13 +79,20 @@ const ModernAdminDashboard: React.FC = () => {
   };
 
   useEffect(() => {
-    loadProjects();
+    // Only load data if authenticated
-  }, []);
+    if (isAuthenticated) {
+      loadProjects();
+    }
+  }, [isAuthenticated]);
 
   const loadProjects = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch('/api/projects');
+      const response = await fetch('/api/projects', {
+        headers: {
+          'x-admin-request': 'true'
+        }
+      });
       const data = await response.json();
       setProjects(data.projects || []);
     } catch (error) {

docker-compose.prod.yml

@@ -21,6 +21,7 @@ services:
       - portfolio_data:/app/.next/cache
     networks:
       - portfolio_net
+      - proxy
     depends_on:
       postgres:
         condition: service_healthy
@@ -77,3 +78,5 @@ volumes:
 networks:
   portfolio_net:
     external: true
+  proxy:
+    external: true

lib/auth.ts

@@ -0,0 +1,74 @@
+import { NextRequest } from 'next/server';
+
+// Server-side authentication utilities
+export function verifyAdminAuth(request: NextRequest): boolean {
+  // Check for basic auth header
+  const authHeader = request.headers.get('authorization');
+  
+  if (!authHeader || !authHeader.startsWith('Basic ')) {
+    return false;
+  }
+
+  try {
+    const base64Credentials = authHeader.split(' ')[1];
+    const credentials = atob(base64Credentials);
+    const [username, password] = credentials.split(':');
+    
+    // Get admin credentials from environment
+    const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
+    const [expectedUsername, expectedPassword] = adminAuth.split(':');
+    
+    return username === expectedUsername && password === expectedPassword;
+  } catch (error) {
+    return false;
+  }
+}
+
+export function requireAdminAuth(request: NextRequest): Response | null {
+  if (!verifyAdminAuth(request)) {
+    return new Response(
+      JSON.stringify({ error: 'Unauthorized' }), 
+      { 
+        status: 401, 
+        headers: { 
+          'Content-Type': 'application/json',
+          'WWW-Authenticate': 'Basic realm="Admin Access"'
+        } 
+      }
+    );
+  }
+  return null;
+}
+
+// Rate limiting for admin endpoints
+const rateLimitMap = new Map<string, { count: number; resetTime: number }>();
+
+export function checkRateLimit(ip: string, maxRequests: number = 10, windowMs: number = 60000): boolean {
+  const now = Date.now();
+  const key = `admin_${ip}`;
+  
+  const current = rateLimitMap.get(key);
+  
+  if (!current || now > current.resetTime) {
+    rateLimitMap.set(key, { count: 1, resetTime: now + windowMs });
+    return true;
+  }
+  
+  if (current.count >= maxRequests) {
+    return false;
+  }
+  
+  current.count++;
+  return true;
+}
+
+export function getRateLimitHeaders(ip: string, maxRequests: number = 10, windowMs: number = 60000): Record<string, string> {
+  const current = rateLimitMap.get(`admin_${ip}`);
+  const remaining = current ? Math.max(0, maxRequests - current.count) : maxRequests;
+  
+  return {
+    'X-RateLimit-Limit': maxRequests.toString(),
+    'X-RateLimit-Remaining': remaining.toString(),
+    'X-RateLimit-Reset': current ? Math.ceil(current.resetTime / 1000).toString() : Math.ceil((Date.now() + windowMs) / 1000).toString()
+  };
+}

middleware.ts

@@ -2,19 +2,15 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 export function middleware(request: NextRequest) {
-  // Allow email and projects API routes without authentication
-  if (request.nextUrl.pathname.startsWith('/api/email/') || 
-      request.nextUrl.pathname.startsWith('/api/projects/') ||
-      request.nextUrl.pathname.startsWith('/api/analytics/') ||
-      request.nextUrl.pathname.startsWith('/api/health')) {
-    return NextResponse.next();
-  }
-
   // Protect admin routes
-  if (request.nextUrl.pathname.startsWith('/admin')) {
+  if (request.nextUrl.pathname.startsWith('/admin') ||
+      request.nextUrl.pathname.startsWith('/dashboard') ||
+      request.nextUrl.pathname.startsWith('/manage') ||
+      request.nextUrl.pathname.startsWith('/control')) {
+
     const authHeader = request.headers.get('authorization');
     const basicAuth = process.env.ADMIN_BASIC_AUTH;
-    
+
     if (!basicAuth) {
       return new NextResponse('Admin access not configured', { status: 500 });
     }
@@ -51,13 +47,12 @@ export const config = {
     /*
      * Match all request paths except for the ones starting with:
      * - api/email (email API routes)
-     * - api/projects (projects API routes)
-     * - api/analytics (analytics API routes)
      * - api/health (health check)
      * - _next/static (static files)
      * - _next/image (image optimization files)
      * - favicon.ico (favicon file)
+     * - api/auth (auth API routes - need to be processed)
      */
-    '/((?!api/email|api/projects|api/analytics|api/health|_next/static|_next/image|favicon.ico).*)',
+    '/((?!api/email|api/health|_next/static|_next/image|favicon.ico|api/auth).*)',
   ],
 };

nginx.conf

@@ -89,6 +89,31 @@ http {
             add_header X-Cache-Status "STATIC";
         }
 
+        # Admin routes with strict rate limiting and IP restrictions
+            location /manage {
+            limit_req zone=login burst=3 nodelay;
+            
+            # Block common attack patterns
+            if ($http_user_agent ~* (bot|crawler|spider|scraper)) {
+                return 403;
+            }
+            
+            # Add extra security headers for admin
+            add_header X-Frame-Options DENY;
+            add_header X-Content-Type-Options nosniff;
+            add_header X-XSS-Protection "1; mode=block";
+            
+            proxy_pass http://portfolio_backend;
+            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;
+            
+            # No caching for admin routes
+            proxy_cache_bypass 1;
+            proxy_no_cache 1;
+        }
+
         # API routes with rate limiting
         location /api/ {
             limit_req zone=api burst=20 nodelay;