adding more security to api endpoints to require api token for all access, no by passing

apps/ui/src/components/views/terminal-view.tsx

@@ -46,6 +46,8 @@ import {
   defaultDropAnimationSideEffects,
 } from '@dnd-kit/core';
 import { cn } from '@/lib/utils';
+import { apiFetch, apiGet, apiPost, apiDeleteRaw, getAuthHeaders } from '@/lib/api-fetch';
+import { getApiKey } from '@/lib/http-api-client';
 
 interface TerminalStatus {
   enabled: boolean;
@@ -304,16 +306,13 @@ export function TerminalView() {
     await Promise.allSettled(
       sessionIds.map(async (sessionId) => {
         try {
-          await fetch(`${serverUrl}/api/terminal/sessions/${sessionId}`, {
-            method: 'DELETE',
-            headers,
-          });
+          await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
         } catch (err) {
           console.error(`[Terminal] Failed to kill session ${sessionId}:`, err);
         }
       })
     );
-  }, [collectAllSessionIds, terminalState.authToken, serverUrl]);
+  }, [collectAllSessionIds, terminalState.authToken]);
   const CREATE_COOLDOWN_MS = 500; // Prevent rapid terminal creation
 
   // Helper to check if terminal creation should be debounced
@@ -434,9 +433,10 @@ export function TerminalView() {
     try {
       setLoading(true);
       setError(null);
-      const response = await fetch(`${serverUrl}/api/terminal/status`);
-      const data = await response.json();
-      if (data.success) {
+      const data = await apiGet<{ success: boolean; data?: TerminalStatus; error?: string }>(
+        '/api/terminal/status'
+      );
+      if (data.success && data.data) {
         setStatus(data.data);
         if (!data.data.passwordRequired) {
           setTerminalUnlocked(true);
@@ -450,7 +450,7 @@ export function TerminalView() {
     } finally {
       setLoading(false);
     }
-  }, [serverUrl, setTerminalUnlocked]);
+  }, [setTerminalUnlocked]);
 
   // Fetch server session settings
   const fetchServerSettings = useCallback(async () => {
@@ -460,15 +460,17 @@ export function TerminalView() {
       if (terminalState.authToken) {
         headers['X-Terminal-Token'] = terminalState.authToken;
       }
-      const response = await fetch(`${serverUrl}/api/terminal/settings`, { headers });
-      const data = await response.json();
-      if (data.success) {
+      const data = await apiGet<{
+        success: boolean;
+        data?: { currentSessions: number; maxSessions: number };
+      }>('/api/terminal/settings', { headers });
+      if (data.success && data.data) {
         setServerSessionInfo({ current: data.data.currentSessions, max: data.data.maxSessions });
       }
     } catch (err) {
       console.error('[Terminal] Failed to fetch server settings:', err);
     }
-  }, [serverUrl, terminalState.isUnlocked, terminalState.authToken]);
+  }, [terminalState.isUnlocked, terminalState.authToken]);
 
   useEffect(() => {
     fetchStatus();
@@ -483,22 +485,20 @@ export function TerminalView() {
       const sessionIds = collectAllSessionIds();
       if (sessionIds.length === 0) return;
 
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      };
-      if (terminalState.authToken) {
-        headers['X-Terminal-Token'] = terminalState.authToken;
-      }
-
       // Try to use the bulk delete endpoint if available, otherwise delete individually
-      // Using sendBeacon for reliability during page unload
+      // Using sync XMLHttpRequest for reliability during page unload (async doesn't complete)
       sessionIds.forEach((sessionId) => {
         const url = `${serverUrl}/api/terminal/sessions/${sessionId}`;
-        // sendBeacon doesn't support DELETE method, so we'll use a sync XMLHttpRequest
-        // which is more reliable during page unload than fetch
         try {
           const xhr = new XMLHttpRequest();
           xhr.open('DELETE', url, false); // synchronous
+          xhr.withCredentials = true; // Include cookies for session auth
+          // Add API auth header
+          const apiKey = getApiKey();
+          if (apiKey) {
+            xhr.setRequestHeader('X-API-Key', apiKey);
+          }
+          // Add terminal-specific auth
           if (terminalState.authToken) {
             xhr.setRequestHeader('X-Terminal-Token', terminalState.authToken);
           }
@@ -593,9 +593,7 @@ export function TerminalView() {
       let reconnectedSessions = 0;
 
       try {
-        const headers: Record<string, string> = {
-          'Content-Type': 'application/json',
-        };
+        const headers: Record<string, string> = {};
         // Get fresh auth token from store
         const authToken = useAppStore.getState().terminalState.authToken;
         if (authToken) {
@@ -605,11 +603,9 @@ export function TerminalView() {
         // Helper to check if a session still exists on server
         const checkSessionExists = async (sessionId: string): Promise<boolean> => {
           try {
-            const response = await fetch(`${serverUrl}/api/terminal/sessions/${sessionId}`, {
-              method: 'GET',
+            const data = await apiGet<{ success: boolean }>(`/api/terminal/sessions/${sessionId}`, {
               headers,
             });
-            const data = await response.json();
             return data.success === true;
           } catch {
             return false;
@@ -619,17 +615,12 @@ export function TerminalView() {
         // Helper to create a new terminal session
         const createSession = async (): Promise<string | null> => {
           try {
-            const response = await fetch(`${serverUrl}/api/terminal/sessions`, {
-              method: 'POST',
-              headers,
-              body: JSON.stringify({
-                cwd: currentPath,
-                cols: 80,
-                rows: 24,
-              }),
-            });
-            const data = await response.json();
-            return data.success ? data.data.id : null;
+            const data = await apiPost<{ success: boolean; data?: { id: string } }>(
+              '/api/terminal/sessions',
+              { cwd: currentPath, cols: 80, rows: 24 },
+              { headers }
+            );
+            return data.success && data.data ? data.data.id : null;
           } catch (err) {
             console.error('[Terminal] Failed to create terminal session:', err);
             return null;
@@ -801,14 +792,12 @@ export function TerminalView() {
     setAuthError(null);
 
     try {
-      const response = await fetch(`${serverUrl}/api/terminal/auth`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ password }),
-      });
-      const data = await response.json();
+      const data = await apiPost<{ success: boolean; data?: { token: string }; error?: string }>(
+        '/api/terminal/auth',
+        { password }
+      );
 
-      if (data.success) {
+      if (data.success && data.data) {
         setTerminalUnlocked(true, data.data.token);
         setPassword('');
       } else {
@@ -833,21 +822,14 @@ export function TerminalView() {
     }
 
     try {
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      };
+      const headers: Record<string, string> = {};
       if (terminalState.authToken) {
         headers['X-Terminal-Token'] = terminalState.authToken;
       }
 
-      const response = await fetch(`${serverUrl}/api/terminal/sessions`, {
-        method: 'POST',
+      const response = await apiFetch('/api/terminal/sessions', 'POST', {
         headers,
-        body: JSON.stringify({
-          cwd: currentProject?.path || undefined,
-          cols: 80,
-          rows: 24,
-        }),
+        body: { cwd: currentProject?.path || undefined, cols: 80, rows: 24 },
       });
       const data = await response.json();
 
@@ -892,21 +874,14 @@ export function TerminalView() {
 
     const tabId = addTerminalTab();
     try {
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      };
+      const headers: Record<string, string> = {};
       if (terminalState.authToken) {
         headers['X-Terminal-Token'] = terminalState.authToken;
       }
 
-      const response = await fetch(`${serverUrl}/api/terminal/sessions`, {
-        method: 'POST',
+      const response = await apiFetch('/api/terminal/sessions', 'POST', {
         headers,
-        body: JSON.stringify({
-          cwd: currentProject?.path || undefined,
-          cols: 80,
-          rows: 24,
-        }),
+        body: { cwd: currentProject?.path || undefined, cols: 80, rows: 24 },
       });
       const data = await response.json();
 
@@ -959,10 +934,7 @@ export function TerminalView() {
         headers['X-Terminal-Token'] = terminalState.authToken;
       }
 
-      const response = await fetch(`${serverUrl}/api/terminal/sessions/${sessionId}`, {
-        method: 'DELETE',
-        headers,
-      });
+      const response = await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
 
       // Always remove from UI - even if server says 404 (session may have already exited)
       removeTerminalFromLayout(sessionId);
@@ -1008,10 +980,7 @@ export function TerminalView() {
     await Promise.all(
       sessionIds.map(async (sessionId) => {
         try {
-          await fetch(`${serverUrl}/api/terminal/sessions/${sessionId}`, {
-            method: 'DELETE',
-            headers,
-          });
+          await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
         } catch (err) {
           console.error(`[Terminal] Failed to kill session ${sessionId}:`, err);
         }