studio: username/password login gate — all routes protected

serve.py grows an Auth helper: SHADOWLM_PASSWORD (+ SHADOWLM_USER, default admin)
enables a login that mints HMAC-signed, 12h bearer tokens (key=sha256(password),
no server-side session store, survives restarts, unforgeable without the pw).
New public routes GET /v1/auth (UI asks if login is needed) and POST /v1/login
(credentials -> token); every other /v1 route requires a valid bearer — the
signed token or the legacy SHADOWLM_API_KEY. Auth stays OFF when nothing is set.

Frontend: App splits into a gate -> Login screen -> Studio shell. The token is
stored as the existing slm_api_key bearer, so all api() calls carry it untouched;
a 401 anywhere clears it and bounces back to login. Sign-out button added.

7 Auth unit tests (login, token roundtrip, forgery/tamper/expiry rejection,
legacy api-key, disabled-by-default).

Author: patel-lyzr

frontend/src/App.tsx

@@ -1,10 +1,15 @@
-// The studio shell — cream sidebar, lucide icons, hash router.
+// The studio shell — cream sidebar, lucide icons, hash router, login gate.
 import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
 import {
-  Box, Cpu, Database, ExternalLink, History, LayoutDashboard, MessagesSquare,
+  Box, Cpu, Database, ExternalLink, History, LayoutDashboard, LogOut,
+  MessagesSquare,
 } from "lucide-react";
-import { apiKey, getHealth, getMethods, getSettings, setHfToken } from "./api";
-import type { MethodInfo } from "./api";
+import {
+  apiKey, getAuthInfo, getHealth, getMethods, getSettings, login, logout,
+  setHfToken,
+} from "./api";
+import type { AuthInfo, MethodInfo } from "./api";
 import Dashboard from "./pages/Dashboard";
 import Datasets from "./pages/Datasets";
 import Models from "./pages/Models";
@@ -31,12 +36,115 @@ const NAV = [
   { hash: "runs", label: "Runs", icon: History },
 ] as const;
 
+// ---- the login gate ---------------------------------------------------------
 export default function App() {
+  const [auth, setAuth] = useState<AuthInfo | null>(null);
+  const [token, setToken] = useState(apiKey.get());
+
+  useEffect(() => {
+    getAuthInfo()
+      .then(setAuth)
+      .catch(() => setAuth({ auth_required: false, mode: "none" }));
+  }, []);
+
+  useEffect(() => {
+    const onUnauth = () => setToken("");
+    window.addEventListener("slm-unauthorized", onUnauth);
+    return () => window.removeEventListener("slm-unauthorized", onUnauth);
+  }, []);
+
+  if (auth === null) {
+    return (
+      <div className="min-h-screen grid place-items-center text-sm text-muted-foreground">
+        connecting…
+      </div>
+    );
+  }
+  if (auth.auth_required && !token) {
+    return <Login mode={auth.mode} onAuthed={() => setToken(apiKey.get())} />;
+  }
+  return (
+    <Studio
+      authEnabled={auth.auth_required}
+      onSignOut={() => { logout(); setToken(""); }}
+    />
+  );
+}
+
+function Login({ mode, onAuthed }: { mode: string; onAuthed: () => void }) {
+  const [username, setUsername] = useState("admin");
+  const [password, setPassword] = useState("");
+  const [key, setKey] = useState("");
+  const [err, setErr] = useState("");
+  const [busy, setBusy] = useState(false);
+  const apikeyMode = mode === "apikey";
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setErr("");
+    try {
+      if (apikeyMode) {
+        apiKey.set(key.trim());
+        await getHealth(); // 401 throws → invalid key
+      } else {
+        await login(username.trim(), password);
+      }
+      onAuthed();
+    } catch (e2) {
+      apiKey.clear();
+      setErr(apikeyMode ? "Invalid API key" : (e2 as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen grid place-items-center bg-background px-4">
+      <form onSubmit={submit}
+            className="w-full max-w-xs rounded-xl border border-sidebar-border bg-sidebar p-6 space-y-4">
+        <div className="flex items-center gap-2.5">
+          <img src="/lyzr-mark.png" alt="" className="size-8 rounded-lg" />
+          <div className="leading-tight">
+            <div className="text-sm font-semibold tracking-tight">ShadowLM</div>
+            <div className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
+              Studio
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-muted-foreground">
+          {apikeyMode ? "Enter the API key to continue." : "Sign in to continue."}
+        </div>
+        {apikeyMode ? (
+          <input type="password" autoFocus value={key} placeholder="API key"
+                 className="w-full text-sm"
+                 onChange={(e) => setKey(e.target.value)} />
+        ) : (
+          <>
+            <input type="text" autoFocus value={username} placeholder="Username"
+                   autoComplete="username" className="w-full text-sm"
+                   onChange={(e) => setUsername(e.target.value)} />
+            <input type="password" value={password} placeholder="Password"
+                   autoComplete="current-password" className="w-full text-sm"
+                   onChange={(e) => setPassword(e.target.value)} />
+          </>
+        )}
+        {err && <div className="text-xs text-red-500">{err}</div>}
+        <button type="submit" disabled={busy}
+                className="w-full rounded-md bg-primary text-primary-foreground text-sm py-2 disabled:opacity-50">
+          {busy ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+// ---- the authenticated studio shell ----------------------------------------
+function Studio({ authEnabled, onSignOut }: { authEnabled: boolean; onSignOut: () => void }) {
   const hash = useHash();
   const [section, arg] = hash.split("/");
   const [health, setHealth] = useState("connecting…");
   const [methods, setMethods] = useState<MethodInfo[]>([]);
-  const [key, setKey] = useState(apiKey.get());
   const [hf, setHf] = useState("");
   const [hfSet, setHfSet] = useState(false);
 
@@ -92,10 +200,6 @@ export default function App() {
         </nav>
         <div className="px-3 py-3 border-t border-sidebar-border space-y-2">
           <div className="px-3 text-[10px] font-mono text-muted-foreground">{health}</div>
-          <input type="password" placeholder="API key" value={key}
-                 title="Sent as Bearer auth; stored in this browser only"
-                 className="w-full text-xs"
-                 onChange={(e) => { setKey(e.target.value); apiKey.set(e.target.value); }} />
           <div className="flex gap-1.5">
             <input type="password" value={hf}
                    placeholder={hfSet ? "HF token ✓ set — replace" : "HF token (gated models)"}
@@ -108,6 +212,13 @@ export default function App() {
               save
             </button>
           </div>
+          {authEnabled && (
+            <button onClick={onSignOut}
+                    className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-xs text-muted-foreground hover:bg-sidebar-accent/40 transition-colors">
+              <LogOut className="size-3.5" />
+              <span>Sign out</span>
+            </button>
+          )}
           <a href="https://github.com/open-gitagent/shadowLM" target="_blank" rel="noreferrer"
              className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-xs text-muted-foreground hover:bg-sidebar-accent/40 transition-colors no-underline">
             <ExternalLink className="size-3.5" />

frontend/src/api.ts

@@ -74,20 +74,46 @@ export interface StepMetric {
 export const apiKey = {
   get: () => localStorage.getItem("slm_api_key") || "",
   set: (v: string) => localStorage.setItem("slm_api_key", v),
+  clear: () => localStorage.removeItem("slm_api_key"),
 };
 
 export async function api<T>(path: string, opts: RequestInit = {}): Promise<T> {
   const headers: Record<string, string> = { "Content-Type": "application/json" };
   const key = apiKey.get();
   if (key) headers["Authorization"] = `Bearer ${key}`;
   const r = await fetch(path, { ...opts, headers });
+  if (r.status === 401) {
+    // token missing/expired — drop it and bounce back to the login gate
+    apiKey.clear();
+    window.dispatchEvent(new Event("slm-unauthorized"));
+  }
   if (!r.ok) {
     const detail = await r.json().catch(() => ({} as { error?: string }));
     throw new Error(detail.error || r.statusText);
   }
   return r.json() as Promise<T>;
 }
 
+// ---- auth: login/password gate ---------------------------------------------
+export interface AuthInfo { auth_required: boolean; mode: "password" | "apikey" | "none"; }
+export const getAuthInfo = () =>
+  fetch("/v1/auth").then((r) => r.json() as Promise<AuthInfo>);
+
+export async function login(username: string, password: string): Promise<void> {
+  const r = await fetch("/v1/login", {
+    method: "POST", headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+  if (!r.ok) {
+    const d = await r.json().catch(() => ({} as { error?: string }));
+    throw new Error(d.error || "login failed");
+  }
+  const { token } = (await r.json()) as { token: string };
+  apiKey.set(token);
+}
+
+export const logout = () => apiKey.clear();
+
 export const getHealth = () =>
   api<{ ok: boolean; backend: string; version: string }>("/v1/health");
 export const getDatasets = () =>

shadowlm/_static/assets/index-CFBE-pFl.js

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ShadowLM · slm♥</title>
-    <script type="module" crossorigin src="./assets/index-D1wlxHM6.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-JnxmbGdq.css">
+    <script type="module" crossorigin src="./assets/index-CFBE-pFl.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DkmXDLRR.css">
   </head>
   <body>
     <div id="root"></div>

shadowlm/_static/assets/index-D1wlxHM6.js

@@ -16,6 +16,8 @@
 from __future__ import annotations
 
 import argparse
+import hashlib
+import hmac
 import io
 import json
 import os
@@ -502,7 +504,64 @@ def artifact(self, job: _Job) -> bytes:
         return buf.getvalue()
 
 
-def make_handler(server: Server, api_key: str | None):
+class Auth:
+    """Studio auth — username/password login that mints short-lived bearer tokens,
+    plus the legacy static `SHADOWLM_API_KEY`. Both gate every `/v1` route.
+
+    Tokens are HMAC-signed (`<exp>.<sig>`, key = sha256(password)) so they need no
+    server-side session store and survive restarts; an attacker can't forge one
+    without the password. Auth is OFF unless a password or api key is configured.
+    """
+
+    def __init__(self, *, user: str | None, password: str | None,
+                 api_key: str | None, ttl: int = 12 * 3600) -> None:
+        self.user = user or "admin"
+        self.password = password or None
+        self.api_key = api_key or None
+        self.ttl = ttl
+
+    @property
+    def enabled(self) -> bool:
+        return bool(self.password or self.api_key)
+
+    @property
+    def mode(self) -> str:
+        return "password" if self.password else "apikey" if self.api_key else "none"
+
+    def _secret(self) -> bytes:
+        return hashlib.sha256((self.password or "").encode()).digest()
+
+    def check_login(self, user: str, password: str) -> bool:
+        if not self.password:
+            return False
+        return (hmac.compare_digest(user or "", self.user)
+                & hmac.compare_digest(password or "", self.password))
+
+    def issue_token(self) -> tuple[str, int]:
+        exp = int(time.time()) + self.ttl
+        sig = hmac.new(self._secret(), str(exp).encode(), hashlib.sha256).hexdigest()
+        return f"{exp}.{sig}", exp
+
+    def _valid_token(self, token: str) -> bool:
+        if not self.password or "." not in token:
+            return False
+        exp_s, _, sig = token.partition(".")
+        try:
+            exp = int(exp_s)
+        except ValueError:
+            return False
+        if exp < int(time.time()):
+            return False
+        good = hmac.new(self._secret(), str(exp).encode(), hashlib.sha256).hexdigest()
+        return hmac.compare_digest(sig, good)
+
+    def valid_bearer(self, token: str) -> bool:
+        if self.api_key and hmac.compare_digest(token, self.api_key):
+            return True
+        return self._valid_token(token)
+
+
+def make_handler(server: Server, auth: "Auth"):
     class Handler(BaseHTTPRequestHandler):
         def log_message(self, fmt, *args):  # quiet; job logs print directly
             pass
@@ -522,12 +581,12 @@ def _error(self, code: int, msg: str) -> None:
             self._send(code, {"error": msg})
 
         def _authed(self) -> bool:
-            if not api_key:
+            if not auth.enabled:
                 return True
             got = self.headers.get("Authorization", "")
-            if got == f"Bearer {api_key}":
+            if got.startswith("Bearer ") and auth.valid_bearer(got[7:]):
                 return True
-            self._error(401, "missing or invalid API key")
+            self._error(401, "authentication required")
             return False
 
         def _body(self) -> dict:
@@ -570,6 +629,9 @@ def do_GET(self):  # noqa: N802
                 except (FileNotFoundError, ModuleNotFoundError):
                     self._error(404, "no such image bundled")
                 return
+            if parts == ["v1", "auth"]:  # public: lets the UI decide to show login
+                self._send(200, {"auth_required": auth.enabled, "mode": auth.mode})
+                return
             if not self._authed():
                 return
             if parts == ["v1", "health"]:
@@ -650,9 +712,17 @@ def do_GET(self):  # noqa: N802
                 self._error(404, f"no route: GET {self.path}")
 
         def do_POST(self):  # noqa: N802
+            parts = self.path.split("?")[0].strip("/").split("/")
+            if parts == ["v1", "login"]:  # public: exchange credentials for a token
+                b = self._body()
+                if auth.check_login(b.get("username", ""), b.get("password", "")):
+                    token, exp = auth.issue_token()
+                    self._send(200, {"token": token, "user": auth.user, "expires": exp})
+                else:
+                    self._error(401, "invalid username or password")
+                return
             if not self._authed():
                 return
-            parts = self.path.split("?")[0].strip("/").split("/")
             try:
                 if parts == ["v1", "finetunes"]:
                     body = self._body()
@@ -759,19 +829,23 @@ def main(argv: list[str] | None = None) -> int:
                         help="also launch the Vite UI dev server (hot reload)")
     args = parser.parse_args(argv)
 
-    api_key = os.environ.get("SHADOWLM_API_KEY")
+    auth = Auth(user=os.environ.get("SHADOWLM_USER", "admin"),
+                password=os.environ.get("SHADOWLM_PASSWORD"),
+                api_key=os.environ.get("SHADOWLM_API_KEY"))
     work_root = Path(args.work_dir)
     work_root.mkdir(parents=True, exist_ok=True)
     server = Server(backend=args.backend, accelerator=args.accelerator,
                     device=args.device, work_root=work_root)
     httpd = ThreadingHTTPServer((args.host, args.port),
-                                make_handler(server, api_key))
+                                make_handler(server, auth))
 
     static = Path(__file__).parent / "_static" / "index.html"
     ui = ("React studio" if static.exists() else "built-in dashboard (no-build)")
-    auth = "Bearer auth ON" if api_key else "no auth (set SHADOWLM_API_KEY)"
+    auth_desc = (f"login required (user '{auth.user}')" if auth.password
+                 else "Bearer api-key auth" if auth.api_key
+                 else "no auth (set SHADOWLM_PASSWORD to require login)")
     base = f"http://{args.host}:{args.port}"
-    print(f"slm♥ ShadowLM server · {base} · backend={args.backend} · {auth}",
+    print(f"slm♥ ShadowLM server · {base} · backend={args.backend} · {auth_desc}",
           flush=True)
     print(f"     UI: {ui} + API on the same port — open {base}", flush=True)