feat: Add authentication system to secure the application

- Implement session-based authentication with SQLite database
- Add user management tables (users, sessions) to database schema
- Create authentication API endpoints (/api/auth/login, /logout, /me, /setup)
- Add login and initial setup pages with proper UI
- Implement AuthProvider context for global authentication state
- Add ProtectedRoute component to secure main application
- Include logout functionality in the UI
- Support bcrypt password hashing for secure storage
- Implement 24-hour session expiration
- Add automatic redirect to login for unauthenticated users

This authentication system ensures the application can be safely exposed
to the internet by requiring users to log in before accessing any
Proxmox script management functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: root

middleware.ts

@@ -0,0 +1,78 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { getDatabase } from './src/server/database';
+
+// Paths that don't require authentication
+const publicPaths = [
+  '/api/auth/login',
+  '/api/auth/setup',
+  '/login',
+  '/setup',
+  '/_next',
+  '/favicon',
+  '/favicon.ico',
+  '/favicon.png'
+];
+
+// Paths that should redirect to setup if no users exist
+const protectedPaths = [
+  '/',
+  '/api/servers',
+  '/api/trpc'
+];
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Allow public paths
+  if (publicPaths.some(path => pathname.startsWith(path))) {
+    return NextResponse.next();
+  }
+
+  try {
+    const db = getDatabase();
+
+    // Check if this is a first-time setup (no admin user exists)
+    const adminUser = db.getUserByUsername('admin');
+    if (!adminUser && protectedPaths.some(path => pathname.startsWith(path))) {
+      // Redirect to setup page
+      return NextResponse.redirect(new URL('/setup', request.url));
+    }
+
+    // Check for valid session
+    const sessionId = request.cookies.get('session')?.value;
+    if (!sessionId) {
+      // Redirect to login
+      return NextResponse.redirect(new URL('/login', request.url));
+    }
+
+    const session = db.getSession(sessionId);
+    if (!session) {
+      // Invalid session, redirect to login
+      const response = NextResponse.redirect(new URL('/login', request.url));
+      response.cookies.delete('session');
+      return response;
+    }
+
+    // Valid session, allow access
+    return NextResponse.next();
+
+  } catch (error) {
+    console.error('Middleware error:', error);
+    // On error, redirect to login
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api/auth (authentication routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    '/((?!api/auth|_next/static|_next/image|favicon.ico).*)',
+  ],
+};

package-lock.json

@@ -32,6 +32,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
+    "bcryptjs": "^3.0.2",
     "better-sqlite3": "^9.6.0",
     "next": "^15.5.3",
     "node-pty": "^1.0.0",
@@ -42,6 +43,7 @@
     "server-only": "^0.0.1",
     "strip-ansi": "^7.1.2",
     "superjson": "^2.2.1",
+    "uuid": "^13.0.0",
     "ws": "^8.18.3",
     "zod": "^3.24.2"
   },
@@ -51,10 +53,12 @@
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/bcryptjs": "^2.4.6",
     "@types/better-sqlite3": "^7.6.8",
     "@types/node": "^24.3.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^5.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",

package.json

@@ -0,0 +1,74 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface User {
+  id: number;
+  username: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isLoading: boolean;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    // Check authentication status on mount
+    const checkAuth = async () => {
+      try {
+        const response = await fetch('/api/auth/me');
+        if (response.ok) {
+          const data = await response.json() as { user: User };
+          setUser(data.user);
+        } else {
+          setUser(null);
+        }
+      } catch {
+        setUser(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void checkAuth();
+  }, []);
+
+  const logout = async () => {
+    try {
+      await fetch('/api/auth/logout', { method: 'POST' });
+      setUser(null);
+      router.push('/login');
+    } catch {
+      // Even if logout request fails, clear user state and redirect
+      setUser(null);
+      router.push('/login');
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

src/app/_components/AuthProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export function LogoutButton() {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/logout', {
+        method: 'POST',
+      });
+
+      if (response.ok) {
+        // Redirect to login page
+        router.push('/login');
+        router.refresh();
+      } else {
+        console.error('Logout failed');
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleLogout}
+      disabled={isLoading}
+      className="inline-flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 disabled:opacity-50"
+      title="Sign out"
+    >
+      <svg
+        className="w-5 h-5 mr-2"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+        />
+      </svg>
+      {isLoading ? 'Signing out...' : 'Sign out'}
+    </button>
+  );
+}

src/app/_components/LogoutButton.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useEffect, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from './AuthProvider';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !user) {
+      router.push('/login');
+    }
+  }, [user, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null; // Will redirect to login
+  }
+
+  return <>{children}</>;
+}