h4ckath0n 0.1.0

package/templates/fullstack/web/src/auth/webauthn.ts

@@ -0,0 +1,133 @@
+export function base64urlEncode(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let str = "";
+  for (const byte of bytes) {
+    str += String.fromCharCode(byte);
+  }
+  return btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+export function base64urlDecode(str: string): ArrayBuffer {
+  const padded = str.replace(/-/g, "+").replace(/_/g, "/");
+  const padding = (4 - (padded.length % 4)) % 4;
+  const base64 = padded + "=".repeat(padding);
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+interface ServerPublicKeyOptions {
+  challenge: string;
+  rp: { name: string; id: string };
+  user?: { id: string; name: string; displayName: string };
+  pubKeyCredParams?: Array<{ type: string; alg: number }>;
+  timeout?: number;
+  attestation?: string;
+  authenticatorSelection?: {
+    authenticatorAttachment?: string;
+    residentKey?: string;
+    requireResidentKey?: boolean;
+    userVerification?: string;
+  };
+  excludeCredentials?: Array<{
+    id: string;
+    type: string;
+    transports?: string[];
+  }>;
+  allowCredentials?: Array<{
+    id: string;
+    type: string;
+    transports?: string[];
+  }>;
+}
+
+export function toCreateOptions(
+  serverOptions: ServerPublicKeyOptions,
+): CredentialCreationOptions {
+  const publicKey: PublicKeyCredentialCreationOptions = {
+    challenge: base64urlDecode(serverOptions.challenge),
+    rp: serverOptions.rp,
+    user: serverOptions.user
+      ? {
+          id: base64urlDecode(serverOptions.user.id),
+          name: serverOptions.user.name,
+          displayName: serverOptions.user.displayName,
+        }
+      : (() => {
+          throw new Error("WebAuthn registration requires user data");
+        })(),
+    pubKeyCredParams: (serverOptions.pubKeyCredParams ?? []).map((p) => ({
+      type: p.type as PublicKeyCredentialType,
+      alg: p.alg,
+    })),
+    timeout: serverOptions.timeout,
+    attestation:
+      serverOptions.attestation as AttestationConveyancePreference,
+    authenticatorSelection:
+      serverOptions.authenticatorSelection as AuthenticatorSelectionCriteria,
+    excludeCredentials: (serverOptions.excludeCredentials ?? []).map((c) => ({
+      id: base64urlDecode(c.id),
+      type: c.type as PublicKeyCredentialType,
+      transports: c.transports as AuthenticatorTransport[],
+    })),
+  };
+  return { publicKey };
+}
+
+export function toGetOptions(
+  serverOptions: ServerPublicKeyOptions,
+): CredentialRequestOptions {
+  const publicKey: PublicKeyCredentialRequestOptions = {
+    challenge: base64urlDecode(serverOptions.challenge),
+    rpId: serverOptions.rp.id,
+    timeout: serverOptions.timeout,
+    userVerification:
+      (serverOptions.authenticatorSelection
+        ?.userVerification as UserVerificationRequirement) ?? "preferred",
+    allowCredentials: (serverOptions.allowCredentials ?? []).map((c) => ({
+      id: base64urlDecode(c.id),
+      type: c.type as PublicKeyCredentialType,
+      transports: c.transports as AuthenticatorTransport[],
+    })),
+  };
+  return { publicKey };
+}
+
+export function serializeCreateResponse(
+  credential: PublicKeyCredential,
+): Record<string, unknown> {
+  const response =
+    credential.response as AuthenticatorAttestationResponse;
+  return {
+    id: credential.id,
+    rawId: base64urlEncode(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: base64urlEncode(response.clientDataJSON),
+      attestationObject: base64urlEncode(response.attestationObject),
+    },
+  };
+}
+
+export function serializeGetResponse(
+  credential: PublicKeyCredential,
+): Record<string, unknown> {
+  const response =
+    credential.response as AuthenticatorAssertionResponse;
+  return {
+    id: credential.id,
+    rawId: base64urlEncode(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: base64urlEncode(response.clientDataJSON),
+      authenticatorData: base64urlEncode(response.authenticatorData),
+      signature: base64urlEncode(response.signature),
+      userHandle: response.userHandle
+        ? base64urlEncode(response.userHandle)
+        : null,
+    },
+  };
+}

package/templates/fullstack/web/src/auth/ws.ts

@@ -0,0 +1,40 @@
+import { getOrMintToken } from "./token";
+
+/**
+ * Create an authenticated WebSocket connection.
+ * Sends auth token as first message frame instead of query string.
+ * Never put tokens in WebSocket URL query params.
+ */
+export async function createAuthWebSocket(
+  url: string,
+  onMessage?: (data: unknown) => void,
+): Promise<WebSocket> {
+  const token = await getOrMintToken("ws");
+  const ws = new WebSocket(url);
+
+  ws.addEventListener("open", () => {
+    ws.send(JSON.stringify({ type: "auth", token }));
+  });
+
+  if (onMessage) {
+    ws.addEventListener("message", (event) => {
+      try {
+        const data = JSON.parse(event.data as string);
+        onMessage(data);
+      } catch {
+        onMessage(event.data);
+      }
+    });
+  }
+
+  return ws;
+}
+
+/**
+ * Send a re-auth message on an existing WebSocket when token is renewed.
+ */
+export async function sendReauth(ws: WebSocket): Promise<void> {
+  if (ws.readyState !== WebSocket.OPEN) return;
+  const token = await getOrMintToken("ws");
+  ws.send(JSON.stringify({ type: "auth", token }));
+}

package/templates/fullstack/web/src/components/Alert.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { AlertCircle, CheckCircle, Info, XCircle } from "lucide-react";
+
+interface AlertProps {
+  variant?: "info" | "success" | "warning" | "error";
+  children: ReactNode;
+  className?: string;
+}
+
+const icons = {
+  info: Info,
+  success: CheckCircle,
+  warning: AlertCircle,
+  error: XCircle,
+};
+
+const styles = {
+  info: "bg-primary/10 text-primary border-primary/20",
+  success: "bg-success/10 text-success border-success/20",
+  warning: "bg-yellow-500/10 text-yellow-600 border-yellow-500/20",
+  error: "bg-danger/10 text-danger border-danger/20",
+};
+
+export function Alert({ variant = "info", children, className = "" }: AlertProps) {
+  const Icon = icons[variant];
+  return (
+    <div
+      className={`flex items-start gap-3 p-4 rounded-2xl border ${styles[variant]} ${className}`}
+      role="alert"
+    >
+      <Icon className="w-5 h-5 shrink-0 mt-0.5" />
+      <div className="text-sm">{children}</div>
+    </div>
+  );
+}

package/templates/fullstack/web/src/components/Button.tsx

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+}
+
+const variants = {
+  primary: "bg-primary text-white hover:bg-primary-hover",
+  secondary: "bg-surface-alt text-text border border-border hover:bg-border",
+  danger: "bg-danger text-white hover:bg-danger-hover",
+  ghost: "text-text hover:bg-surface-alt",
+};
+
+const sizes = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-2.5 text-base",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={`inline-flex items-center justify-center gap-2 font-medium rounded-2xl transition-colors disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/fullstack/web/src/components/Card.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ children, className = "" }: CardProps) {
+  return (
+    <div className={`bg-surface border border-border rounded-2xl shadow-sm ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ children, className = "" }: CardProps) {
+  return <div className={`px-6 py-4 border-b border-border ${className}`}>{children}</div>;
+}
+
+export function CardContent({ children, className = "" }: CardProps) {
+  return <div className={`px-6 py-4 ${className}`}>{children}</div>;
+}

package/templates/fullstack/web/src/components/Input.tsx

@@ -0,0 +1,27 @@
+import type { InputHTMLAttributes } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Input({ label, error, className = "", id, ...props }: InputProps) {
+  const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+  return (
+    <div className="space-y-1.5">
+      {label && (
+        <label htmlFor={inputId} className="block text-sm font-medium text-text">
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={`w-full px-3 py-2 bg-surface border border-border rounded-xl text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors ${
+          error ? "border-danger" : ""
+        } ${className}`}
+        {...props}
+      />
+      {error && <p className="text-sm text-danger">{error}</p>}
+    </div>
+  );
+}

package/templates/fullstack/web/src/components/Layout.tsx

@@ -0,0 +1,88 @@
+import { Outlet, Link } from "react-router";
+import { useAuth } from "../auth";
+import { Sun, Moon, Shield, LogOut, LayoutDashboard, Settings } from "lucide-react";
+import { useState, useEffect } from "react";
+
+export function Layout() {
+  const { isAuthenticated, logout } = useAuth();
+  const [dark, setDark] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return document.documentElement.getAttribute("data-theme") === "dark" ||
+      (!document.documentElement.getAttribute("data-theme") &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+  }, [dark]);
+
+  return (
+    <div className="min-h-screen bg-surface">
+      <nav className="border-b border-border bg-surface/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <Link to="/" className="flex items-center gap-2 font-bold text-lg text-text">
+              <Shield className="w-5 h-5 text-primary" />
+              <span>{"{{PROJECT_NAME}}"}</span>
+            </Link>
+
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setDark(!dark)}
+                className="p-2 rounded-xl hover:bg-surface-alt transition-colors"
+                aria-label="Toggle dark mode"
+              >
+                {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              </button>
+
+              {isAuthenticated ? (
+                <>
+                  <Link
+                    to="/dashboard"
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-xl hover:bg-surface-alt transition-colors"
+                  >
+                    <LayoutDashboard className="w-4 h-4" />
+                    Dashboard
+                  </Link>
+                  <Link
+                    to="/settings"
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-xl hover:bg-surface-alt transition-colors"
+                  >
+                    <Settings className="w-4 h-4" />
+                    Settings
+                  </Link>
+                  <button
+                    onClick={() => void logout()}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-xl hover:bg-surface-alt transition-colors text-danger"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    Logout
+                  </button>
+                </>
+              ) : (
+                <>
+                  <Link
+                    to="/login"
+                    className="px-3 py-1.5 text-sm rounded-xl hover:bg-surface-alt transition-colors"
+                  >
+                    Login
+                  </Link>
+                  <Link
+                    to="/register"
+                    className="px-4 py-1.5 text-sm bg-primary text-white rounded-xl hover:bg-primary-hover transition-colors"
+                  >
+                    Register
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/fullstack/web/src/components/ProtectedRoute.tsx

@@ -0,0 +1,34 @@
+import { Navigate } from "react-router";
+import { useAuth } from "../auth";
+
+interface Props {
+  children: React.ReactNode;
+  requiredRole?: string;
+}
+
+export function ProtectedRoute({ children, requiredRole }: Props) {
+  const { isAuthenticated, isLoading, role } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <div className="animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  if (requiredRole && role !== requiredRole) {
+    return (
+      <div className="text-center py-16">
+        <h2 className="text-2xl font-bold text-text mb-2">Access Denied</h2>
+        <p className="text-text-muted">You do not have permission to view this page.</p>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

package/templates/fullstack/web/src/components/index.ts

@@ -0,0 +1,6 @@
+export { Card, CardHeader, CardContent } from "./Card";
+export { Button } from "./Button";
+export { Input } from "./Input";
+export { Alert } from "./Alert";
+export { Layout } from "./Layout";
+export { ProtectedRoute } from "./ProtectedRoute";

package/templates/fullstack/web/src/index.css

@@ -0,0 +1,48 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #6366f1;
+  --color-primary-hover: #4f46e5;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f9fafb;
+  --color-border: #e5e7eb;
+  --color-text: #111827;
+  --color-text-muted: #6b7280;
+  --color-danger: #ef4444;
+  --color-danger-hover: #dc2626;
+  --color-success: #22c55e;
+}
+
+@layer base {
+  body {
+    @apply bg-surface text-text antialiased;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-primary: #818cf8;
+    --color-primary-hover: #6366f1;
+    --color-surface: #0f172a;
+    --color-surface-alt: #1e293b;
+    --color-border: #334155;
+    --color-text: #f1f5f9;
+    --color-text-muted: #94a3b8;
+    --color-danger: #f87171;
+    --color-danger-hover: #ef4444;
+    --color-success: #4ade80;
+  }
+}
+
+[data-theme="dark"] {
+  --color-primary: #818cf8;
+  --color-primary-hover: #6366f1;
+  --color-surface: #0f172a;
+  --color-surface-alt: #1e293b;
+  --color-border: #334155;
+  --color-text: #f1f5f9;
+  --color-text-muted: #94a3b8;
+  --color-danger: #f87171;
+  --color-danger-hover: #ef4444;
+  --color-success: #4ade80;
+}

package/templates/fullstack/web/src/main.tsx

@@ -0,0 +1,28 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "./auth/AuthContext";
+import { App } from "./App";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  </StrictMode>
+);

package/templates/fullstack/web/src/pages/Admin.tsx

@@ -0,0 +1,43 @@
+import { useAuth } from "../auth";
+import { Card, CardContent, CardHeader } from "../components/Card";
+import { Shield, Users } from "lucide-react";
+import { Alert } from "../components/Alert";
+
+export function Admin() {
+  const { userId, role } = useAuth();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-text">Admin Panel</h1>
+        <p className="text-text-muted">Server-side RBAC enforces all admin operations</p>
+      </div>
+
+      <Alert variant="info">
+        This page is role-gated in the frontend. However, all admin operations are enforced
+        server-side. The server derives roles from the database, never from JWT claims.
+      </Alert>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <Shield className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold text-text">Admin Info</h2>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center gap-2 text-sm">
+            <Users className="w-4 h-4 text-text-muted" />
+            <span className="text-text-muted">User ID:</span>
+            <span className="font-mono text-text">{userId}</span>
+          </div>
+          <div className="flex items-center gap-2 text-sm">
+            <Shield className="w-4 h-4 text-text-muted" />
+            <span className="text-text-muted">Role:</span>
+            <span className="font-medium text-text capitalize">{role}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/fullstack/web/src/pages/Dashboard.tsx

@@ -0,0 +1,75 @@
+import { useAuth } from "../auth";
+import { Card, CardContent, CardHeader } from "../components/Card";
+import { Shield, User, Key } from "lucide-react";
+
+export function Dashboard() {
+  const { userId, deviceId, role, displayName } = useAuth();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-text">Dashboard</h1>
+        <p className="text-text-muted">
+          Welcome{displayName ? `, ${displayName}` : ""}!
+        </p>
+      </div>
+
+      <div className="grid sm:grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="flex items-center gap-3 py-5">
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <User className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <p className="text-xs text-text-muted">User ID</p>
+              <p className="text-sm font-mono text-text truncate max-w-[160px]">{userId}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="flex items-center gap-3 py-5">
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <Key className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <p className="text-xs text-text-muted">Device ID</p>
+              <p className="text-sm font-mono text-text truncate max-w-[160px]">{deviceId}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="flex items-center gap-3 py-5">
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <Shield className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <p className="text-xs text-text-muted">Role</p>
+              <p className="text-sm font-medium text-text capitalize">{role || "user"}</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <h2 className="text-lg font-semibold text-text">Getting Started</h2>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm text-text-muted">
+          <p>
+            Your device has a unique P-256 keypair stored in IndexedDB. The private key is
+            non-extractable and never leaves this browser.
+          </p>
+          <p>
+            API requests are authenticated with short-lived JWTs (15 min) signed by your device
+            key. The server verifies each request using your registered public key.
+          </p>
+          <p>
+            Visit <strong>Settings</strong> to manage your passkeys, or start building your app!
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}