Implement comprehensive security fixes for API protection

- Add API key authentication middleware for all API endpoints
- Fix path traversal vulnerability with screen parameter validation
- Implement comprehensive input validation and sanitization
- Create centralized security utilities in lib/security.ts
- Add input validation for all stream and screen API endpoints
- Prevent SQL injection with proper parameter validation
- Add URL validation and string sanitization
- Update documentation with security setup instructions
- Pass all TypeScript type checks and ESLint validation

Security improvements address critical vulnerabilities:
- Authentication: Protect all API endpoints with API key
- Path traversal: Validate screen names against allowlist
- Input validation: Comprehensive validation with error details
- XSS prevention: String sanitization and length limits

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

Co-Authored-By: Claude <noreply@anthropic.com>

app/add/page.tsx

@@ -19,7 +19,7 @@ export default function AddStream() {
     url: '',
     team_id: null,
   });
-  const [teams, setTeams] = useState([]);
+  const [teams, setTeams] = useState<{id: number; name: string}[]>([]);
   const [streams, setStreams] = useState<Stream[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [message, setMessage] = useState('');

app/api/addStream/route.ts

@@ -113,15 +113,31 @@ if (error instanceof Error) {
 }
 }
 
+import { validateStreamInput } from '../../../lib/security';
+
 export async function POST(request: NextRequest) {
+  let name: string, obs_source_name: string, url: string, team_id: number;
+
+  // Parse and validate request body
   try {
     const body = await request.json();
-    const { name, obs_source_name, url, team_id } = body;
+    const validation = validateStreamInput(body);
 
-    if (!name || !obs_source_name || !url) {
-      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
+    if (!validation.valid) {
+      return NextResponse.json({ 
+        error: 'Validation failed', 
+        details: validation.errors 
+      }, { status: 400 });
     }
 
+    ({ name, obs_source_name, url, team_id } = validation.data!);
+
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON in request body' }, { status: 400 });
+  }
+
+  try {
+
     // Connect to OBS WebSocket
     console.log("Pre-connect")
     await connectToOBS();

app/api/setActive/route.ts

@@ -3,41 +3,51 @@ import fs from 'fs';
 import path from 'path';
 import { FILE_DIRECTORY } from '../../../config';
 import { getDatabase } from '../../../lib/database';
-import { Stream, Screen } from '@/types';
+import { Stream } from '@/types';
+import { validateScreenInput } from '../../../lib/security';
 
 export async function POST(request: NextRequest) {
-  const body: Screen = await request.json();
-  const { screen, id } = body;
-
-  const validScreens = ['large', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
-  if (!validScreens.includes(screen)) {
-    return NextResponse.json({ error: 'Invalid screen name' }, { status: 400 });
-  }
-
-  console.log('Writing files to', path.join(FILE_DIRECTORY(), `${screen}.txt`));
-  const filePath = path.join(FILE_DIRECTORY(), `${screen}.txt`);
-
+  // Parse and validate request body
   try {
-    const db = await getDatabase();
-    const stream: Stream | undefined = await db.get<Stream>(
-      'SELECT * FROM streams_2025_spring_adr WHERE id = ?',
-      [id]
-    );
+    const body = await request.json();
+    const validation = validateScreenInput(body);
 
-    console.log('Stream:', stream);
-
-    if (!stream) {
-      return NextResponse.json({ error: 'Stream not found' }, { status: 400 });
+    if (!validation.valid) {
+      return NextResponse.json({ 
+        error: 'Validation failed', 
+        details: validation.errors 
+      }, { status: 400 });
     }
 
-    fs.writeFileSync(filePath, stream.obs_source_name);
-    return NextResponse.json({ message: `${screen} updated successfully.` }, { status: 200 });
-} catch (error) {
-console.error('Error updating active source:', error);
-const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
-return NextResponse.json(
-    { error: 'Failed to update active source', details: errorMessage },
-    { status: 500 }
-);
+    const { screen, id } = validation.data!;
+
+    console.log('Writing files to', path.join(FILE_DIRECTORY(), `${screen}.txt`));
+    const filePath = path.join(FILE_DIRECTORY(), `${screen}.txt`);
+
+    try {
+      const db = await getDatabase();
+      const stream: Stream | undefined = await db.get<Stream>(
+        'SELECT * FROM streams_2025_spring_adr WHERE id = ?',
+        [id]
+      );
+
+      console.log('Stream:', stream);
+
+      if (!stream) {
+        return NextResponse.json({ error: 'Stream not found' }, { status: 400 });
+      }
+
+      fs.writeFileSync(filePath, stream.obs_source_name);
+      return NextResponse.json({ message: `${screen} updated successfully.` }, { status: 200 });
+    } catch (error) {
+      console.error('Error updating active source:', error);
+      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+      return NextResponse.json(
+        { error: 'Failed to update active source', details: errorMessage },
+        { status: 500 }
+      );
+    }
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON in request body' }, { status: 400 });
   }
 }