@atercates/claude-deck 0.2.2 → 0.2.3

package/app/api/auth/login/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import { queries } from "@/lib/db";
+import {
+  verifyPassword,
+  verifyTotpCode,
+  createSession,
+  buildSessionCookie,
+  checkRateLimit,
+} from "@/lib/auth";
+
+export async function POST(request: NextRequest) {
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+
+  const rateCheck = checkRateLimit(ip);
+  if (!rateCheck.allowed) {
+    return NextResponse.json(
+      { error: "Too many login attempts. Try again later." },
+      {
+        status: 429,
+        headers: { "Retry-After": String(rateCheck.retryAfterSeconds) },
+      }
+    );
+  }
+
+  const body = await request.json();
+  const { username, password, totpCode } = body;
+
+  const INVALID = NextResponse.json(
+    { error: "Invalid credentials" },
+    { status: 401 }
+  );
+
+  if (!username || !password) return INVALID;
+
+  const user = queries.getUserByUsername(username);
+  if (!user) return INVALID;
+
+  const validPassword = await verifyPassword(password, user.password_hash);
+  if (!validPassword) return INVALID;
+
+  if (user.totp_secret) {
+    if (!totpCode) {
+      return NextResponse.json({ requiresTotp: true });
+    }
+    if (!verifyTotpCode(user.totp_secret, totpCode)) {
+      return INVALID;
+    }
+  }
+
+  const { token } = createSession(user.id);
+  const response = NextResponse.json({ ok: true });
+  response.headers.set("Set-Cookie", buildSessionCookie(token));
+  return response;
+}

package/app/api/auth/logout/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+import { deleteSession, buildClearCookie, COOKIE_NAME } from "@/lib/auth";
+
+export async function POST(request: NextRequest) {
+  const token = request.cookies.get(COOKIE_NAME)?.value;
+  if (token) {
+    deleteSession(token);
+  }
+
+  const response = NextResponse.json({ ok: true });
+  response.headers.set("Set-Cookie", buildClearCookie());
+  return response;
+}

package/app/api/auth/session/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  validateSession,
+  renewSession,
+  COOKIE_NAME,
+  hasUsers,
+} from "@/lib/auth";
+
+export async function GET(request: NextRequest) {
+  if (!hasUsers()) {
+    return NextResponse.json({ authenticated: false, needsSetup: true });
+  }
+
+  const token = request.cookies.get(COOKIE_NAME)?.value;
+  if (!token) {
+    return NextResponse.json({ authenticated: false }, { status: 401 });
+  }
+
+  const user = validateSession(token);
+  if (!user) {
+    return NextResponse.json({ authenticated: false }, { status: 401 });
+  }
+
+  renewSession(token);
+  return NextResponse.json({
+    authenticated: true,
+    username: user.username,
+  });
+}

package/app/api/auth/setup/route.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from "next/server";
+import { randomBytes } from "crypto";
+import { queries } from "@/lib/db";
+import {
+  hashPassword,
+  verifyTotpCode,
+  createSession,
+  buildSessionCookie,
+  hasUsers,
+} from "@/lib/auth";
+
+export async function POST(request: NextRequest) {
+  if (hasUsers()) {
+    return NextResponse.json(
+      { error: "Setup already completed" },
+      { status: 403 }
+    );
+  }
+
+  const body = await request.json();
+  const { username, password, totpSecret, totpCode } = body;
+
+  if (
+    !username ||
+    typeof username !== "string" ||
+    username.length < 3 ||
+    username.length > 32 ||
+    !/^[a-zA-Z0-9_]+$/.test(username)
+  ) {
+    return NextResponse.json(
+      {
+        error:
+          "Username must be 3-32 characters, alphanumeric and underscore only",
+      },
+      { status: 400 }
+    );
+  }
+
+  if (!password || typeof password !== "string" || password.length < 8) {
+    return NextResponse.json(
+      { error: "Password must be at least 8 characters" },
+      { status: 400 }
+    );
+  }
+
+  if (totpSecret) {
+    if (!totpCode || !verifyTotpCode(totpSecret, totpCode)) {
+      return NextResponse.json(
+        {
+          error:
+            "Invalid TOTP code. Scan the QR code again and enter the current code.",
+        },
+        { status: 400 }
+      );
+    }
+  }
+
+  const id = randomBytes(16).toString("hex");
+  const passwordHash = await hashPassword(password);
+
+  queries.createUser(id, username, passwordHash, totpSecret || null);
+
+  const { token } = createSession(id);
+  const response = NextResponse.json({ ok: true });
+  response.headers.set("Set-Cookie", buildSessionCookie(token));
+  return response;
+}

package/app/login/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Loader2, Lock, Eye, EyeOff } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState<"credentials" | "totp">("credentials");
+  const totpInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (step === "totp" && totpInputRef.current) {
+      totpInputRef.current.focus();
+    }
+  }, [step]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          ...(step === "totp" ? { totpCode } : {}),
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.status === 429) {
+        setError(
+          `Too many attempts. Try again in ${data.retryAfterSeconds || 60}s.`
+        );
+        return;
+      }
+
+      if (data.requiresTotp) {
+        setStep("totp");
+        return;
+      }
+
+      if (!res.ok) {
+        setError(data.error || "Invalid credentials");
+        if (step === "totp") setTotpCode("");
+        return;
+      }
+
+      router.push("/");
+      router.refresh();
+    } catch {
+      setError("Connection error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (step === "totp" && totpCode.length === 6) {
+      const form = document.getElementById("login-form") as HTMLFormElement;
+      form?.requestSubmit();
+    }
+  }, [totpCode, step]);
+
+  return (
+    <div className="bg-background flex min-h-screen items-center justify-center p-4">
+      <div className="border-border bg-card w-full max-w-sm rounded-xl border p-8 shadow-lg">
+        <div className="mb-8 text-center">
+          <div className="bg-primary/10 text-primary mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Lock className="h-6 w-6" />
+          </div>
+          <h1 className="text-foreground text-2xl font-semibold">ClaudeDeck</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            {step === "credentials"
+              ? "Sign in to continue"
+              : "Enter your 2FA code"}
+          </p>
+        </div>
+
+        <form id="login-form" onSubmit={handleSubmit} className="space-y-4">
+          {step === "credentials" ? (
+            <>
+              <div className="space-y-2">
+                <label
+                  htmlFor="username"
+                  className="text-foreground text-sm font-medium"
+                >
+                  Username
+                </label>
+                <Input
+                  id="username"
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  autoComplete="username"
+                  autoFocus
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="password"
+                  className="text-foreground text-sm font-medium"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    autoComplete="current-password"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-4 w-4" />
+                    ) : (
+                      <Eye className="h-4 w-4" />
+                    )}
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="space-y-2">
+              <label
+                htmlFor="totp"
+                className="text-foreground text-sm font-medium"
+              >
+                Authentication code
+              </label>
+              <Input
+                ref={totpInputRef}
+                id="totp"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={6}
+                value={totpCode}
+                onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ""))}
+                placeholder="000000"
+                className="text-center text-2xl tracking-[0.5em]"
+                autoComplete="one-time-code"
+                required
+              />
+              <button
+                type="button"
+                onClick={() => {
+                  setStep("credentials");
+                  setTotpCode("");
+                  setError("");
+                }}
+                className="text-muted-foreground hover:text-foreground text-xs underline"
+              >
+                Back to login
+              </button>
+            </div>
+          )}
+
+          {error && (
+            <p className="text-destructive text-center text-sm">{error}</p>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {step === "credentials" ? "Sign in" : "Verify"}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/app/setup/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Loader2, Shield, Eye, EyeOff } from "lucide-react";
+
+export default function SetupPage() {
+  const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [enableTotp, setEnableTotp] = useState(false);
+  const [totpSecret, setTotpSecret] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/auth/session").then(async (res) => {
+      const data = await res.json();
+      if (!data.needsSetup) {
+        router.push(data.authenticated ? "/" : "/login");
+      }
+    });
+  }, [router]);
+
+  useEffect(() => {
+    if (enableTotp && !totpSecret && username.length >= 3) {
+      generateTotp();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit generateTotp and totpSecret to avoid regenerating secret on every render
+  }, [enableTotp, username]);
+
+  const generateTotp = async () => {
+    try {
+      const { TOTP, Secret } = await import("otpauth");
+      const secret = new Secret({ size: 20 });
+      const totp = new TOTP({
+        issuer: "ClaudeDeck",
+        label: username,
+        algorithm: "SHA1",
+        digits: 6,
+        period: 30,
+        secret,
+      });
+
+      const uri = totp.toString();
+      setTotpSecret(secret.base32);
+
+      const QRCode = await import("qrcode");
+      const dataUrl = await QRCode.toDataURL(uri, {
+        width: 200,
+        margin: 2,
+        color: { dark: "#ffffff", light: "#00000000" },
+      });
+      setQrDataUrl(dataUrl);
+    } catch (err) {
+      console.error("Failed to generate TOTP:", err);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    if (enableTotp && totpCode.length !== 6) {
+      setError("Enter the 6-digit code from your authenticator app");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          ...(enableTotp ? { totpSecret, totpCode } : {}),
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Setup failed");
+        return;
+      }
+
+      router.push("/");
+      router.refresh();
+    } catch {
+      setError("Connection error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-background flex min-h-screen items-center justify-center p-4">
+      <div className="border-border bg-card w-full max-w-md rounded-xl border p-8 shadow-lg">
+        <div className="mb-8 text-center">
+          <div className="bg-primary/10 text-primary mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Shield className="h-6 w-6" />
+          </div>
+          <h1 className="text-foreground text-2xl font-semibold">
+            Welcome to ClaudeDeck
+          </h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Create your account to get started
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label
+              htmlFor="username"
+              className="text-foreground text-sm font-medium"
+            >
+              Username
+            </label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="admin"
+              autoComplete="username"
+              autoFocus
+              required
+              minLength={3}
+              maxLength={32}
+              pattern="[a-zA-Z0-9_]+"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="password"
+              className="text-foreground text-sm font-medium"
+            >
+              Password
+            </label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoComplete="new-password"
+                required
+                minLength={8}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
+                tabIndex={-1}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="confirmPassword"
+              className="text-foreground text-sm font-medium"
+            >
+              Confirm password
+            </label>
+            <Input
+              id="confirmPassword"
+              type={showPassword ? "text" : "password"}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              autoComplete="new-password"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <div className="border-border flex items-center justify-between rounded-lg border p-3">
+            <div>
+              <p className="text-foreground text-sm font-medium">
+                Two-factor authentication
+              </p>
+              <p className="text-muted-foreground text-xs">
+                Secure your account with TOTP
+              </p>
+            </div>
+            <Switch checked={enableTotp} onCheckedChange={setEnableTotp} />
+          </div>
+
+          {enableTotp && qrDataUrl && (
+            <div className="border-border space-y-3 rounded-lg border p-4">
+              <p className="text-foreground text-center text-sm font-medium">
+                Scan with your authenticator app
+              </p>
+              <div className="flex justify-center">
+                {/* eslint-disable-next-line @next/next/no-img-element -- base64 data URL, next/image not applicable */}
+                <img
+                  src={qrDataUrl}
+                  alt="TOTP QR Code"
+                  className="h-[200px] w-[200px]"
+                />
+              </div>
+              <div className="space-y-1">
+                <p className="text-muted-foreground text-center text-xs">
+                  Or enter manually:
+                </p>
+                <code className="bg-muted text-foreground block rounded p-2 text-center font-mono text-xs break-all">
+                  {totpSecret}
+                </code>
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="totpVerify"
+                  className="text-foreground text-sm font-medium"
+                >
+                  Verification code
+                </label>
+                <Input
+                  id="totpVerify"
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  maxLength={6}
+                  value={totpCode}
+                  onChange={(e) =>
+                    setTotpCode(e.target.value.replace(/\D/g, ""))
+                  }
+                  placeholder="000000"
+                  className="text-center text-lg tracking-[0.3em]"
+                  autoComplete="one-time-code"
+                />
+              </div>
+            </div>
+          )}
+
+          {enableTotp && !qrDataUrl && username.length < 3 && (
+            <p className="text-muted-foreground text-center text-sm">
+              Enter a username (3+ characters) to generate the QR code
+            </p>
+          )}
+
+          {error && (
+            <p className="text-destructive text-center text-sm">{error}</p>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            Create account
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/lib/auth/index.ts

@@ -0,0 +1,15 @@
+export { hashPassword, verifyPassword } from "./password";
+export { generateTotpSecret, verifyTotpCode } from "./totp";
+export {
+  createSession,
+  validateSession,
+  renewSession,
+  deleteSession,
+  cleanupExpiredSessions,
+  COOKIE_NAME,
+  buildSessionCookie,
+  buildClearCookie,
+  parseCookies,
+  hasUsers,
+} from "./session";
+export { checkRateLimit } from "./rate-limit";

package/lib/auth/password.ts

@@ -0,0 +1,14 @@
+import bcrypt from "bcryptjs";
+
+const BCRYPT_COST = 12;
+
+export async function hashPassword(password: string): Promise<string> {
+  return bcrypt.hash(password, BCRYPT_COST);
+}
+
+export async function verifyPassword(
+  password: string,
+  hash: string
+): Promise<boolean> {
+  return bcrypt.compare(password, hash);
+}

package/lib/auth/rate-limit.ts

@@ -0,0 +1,40 @@
+const MAX_ATTEMPTS = 5;
+const WINDOW_MS = 15 * 60 * 1000;
+
+interface RateLimitEntry {
+  count: number;
+  resetAt: number;
+}
+
+const attempts = new Map<string, RateLimitEntry>();
+
+setInterval(
+  () => {
+    const now = Date.now();
+    for (const [ip, entry] of attempts) {
+      if (entry.resetAt < now) attempts.delete(ip);
+    }
+  },
+  5 * 60 * 1000
+);
+
+export function checkRateLimit(ip: string): {
+  allowed: boolean;
+  retryAfterSeconds?: number;
+} {
+  const now = Date.now();
+  const entry = attempts.get(ip);
+
+  if (!entry || entry.resetAt < now) {
+    attempts.set(ip, { count: 1, resetAt: now + WINDOW_MS });
+    return { allowed: true };
+  }
+
+  if (entry.count >= MAX_ATTEMPTS) {
+    const retryAfterSeconds = Math.ceil((entry.resetAt - now) / 1000);
+    return { allowed: false, retryAfterSeconds };
+  }
+
+  entry.count++;
+  return { allowed: true };
+}

package/lib/auth/session.ts

@@ -0,0 +1,83 @@
+import { randomBytes } from "crypto";
+import { queries } from "@/lib/db";
+import type { User } from "@/lib/db";
+
+const SESSION_DURATION_DAYS = 30;
+const SESSION_TOKEN_BYTES = 32;
+
+export function createSession(userId: string): {
+  token: string;
+  expiresAt: string;
+} {
+  const id = randomBytes(16).toString("hex");
+  const token = randomBytes(SESSION_TOKEN_BYTES).toString("hex");
+  const expiresAt = new Date(
+    Date.now() + SESSION_DURATION_DAYS * 24 * 60 * 60 * 1000
+  ).toISOString();
+
+  queries.createAuthSession(id, token, userId, expiresAt);
+
+  return { token, expiresAt };
+}
+
+export function validateSession(token: string): User | null {
+  if (!token || token.length !== SESSION_TOKEN_BYTES * 2) return null;
+
+  const session = queries.getAuthSessionByToken(token);
+  if (!session) return null;
+
+  if (new Date(session.expires_at) < new Date()) {
+    queries.deleteAuthSession(token);
+    return null;
+  }
+
+  const user = queries.getUserById(session.user_id);
+  if (!user) {
+    queries.deleteAuthSession(token);
+    return null;
+  }
+
+  return user;
+}
+
+export function renewSession(token: string): void {
+  const expiresAt = new Date(
+    Date.now() + SESSION_DURATION_DAYS * 24 * 60 * 60 * 1000
+  ).toISOString();
+  queries.renewAuthSession(token, expiresAt);
+}
+
+export function deleteSession(token: string): void {
+  queries.deleteAuthSession(token);
+}
+
+export function cleanupExpiredSessions(): void {
+  queries.deleteExpiredAuthSessions();
+}
+
+export const COOKIE_NAME = "claude_deck_session";
+
+export function buildSessionCookie(token: string): string {
+  const maxAge = SESSION_DURATION_DAYS * 24 * 60 * 60;
+  return `${COOKIE_NAME}=${token}; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=${maxAge}`;
+}
+
+export function buildClearCookie(): string {
+  return `${COOKIE_NAME}=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0`;
+}
+
+export function parseCookies(
+  cookieHeader: string | undefined
+): Record<string, string> {
+  if (!cookieHeader) return {};
+  return Object.fromEntries(
+    cookieHeader.split(";").map((c) => {
+      const [key, ...rest] = c.trim().split("=");
+      return [key, rest.join("=")];
+    })
+  );
+}
+
+export function hasUsers(): boolean {
+  return queries.getUserCount() > 0;
+}

package/lib/auth/totp.ts

@@ -0,0 +1,36 @@
+import { TOTP, Secret } from "otpauth";
+
+const ISSUER = "ClaudeDeck";
+
+export function generateTotpSecret(username: string): {
+  secret: string;
+  uri: string;
+} {
+  const secret = new Secret({ size: 20 });
+  const totp = new TOTP({
+    issuer: ISSUER,
+    label: username,
+    algorithm: "SHA1",
+    digits: 6,
+    period: 30,
+    secret,
+  });
+
+  return {
+    secret: secret.base32,
+    uri: totp.toString(),
+  };
+}
+
+export function verifyTotpCode(secret: string, code: string): boolean {
+  const totp = new TOTP({
+    issuer: ISSUER,
+    algorithm: "SHA1",
+    digits: 6,
+    period: 30,
+    secret: Secret.fromBase32(secret),
+  });
+
+  const delta = totp.validate({ token: code, window: 1 });
+  return delta !== null;
+}

package/lib/db/queries.ts

@@ -6,6 +6,8 @@ import type {
   ProjectDevServer,
   ProjectRepository,
   DevServer,
+  User,
+  AuthSession,
 } from "./types";
 
 function query<T>(sql: string, params: unknown[] = []): T[] {
@@ -457,4 +459,66 @@ export const queries = {
       itemType,
       itemId,
     ]),
+
+  getUserCount(): number {
+    return (
+      queryOne<{ count: number }>("SELECT COUNT(*) as count FROM users") ?? {
+        count: 0,
+      }
+    ).count;
+  },
+
+  getUserByUsername(username: string): User | null {
+    return queryOne<User>("SELECT * FROM users WHERE username = ?", [username]);
+  },
+
+  getUserById(id: string): User | null {
+    return queryOne<User>("SELECT * FROM users WHERE id = ?", [id]);
+  },
+
+  createUser(
+    id: string,
+    username: string,
+    passwordHash: string,
+    totpSecret: string | null
+  ): void {
+    execute(
+      "INSERT INTO users (id, username, password_hash, totp_secret) VALUES (?, ?, ?, ?)",
+      [id, username, passwordHash, totpSecret]
+    );
+  },
+
+  getAuthSessionByToken(token: string): AuthSession | null {
+    return queryOne<AuthSession>(
+      "SELECT * FROM auth_sessions WHERE token = ?",
+      [token]
+    );
+  },
+
+  createAuthSession(
+    id: string,
+    token: string,
+    userId: string,
+    expiresAt: string
+  ): void {
+    execute(
+      "INSERT INTO auth_sessions (id, token, user_id, expires_at) VALUES (?, ?, ?, ?)",
+      [id, token, userId, expiresAt]
+    );
+  },
+
+  renewAuthSession(token: string, expiresAt: string): void {
+    execute("UPDATE auth_sessions SET expires_at = ? WHERE token = ?", [
+      expiresAt,
+      token,
+    ]);
+  },
+
+  deleteAuthSession(token: string): void {
+    execute("DELETE FROM auth_sessions WHERE token = ?", [token]);
+  },
+
+  deleteExpiredAuthSessions(): void {
+    execute("DELETE FROM auth_sessions WHERE expires_at < datetime('now')");
+  },
 };

package/lib/db/schema.ts

@@ -110,5 +110,24 @@ export function createSchema(db: Database.Database): void {
 
     INSERT OR IGNORE INTO projects (id, name, working_directory, is_uncategorized, sort_order)
     VALUES ('uncategorized', 'Uncategorized', '~', 1, 999999);
+
+    CREATE TABLE IF NOT EXISTS users (
+      id TEXT PRIMARY KEY,
+      username TEXT NOT NULL UNIQUE,
+      password_hash TEXT NOT NULL,
+      totp_secret TEXT,
+      created_at TEXT NOT NULL DEFAULT (datetime('now'))
+    );
+
+    CREATE TABLE IF NOT EXISTS auth_sessions (
+      id TEXT PRIMARY KEY,
+      token TEXT NOT NULL UNIQUE,
+      user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+      expires_at TEXT NOT NULL,
+      created_at TEXT NOT NULL DEFAULT (datetime('now'))
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_auth_sessions_token ON auth_sessions(token);
+    CREATE INDEX IF NOT EXISTS idx_auth_sessions_expires ON auth_sessions(expires_at);
   `);
 }

package/lib/db/types.ts

@@ -90,3 +90,19 @@ export interface DevServer {
   created_at: string;
   updated_at: string;
 }
+
+export interface User {
+  id: string;
+  username: string;
+  password_hash: string;
+  totp_secret: string | null;
+  created_at: string;
+}
+
+export interface AuthSession {
+  id: string;
+  token: string;
+  user_id: string;
+  expires_at: string;
+  created_at: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atercates/claude-deck",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "claude-deck": "./scripts/claude-deck"
@@ -78,6 +78,7 @@
     "@xterm/addon-search": "^0.16.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
+    "bcryptjs": "^3.0.3",
     "better-sqlite3": "^12.8.0",
     "chokidar": "^5.0.0",
     "class-variance-authority": "^0.7.1",
@@ -88,6 +89,8 @@
     "next": "^16.2.3",
     "next-themes": "^0.4.6",
     "node-pty": "1.2.0-beta.12",
+    "otpauth": "^9.5.0",
+    "qrcode": "^1.5.4",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-markdown": "^10.1.0",
@@ -107,6 +110,7 @@
     "@tauri-apps/cli": "^2.10.1",
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^25.6.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/ws": "^8.18.1",

package/server.ts

@@ -5,6 +5,12 @@ import { WebSocketServer, WebSocket } from "ws";
 import * as pty from "node-pty";
 import { initDb } from "./lib/db";
 import { startWatcher, addUpdateClient } from "./lib/claude/watcher";
+import {
+  validateSession,
+  parseCookies,
+  COOKIE_NAME,
+  hasUsers,
+} from "./lib/auth";
 
 const dev = process.env.NODE_ENV !== "production";
 const hostname = "0.0.0.0";
@@ -35,6 +41,19 @@ app.prepare().then(async () => {
   server.on("upgrade", (request, socket, head) => {
     const { pathname } = parse(request.url || "");
 
+    // Validate auth for WebSocket connections
+    if (hasUsers()) {
+      const cookies = parseCookies(request.headers.cookie);
+      const token = cookies[COOKIE_NAME];
+      const user = token ? validateSession(token) : null;
+
+      if (!user) {
+        socket.write("HTTP/1.1 401 Unauthorized\r\n\r\n");
+        socket.destroy();
+        return;
+      }
+    }
+
     if (pathname === "/ws/terminal") {
       terminalWss.handleUpgrade(request, socket, head, (ws) => {
         terminalWss.emit("connection", ws, request);