Add admin login/setup screen + Firestore-based backups (no Storage needed)

backend/firebase-config.js

@@ -1,5 +1,4 @@
 import { initializeApp } from "firebase/app";
-import { getStorage } from "firebase/storage";
 import { getFirestore } from "firebase/firestore";
 
 // Default config provided by the user
@@ -14,7 +13,6 @@ const defaultFirebaseConfig = {
 };
 
 const app = initializeApp(defaultFirebaseConfig);
-const storage = getStorage(app);
 const db = getFirestore(app);
 
-export { app, storage, db, defaultFirebaseConfig as firebaseConfig };
+export { app, db, defaultFirebaseConfig as firebaseConfig };

backend/sync-manager.js

@@ -1,106 +1,116 @@
-import { ref, uploadBytes, getDownloadURL, listAll, deleteObject } from "firebase/storage";
-import { storage } from "./firebase-config.js";
+import { doc, getDoc, setDoc, deleteDoc, collection, getDocs } from "firebase/firestore";
+import { db } from "./firebase-config.js";
 import fs from "fs";
 import path from "path";
-import https from "https";
 import AdmZip from "adm-zip";
 
-// Helper: Download a file via https stream to a local path
-function downloadFile(url, destPath) {
-  return new Promise((resolve, reject) => {
-    const file = fs.createWriteStream(destPath);
-    https.get(url, (response) => {
-      if (response.statusCode !== 200) {
-        reject(new Error(`Failed to download: ${response.statusCode}`));
-        return;
-      }
-      response.pipe(file);
-      file.on("finish", () => {
-        file.close();
-        resolve();
-      });
-    }).on("error", (err) => {
-      fs.unlink(destPath, () => {});
-      reject(err);
-    });
-  });
-}
+const CHUNK_SIZE = 900 * 1024; // 900KB per Firestore document chunk (limit is ~1MB)
+const MAX_BACKUPS = 3;
 
-// Compress a directory into a .zip file
-function compressDirectory(sourceDir, outPath) {
-  return new Promise((resolve, reject) => {
-    try {
-      const zip = new AdmZip();
-      zip.addLocalFolder(sourceDir);
-      zip.writeZip(outPath);
-      resolve();
-    } catch (e) {
-      reject(e);
+// Compress a directory into a Buffer
+function compressDirectoryToBuffer(sourceDir) {
+  const zip = new AdmZip();
+  // Add all files except large binaries (playit, java, downloads)
+  const skipNames = ['playit', 'playit.exe', 'downloads', 'tmp'];
+  
+  function addDir(dirPath, zipPath) {
+    const entries = fs.readdirSync(dirPath);
+    for (const entry of entries) {
+      if (skipNames.includes(entry)) continue;
+      const fullPath = path.join(dirPath, entry);
+      const stat = fs.statSync(fullPath);
+      if (stat.isDirectory()) {
+        addDir(fullPath, path.join(zipPath, entry));
+      } else {
+        const content = fs.readFileSync(fullPath);
+        zip.addFile(path.join(zipPath, entry).replace(/\\/g, '/'), content);
+      }
     }
-  });
+  }
+
+  addDir(sourceDir, '');
+  return zip.toBuffer();
 }
 
-// Decompress a .zip file to a directory
-function decompressZip(zipPath, targetDir) {
-  return new Promise((resolve, reject) => {
-    try {
-      if (!fs.existsSync(targetDir)) {
-        fs.mkdirSync(targetDir, { recursive: true });
-      }
-      const zip = new AdmZip(zipPath);
-      zip.extractAllTo(targetDir, true);
-      resolve();
-    } catch (e) {
-      reject(e);
-    }
-  });
+// Decompress a Buffer into a directory
+function decompressBufferToDir(buffer, targetDir) {
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+  const zip = new AdmZip(buffer);
+  zip.extractAllTo(targetDir, true);
 }
 
 /**
- * Backup a Minecraft server folder to Firebase Storage
+ * Backup a Minecraft server folder to Firestore (chunked Base64)
  */
 export async function backupServer(serverId, serverPath, onLog) {
-  if (!fs.existsSync(serverPath)) {
-    onLog(serverId, `[BACKUP] Server path does not exist. Skipping backup.`);
+  if (!fs.existsSync(serverPath) || fs.readdirSync(serverPath).length === 0) {
+    onLog(serverId, `[BACKUP] Server path empty or missing. Skipping backup.`);
     return false;
   }
 
-  const tempZip = path.join("/tmp", `${serverId}-${Date.now()}.zip`);
-  onLog(serverId, `[BACKUP] Compressing server files...`);
-  
   try {
-    // 1. Zip local directory
-    await compressDirectory(serverPath, tempZip);
-    onLog(serverId, `[BACKUP] Compression complete. Size: ${(fs.statSync(tempZip).size / (1024 * 1024)).toFixed(2)} MB`);
+    onLog(serverId, `[BACKUP] Compressing server files...`);
+    const zipBuffer = compressDirectoryToBuffer(serverPath);
+    const sizeMB = (zipBuffer.length / (1024 * 1024)).toFixed(2);
+    onLog(serverId, `[BACKUP] Compression complete. Size: ${sizeMB} MB`);
+
+    if (zipBuffer.length > 50 * 1024 * 1024) {
+      onLog(serverId, `[BACKUP] WARNING: Backup is ${sizeMB}MB. Firestore free tier stores up to ~1GB total. Monitor usage.`);
+    }
 
-    // 2. Upload to Firebase Storage
+    // Convert to Base64 string
+    const base64Data = zipBuffer.toString('base64');
     const timestamp = Date.now();
-    const backupRef = ref(storage, `backups/${serverId}/${timestamp}.zip`);
-    onLog(serverId, `[BACKUP] Uploading backup to Firebase Storage...`);
-    
-    const fileBuffer = fs.readFileSync(tempZip);
-    await uploadBytes(backupRef, fileBuffer, {
-      contentType: "application/zip"
+
+    // Split into chunks
+    const chunks = [];
+    for (let i = 0; i < base64Data.length; i += CHUNK_SIZE) {
+      chunks.push(base64Data.slice(i, i + CHUNK_SIZE));
+    }
+    onLog(serverId, `[BACKUP] Uploading ${chunks.length} chunk(s) to Firestore...`);
+
+    // Store metadata
+    const metaRef = doc(db, `backups/${serverId}/list/${timestamp}`);
+    await setDoc(metaRef, {
+      timestamp,
+      chunkCount: chunks.length,
+      size: zipBuffer.length,
+      createdAt: new Date().toISOString()
     });
+
+    // Store chunks
+    for (let i = 0; i < chunks.length; i++) {
+      const chunkRef = doc(db, `backups/${serverId}/data/${timestamp}_chunk_${i}`);
+      await setDoc(chunkRef, { chunk: chunks[i], index: i, backupId: String(timestamp) });
+    }
+
     onLog(serverId, `[BACKUP] Upload successful!`);
 
-    // 3. Clean up oldest backups (Retention: keep latest 3)
+    // Prune old backups (keep latest MAX_BACKUPS)
     try {
-      onLog(serverId, `[BACKUP] Pruning old backups (Retention limit: 3)...`);
-      const folderRef = ref(storage, `backups/${serverId}`);
-      const listResult = await listAll(folderRef);
-      
-      // Sort items by name (timestamp is the name, so ascending order)
-      const sortedItems = listResult.items.sort((a, b) => a.name.localeCompare(b.name));
-      
-      if (sortedItems.length > 3) {
-        const itemsToDelete = sortedItems.slice(0, sortedItems.length - 3);
-        for (const item of itemsToDelete) {
-          onLog(serverId, `[BACKUP] Deleting expired backup: ${item.name}`);
-          await deleteObject(item);
+      const listRef = collection(db, `backups/${serverId}/list`);
+      const snapshot = await getDocs(listRef);
+      const allBackups = snapshot.docs.map(d => ({ id: d.id, ...d.data() }))
+        .sort((a, b) => a.timestamp - b.timestamp);
+
+      if (allBackups.length > MAX_BACKUPS) {
+        const toDelete = allBackups.slice(0, allBackups.length - MAX_BACKUPS);
+        for (const backup of toDelete) {
+          onLog(serverId, `[BACKUP] Pruning old backup: ${backup.id}`);
+          // Delete all chunks for this backup
+          const dataRef = collection(db, `backups/${serverId}/data`);
+          const dataSnap = await getDocs(dataRef);
+          for (const chunkDoc of dataSnap.docs) {
+            if (chunkDoc.data().backupId === String(backup.timestamp)) {
+              await deleteDoc(chunkDoc.ref);
+            }
+          }
+          await deleteDoc(doc(db, `backups/${serverId}/list/${backup.id}`));
         }
+        onLog(serverId, `[BACKUP] Pruned ${toDelete.length} old backup(s).`);
       }
-      onLog(serverId, `[BACKUP] Backup cleanup completed.`);
     } catch (pruneErr) {
       onLog(serverId, `[BACKUP] Warning: Failed to prune old backups: ${pruneErr.message}`);
     }
@@ -110,64 +120,57 @@ export async function backupServer(serverId, serverPath, onLog) {
     onLog(serverId, `[BACKUP] ERROR: Backup failed: ${err.message}`);
     console.error(err);
     return false;
-  } finally {
-    // Clean up temporary local zip file
-    if (fs.existsSync(tempZip)) {
-      try {
-        fs.unlinkSync(tempZip);
-      } catch (e) {}
-    }
   }
 }
 
 /**
- * Restore a Minecraft server folder from Firebase Storage
+ * Restore a Minecraft server folder from Firestore
  */
 export async function restoreServer(serverId, serverPath, onLog) {
-  const folderRef = ref(storage, `backups/${serverId}`);
-  onLog(serverId, `[RESTORE] Checking for backups in Firebase Storage...`);
-
   try {
-    const listResult = await listAll(folderRef);
-    if (listResult.items.length === 0) {
-      onLog(serverId, `[RESTORE] No backups found in Firebase Storage. Will start with a clean server.`);
+    onLog(serverId, `[RESTORE] Checking for backups in Firestore...`);
+    const listRef = collection(db, `backups/${serverId}/list`);
+    const snapshot = await getDocs(listRef);
+
+    if (snapshot.empty) {
+      onLog(serverId, `[RESTORE] No backups found in Firestore. Starting fresh.`);
       return false;
     }
 
-    // Sort items by name (timestamp) and get the latest
-    const sortedItems = listResult.items.sort((a, b) => a.name.localeCompare(b.name));
-    const latestItem = sortedItems[sortedItems.length - 1];
-    
-    onLog(serverId, `[RESTORE] Found latest backup: ${latestItem.name}. Downloading...`);
-    const downloadUrl = await getDownloadURL(latestItem);
+    const allBackups = snapshot.docs.map(d => ({ id: d.id, ...d.data() }))
+      .sort((a, b) => a.timestamp - b.timestamp);
+    const latest = allBackups[allBackups.length - 1];
+    onLog(serverId, `[RESTORE] Found backup from ${new Date(latest.timestamp).toLocaleString()} (${latest.chunkCount} chunk(s)).`);
 
-    const tempZip = path.join("/tmp", `${serverId}-restore.zip`);
-    await downloadFile(downloadUrl, tempZip);
-    onLog(serverId, `[RESTORE] Download complete. Extracting files...`);
+    // Fetch all chunks
+    const dataRef = collection(db, `backups/${serverId}/data`);
+    const dataSnap = await getDocs(dataRef);
+    const chunks = dataSnap.docs
+      .filter(d => d.data().backupId === String(latest.timestamp))
+      .sort((a, b) => a.data().index - b.data().index)
+      .map(d => d.data().chunk);
 
-    // Ensure server path exists and clean it (except maybe playit.toml if we want to preserve local session, but full extract overwrites anyway)
+    onLog(serverId, `[RESTORE] Downloading and assembling ${chunks.length} chunk(s)...`);
+    const base64Data = chunks.join('');
+    const zipBuffer = Buffer.from(base64Data, 'base64');
+
+    // Clean existing files
     if (fs.existsSync(serverPath)) {
-      // Delete existing files to avoid conflicts, keeping directory itself
       const files = fs.readdirSync(serverPath);
       for (const file of files) {
         const filePath = path.join(serverPath, file);
-        if (fs.statSync(filePath).isDirectory()) {
-          fs.rmSync(filePath, { recursive: true, force: true });
-        } else {
-          fs.unlinkSync(filePath);
-        }
+        try {
+          if (fs.statSync(filePath).isDirectory()) {
+            fs.rmSync(filePath, { recursive: true, force: true });
+          } else {
+            fs.unlinkSync(filePath);
+          }
+        } catch (e) {}
       }
-    } else {
-      fs.mkdirSync(serverPath, { recursive: true });
     }
 
-    await decompressZip(tempZip, serverPath);
-    onLog(serverId, `[RESTORE] Server files restored successfully from backup.`);
-    
-    // Clean up local temp zip
-    if (fs.existsSync(tempZip)) {
-      fs.unlinkSync(tempZip);
-    }
+    decompressBufferToDir(zipBuffer, serverPath);
+    onLog(serverId, `[RESTORE] Server files restored successfully from Firestore backup.`);
     return true;
   } catch (err) {
     onLog(serverId, `[RESTORE] ERROR: Restore failed: ${err.message}`);

server.js

@@ -10,6 +10,10 @@ import { processManager } from './backend/process-manager.js';
 import { backupServer, restoreServer } from './backend/sync-manager.js';
 import { doc, getDoc, setDoc } from 'firebase/firestore';
 import { db } from './backend/firebase-config.js';
+import crypto from 'crypto';
+
+const activeSessions = new Set();
+let cachedAuthConfig = null;
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -183,6 +187,48 @@ async function syncToFirestore(servers) {
   }
 }
 
+// Auth Config helpers
+async function getAuthConfig() {
+  if (cachedAuthConfig) return cachedAuthConfig;
+  try {
+    const docRef = doc(db, "config", "auth");
+    const docSnap = await getDoc(docRef);
+    if (docSnap.exists()) {
+      cachedAuthConfig = docSnap.data();
+      return cachedAuthConfig;
+    }
+  } catch (e) {
+    console.error('[AUTH] Failed to fetch auth config from Firestore:', e.message);
+  }
+  return null;
+}
+
+async function saveAuthConfig(passwordHash, salt) {
+  try {
+    const docRef = doc(db, "config", "auth");
+    const configData = { passwordHash, salt };
+    await setDoc(docRef, configData);
+    cachedAuthConfig = configData;
+    console.log('[AUTH] Successfully updated auth config in Firestore.');
+    return true;
+  } catch (e) {
+    console.error('[AUTH] Failed to save auth config to Firestore:', e.message);
+    return false;
+  }
+}
+
+function verifySession(req, res, next) {
+  const authHeader = req.headers.authorization;
+  if (!authHeader || !authHeader.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'Unauthorized. Missing authentication token.' });
+  }
+  const token = authHeader.substring(7);
+  if (!activeSessions.has(token)) {
+    return res.status(401).json({ error: 'Unauthorized. Invalid or expired session.' });
+  }
+  next();
+}
+
 // Helper: load servers
 function getServers() {
   try {
@@ -285,6 +331,74 @@ setInterval(async () => {
 
 // --- REST API Endpoints ---
 
+// --- Public Authentication Routes ---
+
+// GET /api/auth/status
+app.get('/api/auth/status', async (req, res) => {
+  const config = await getAuthConfig();
+  res.json({ setupRequired: !config || !config.passwordHash });
+});
+
+// POST /api/auth/setup
+app.post('/api/auth/setup', async (req, res) => {
+  const { password } = req.body;
+  if (!password || password.length < 6) {
+    return res.status(400).json({ error: 'Password must be at least 6 characters long.' });
+  }
+
+  const config = await getAuthConfig();
+  if (config && config.passwordHash) {
+    return res.status(400).json({ error: 'Setup has already been completed.' });
+  }
+
+  const salt = crypto.randomBytes(16).toString('hex');
+  const hash = crypto.scryptSync(password, salt, 64).toString('hex');
+
+  const success = await saveAuthConfig(hash, salt);
+  if (success) {
+    const token = crypto.randomBytes(32).toString('hex');
+    activeSessions.add(token);
+    res.json({ success: true, token });
+  } else {
+    res.status(500).json({ error: 'Failed to save setup config to Firestore.' });
+  }
+});
+
+// POST /api/auth/login
+app.post('/api/auth/login', async (req, res) => {
+  const { password } = req.body;
+  if (!password) {
+    return res.status(400).json({ error: 'Password is required.' });
+  }
+
+  const config = await getAuthConfig();
+  if (!config || !config.passwordHash) {
+    return res.status(400).json({ error: 'Setup is required first.' });
+  }
+
+  const hash = crypto.scryptSync(password, config.salt, 64).toString('hex');
+  if (hash === config.passwordHash) {
+    const token = crypto.randomBytes(32).toString('hex');
+    activeSessions.add(token);
+    res.json({ success: true, token });
+  } else {
+    res.status(401).json({ error: 'Incorrect password.' });
+  }
+});
+
+// POST /api/auth/logout
+app.post('/api/auth/logout', (req, res) => {
+  const authHeader = req.headers.authorization;
+  if (authHeader && authHeader.startsWith('Bearer ')) {
+    const token = authHeader.substring(7);
+    activeSessions.delete(token);
+  }
+  res.json({ success: true });
+});
+
+// Apply session verification middleware for all server management API routes
+app.use('/api/servers', verifySession);
+
 // GET /api/servers
 app.get('/api/servers', async (req, res) => {
   const servers = getServers();
@@ -985,7 +1099,19 @@ app.post('/api/servers/:id/modrinth/uninstall', (req, res) => {
 });
 
 // --- WebSocket Gateway Connection Handler ---
-wss.on('connection', (ws) => {
+wss.on('connection', (ws, req) => {
+  try {
+    const parsedUrl = new URL(req.url, 'http://localhost');
+    const token = parsedUrl.searchParams.get('token');
+    if (!token || !activeSessions.has(token)) {
+      ws.close(4001, 'Unauthorized');
+      return;
+    }
+  } catch (e) {
+    ws.close(4000, 'Invalid Request');
+    return;
+  }
+
   // Client messages
   ws.on('message', (messageText) => {
     try {

src/App.tsx

@@ -27,7 +27,13 @@ import {
   Download,
   Trash2,
   CheckCircle2,
-  HardDrive
+  HardDrive,
+  Lock,
+  LogOut,
+  KeyRound,
+  Eye,
+  EyeOff,
+  ServerCrash
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 
@@ -85,7 +91,177 @@ const WS_BASE = window.location.port === '3000'
   ? 'ws://localhost:3001'
   : `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}`;
 
+// --- Auth Helper ---
+function getToken() { return localStorage.getItem('mc_panel_token') || ''; }
+function setToken(t: string) { localStorage.setItem('mc_panel_token', t); }
+function clearToken() { localStorage.removeItem('mc_panel_token'); }
+function authHeaders(): Record<string, string> {
+  const t = getToken();
+  return t ? { 'Content-Type': 'application/json', 'Authorization': `Bearer ${t}` } : { 'Content-Type': 'application/json' };
+}
+function authFetch(url: string, opts: RequestInit = {}) {
+  const t = getToken();
+  const headers: Record<string, string> = { 'Content-Type': 'application/json', ...(opts.headers as Record<string, string> || {}) };
+  if (t) headers['Authorization'] = `Bearer ${t}`;
+  return fetch(url, { ...opts, headers });
+}
+
+// --- Login Screen Component ---
+function AuthScreen({ onAuth }: { onAuth: () => void }) {
+  const [mode, setMode] = useState<'checking' | 'login' | 'setup'>('checking');
+  const [password, setPassword] = useState('');
+  const [confirmPwd, setConfirmPwd] = useState('');
+  const [showPwd, setShowPwd] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetch(`${API_BASE}/api/auth/status`)
+      .then(r => r.json())
+      .then(data => setMode(data.setupRequired ? 'setup' : 'login'))
+      .catch(() => setMode('login'));
+  }, []);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    if (mode === 'setup' && password !== confirmPwd) {
+      setError('Passwords do not match.');
+      return;
+    }
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters.');
+      return;
+    }
+    setLoading(true);
+    try {
+      const endpoint = mode === 'setup' ? '/api/auth/setup' : '/api/auth/login';
+      const res = await fetch(`${API_BASE}${endpoint}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password })
+      });
+      const data = await res.json();
+      if (res.ok && data.token) {
+        setToken(data.token);
+        onAuth();
+      } else {
+        setError(data.error || 'Authentication failed.');
+      }
+    } catch (e) {
+      setError('Failed to connect to server. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (mode === 'checking') {
+    return (
+      <div className="flex h-screen bg-[#09090b] items-center justify-center">
+        <div className="w-8 h-8 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-[#09090b] items-center justify-center relative overflow-hidden">
+      {/* Background grid */}
+      <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle at 25% 50%, rgba(16,185,129,0.06) 0%, transparent 50%), radial-gradient(circle at 75% 20%, rgba(99,102,241,0.06) 0%, transparent 50%)' }} />
+      <div className="absolute inset-0" style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
+      
+      <div className="relative z-10 w-full max-w-md px-6">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 mb-4">
+            <ServerCrash className="w-8 h-8 text-emerald-400" />
+          </div>
+          <h1 className="text-3xl font-bold text-white tracking-tight">MC Hoster</h1>
+          <p className="text-zinc-400 mt-1 text-sm">Minecraft Server Management Panel</p>
+        </div>
+
+        {/* Card */}
+        <div className="bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 rounded-2xl p-8 shadow-2xl">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-9 h-9 rounded-xl bg-zinc-800 flex items-center justify-center">
+              {mode === 'setup' ? <KeyRound className="w-4 h-4 text-amber-400" /> : <Lock className="w-4 h-4 text-emerald-400" />}
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-white">
+                {mode === 'setup' ? 'Create Admin Password' : 'Admin Login'}
+              </h2>
+              <p className="text-xs text-zinc-500">
+                {mode === 'setup' ? 'First time setup — set your secure password' : 'Enter your admin password to continue'}
+              </p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-zinc-400 mb-1.5">Password</label>
+              <div className="relative">
+                <input
+                  type={showPwd ? 'text' : 'password'}
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder="Enter password..."
+                  className="w-full bg-zinc-800/80 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/30 transition-all pr-10"
+                  required
+                  autoFocus
+                />
+                <button type="button" onClick={() => setShowPwd(p => !p)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300">
+                  {showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              </div>
+            </div>
+
+            {mode === 'setup' && (
+              <div>
+                <label className="block text-xs font-medium text-zinc-400 mb-1.5">Confirm Password</label>
+                <input
+                  type={showPwd ? 'text' : 'password'}
+                  value={confirmPwd}
+                  onChange={e => setConfirmPwd(e.target.value)}
+                  placeholder="Confirm password..."
+                  className="w-full bg-zinc-800/80 border border-zinc-700 rounded-xl px-4 py-3 text-white placeholder-zinc-500 text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/30 transition-all"
+                  required
+                />
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center gap-2 bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3">
+                <ShieldAlert className="w-4 h-4 text-red-400 shrink-0" />
+                <p className="text-sm text-red-400">{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-black font-semibold text-sm transition-all flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+            >
+              {loading ? (
+                <div className="w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin" />
+              ) : (
+                mode === 'setup' ? <><KeyRound className="w-4 h-4" /> Set Password & Enter</> : <><Lock className="w-4 h-4" /> Login</>
+              )}
+            </button>
+          </form>
+
+          {mode === 'setup' && (
+            <p className="text-center text-xs text-zinc-600 mt-4">
+              Password is hashed securely and stored in Firestore.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [activeTab, setActiveTab] = useState<Tab>('dashboard');
   const [servers, setServers] = useState<ServerInstance[]>([]);
   const [currentServerId, setCurrentServerId] = useState<string | null>(null);
@@ -104,10 +280,27 @@ export default function App() {
   const consoleEndRef = useRef<HTMLDivElement>(null);
   const wsRef = useRef<WebSocket | null>(null);
 
+  // Check if already authenticated on mount
+  useEffect(() => {
+    const token = getToken();
+    if (!token) { setIsAuthenticated(false); return; }
+    // Verify token is still valid
+    fetch(`${API_BASE}/api/servers`, { headers: { 'Authorization': `Bearer ${token}` } })
+      .then(r => { setIsAuthenticated(r.status !== 401); })
+      .catch(() => setIsAuthenticated(false));
+  }, []);
+
+  const handleLogout = async () => {
+    await authFetch(`${API_BASE}/api/auth/logout`, { method: 'POST' });
+    clearToken();
+    setIsAuthenticated(false);
+  };
+
   // Fetch servers from API
   const fetchServers = async (selectNewId?: string) => {
     try {
-      const res = await fetch(`${API_BASE}/api/servers`);
+      const res = await authFetch(`${API_BASE}/api/servers`);
+      if (res.status === 401) { clearToken(); setIsAuthenticated(false); return; }
       if (res.ok) {
         const data = await res.json();
         setServers(data);
@@ -128,8 +321,8 @@ export default function App() {
   };
 
   useEffect(() => {
-    fetchServers();
-  }, []);
+    if (isAuthenticated) fetchServers();
+  }, [isAuthenticated]);
 
   // Sync state if active server changes
   const activeServer = servers.find((s) => s.id === currentServerId);
@@ -154,7 +347,8 @@ export default function App() {
 
     setLogs([]);
 
-    const ws = new WebSocket(WS_BASE);
+    const token = getToken();
+    const ws = new WebSocket(`${WS_BASE}${WS_BASE.includes('?') ? '&' : '?'}token=${token}`);
     wsRef.current = ws;
 
     ws.onopen = () => {
@@ -208,7 +402,7 @@ export default function App() {
     if (!currentServerId) return;
     setStatus('starting');
     try {
-      await fetch(`${API_BASE}/api/servers/${currentServerId}/start`, { method: 'POST' });
+      await authFetch(`${API_BASE}/api/servers/${currentServerId}/start`, { method: 'POST' });
       fetchServers();
     } catch (e) {
       console.error(e);
@@ -219,7 +413,7 @@ export default function App() {
     if (!currentServerId) return;
     setStatus('stopping');
     try {
-      await fetch(`${API_BASE}/api/servers/${currentServerId}/stop`, { method: 'POST' });
+      await authFetch(`${API_BASE}/api/servers/${currentServerId}/stop`, { method: 'POST' });
       fetchServers();
     } catch (e) {
       console.error(e);
@@ -230,7 +424,7 @@ export default function App() {
     if (!currentServerId) return;
     setStatus('starting');
     try {
-      await fetch(`${API_BASE}/api/servers/${currentServerId}/restart`, { method: 'POST' });
+      await authFetch(`${API_BASE}/api/servers/${currentServerId}/restart`, { method: 'POST' });
       fetchServers();
     } catch (e) {
       console.error(e);
@@ -242,7 +436,7 @@ export default function App() {
     if (!confirm('Are you sure you want to delete this server instance permanently? This will erase all server files!')) return;
     
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${currentServerId}`, { method: 'DELETE' });
+      const res = await authFetch(`${API_BASE}/api/servers/${currentServerId}`, { method: 'DELETE' });
       if (res.ok) {
         fetchServers();
       } else {
@@ -257,9 +451,8 @@ export default function App() {
   const handleUpdateSettings = async (settings: { customAddress: string }) => {
     if (!currentServerId) return;
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${currentServerId}/settings`, {
+      const res = await authFetch(`${API_BASE}/api/servers/${currentServerId}/settings`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(settings)
       });
       if (res.ok) {
@@ -276,9 +469,8 @@ export default function App() {
   const handleSaveHeaderAddr = async () => {
     if (!currentServerId) return;
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${currentServerId}/settings`, {
+      const res = await authFetch(`${API_BASE}/api/servers/${currentServerId}/settings`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ customAddress: headerAddrInput })
       });
       if (res.ok) {
@@ -293,6 +485,20 @@ export default function App() {
     }
   };
 
+  // Show loading spinner while auth state unknown
+  if (isAuthenticated === null) {
+    return (
+      <div className="flex h-screen bg-[#09090b] items-center justify-center">
+        <div className="w-8 h-8 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  // Show auth screen if not logged in
+  if (!isAuthenticated) {
+    return <AuthScreen onAuth={() => setIsAuthenticated(true)} />;
+  }
+
   return (
     <div className="flex h-screen bg-[#09090b] text-zinc-100 font-sans selection:bg-emerald-500/30">
       {/* Sidebar */}
@@ -350,7 +556,7 @@ export default function App() {
             active={activeTab === 'properties'} 
             onClick={() => setActiveTab('properties')} 
           />
-          <div className="mt-4 p-3 bg-zinc-900/50 rounded-xl border border-zinc-800">
+          <div className="mt-3 p-3 bg-zinc-900/50 rounded-xl border border-zinc-800">
             <div className="flex items-center justify-between text-xs text-zinc-500 mb-2">
               <span>Node: Localhost</span>
               <span className="text-emerald-500">Active</span>
@@ -359,9 +565,21 @@ export default function App() {
               <div className="h-full bg-emerald-500 w-full rounded-full" />
             </div>
           </div>
+          <div className="mt-2 p-2.5 bg-blue-500/5 rounded-xl border border-blue-500/20 text-[10px] text-blue-400 flex items-center gap-2">
+            <Database className="w-3 h-3 shrink-0" />
+            <span>Firestore Backups Active</span>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="mt-3 w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-all text-sm"
+          >
+            <LogOut className="w-4 h-4" />
+            <span>Logout</span>
+          </button>
         </div>
       </aside>
 
+
       {/* Main Content */}
       <main className="flex-1 flex flex-col overflow-hidden relative">
         {/* Status Header */}
@@ -1011,9 +1229,9 @@ function PlayersComponent({ serverId, onlinePlayers, executeCommand }: { serverI
     setSyncing(true);
     addLog(`[SYSTEM] Manual Firebase cloud backup triggered...`);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${server.id}/backup`, { method: 'POST' });
+      const res = await authFetch(`${API_BASE}/api/servers/${server.id}/backup`, { method: 'POST' });
       if (res.ok) {
-        addLog(`[SYSTEM] Manual backup successfully uploaded to Firebase Storage.`);
+        addLog(`[SYSTEM] Manual backup successfully uploaded to Firestore.`);
         alert('Backup created successfully on Firebase Storage!');
       } else {
         const err = await res.json();
@@ -1041,10 +1259,10 @@ function PlayersComponent({ serverId, onlinePlayers, executeCommand }: { serverI
     setSyncing(true);
     addLog(`[SYSTEM] Manual Firebase cloud restore triggered...`);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${server.id}/restore`, { method: 'POST' });
+      const res = await authFetch(`${API_BASE}/api/servers/${server.id}/restore`, { method: 'POST' });
       if (res.ok) {
         addLog(`[SYSTEM] Manual restore successfully completed.`);
-        alert('Server files restored successfully from latest Firebase backup!');
+        alert('Server files restored successfully from latest Firestore backup!');
       } else {
         const err = await res.json();
         addLog(`[SYSTEM] Restore failed: ${err.error}`);
@@ -1062,7 +1280,7 @@ function PlayersComponent({ serverId, onlinePlayers, executeCommand }: { serverI
     setSyncing(true);
     addLog(`[SYSTEM] Triggering git pull updates manually...`);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${server.id}/git/pull`, { method: 'POST' });
+      const res = await authFetch(`${API_BASE}/api/servers/${server.id}/git/pull`, { method: 'POST' });
       if (res.ok) {
         alert('Git pull completed successfully.');
       } else {
@@ -1080,7 +1298,7 @@ function PlayersComponent({ serverId, onlinePlayers, executeCommand }: { serverI
     setSyncing(true);
     addLog(`[SYSTEM] Triggering git backup push manually...`);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${server.id}/git/push`, { method: 'POST' });
+      const res = await authFetch(`${API_BASE}/api/servers/${server.id}/git/push`, { method: 'POST' });
       if (res.ok) {
         alert('Git push backup completed successfully.');
       } else {
@@ -1251,7 +1469,7 @@ function ServerPropertiesComponent({ server }: { server: ServerInstance }) {
   useEffect(() => {
     const fetchProps = async () => {
       try {
-        const res = await fetch(`${API_BASE}/api/servers/${server.id}/properties`);
+        const res = await authFetch(`${API_BASE}/api/servers/${server.id}/properties`);
         if (res.ok) {
           const data = await res.json();
           setProperties(data);
@@ -1270,9 +1488,8 @@ function ServerPropertiesComponent({ server }: { server: ServerInstance }) {
   const handleSave = async () => {
     setSaving(true);
     try {
-      await fetch(`${API_BASE}/api/servers/${server.id}/properties`, {
+      await authFetch(`${API_BASE}/api/servers/${server.id}/properties`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(properties)
       });
       alert('Properties saved successfully! Please restart the server for changes to take effect.');
@@ -1427,9 +1644,8 @@ function CreateServerWizard({ onCreated }: { onCreated: (newId: string) => void
     }
     setCreating(true);
     try {
-      const res = await fetch(`${API_BASE}/api/servers`, {
+      const res = await authFetch(`${API_BASE}/api/servers`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name,
           software,
@@ -1616,7 +1832,7 @@ function MarketplaceComponent({ serverId }: { serverId: string }) {
 
   const fetchInstalled = async () => {
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${serverId}/modrinth/installed`);
+      const res = await authFetch(`${API_BASE}/api/servers/${serverId}/modrinth/installed`);
       if (res.ok) {
         const data = await res.json();
         setInstalled(data);
@@ -1629,7 +1845,7 @@ function MarketplaceComponent({ serverId }: { serverId: string }) {
   const executeSearch = async () => {
     setLoading(true);
     try {
-      const res = await fetch(`${API_BASE}/api/modrinth/search?query=${encodeURIComponent(query)}&project_type=${projectType}`);
+      const res = await authFetch(`${API_BASE}/api/modrinth/search?query=${encodeURIComponent(query)}&project_type=${projectType}`);
       if (res.ok) {
         const data = await res.json();
         setResults(data);
@@ -1672,9 +1888,8 @@ function MarketplaceComponent({ serverId }: { serverId: string }) {
   const handleInstall = async (project: any) => {
     setInstallingId(project.project_id);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${serverId}/modrinth/install`, {
+      const res = await authFetch(`${API_BASE}/api/servers/${serverId}/modrinth/install`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           projectId: project.project_id,
           projectType: projectType
@@ -1697,9 +1912,8 @@ function MarketplaceComponent({ serverId }: { serverId: string }) {
   const handleUninstall = async (project: any, filename: string) => {
     setInstallingId(project.project_id);
     try {
-      const res = await fetch(`${API_BASE}/api/servers/${serverId}/modrinth/uninstall`, {
+      const res = await authFetch(`${API_BASE}/api/servers/${serverId}/modrinth/uninstall`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           filename,
           projectType: projectType