h4ckath0n 0.1.0

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

@@ -0,0 +1,73 @@
+import { Link } from "react-router";
+import { Shield, Fingerprint, Zap, Lock } from "lucide-react";
+import { useAuth } from "../auth";
+import { Button } from "../components/Button";
+
+export function Landing() {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <div className="max-w-3xl mx-auto text-center py-16">
+      <div className="flex justify-center mb-6">
+        <div className="p-4 bg-primary/10 rounded-3xl">
+          <Shield className="w-12 h-12 text-primary" />
+        </div>
+      </div>
+
+      <h1 className="text-4xl sm:text-5xl font-bold text-text mb-4">
+        Welcome to <span className="text-primary">{"{{PROJECT_NAME}}"}</span>
+      </h1>
+
+      <p className="text-lg text-text-muted mb-8 max-w-xl mx-auto">
+        A secure-by-default hackathon starter with passkey authentication,
+        device-bound keys, and role-based access control.
+      </p>
+
+      <div className="flex justify-center gap-4 mb-16">
+        {isAuthenticated ? (
+          <Link to="/dashboard">
+            <Button size="lg">Go to Dashboard</Button>
+          </Link>
+        ) : (
+          <>
+            <Link to="/register">
+              <Button size="lg">
+                <Fingerprint className="w-5 h-5" />
+                Get Started
+              </Button>
+            </Link>
+            <Link to="/login">
+              <Button variant="secondary" size="lg">
+                Login
+              </Button>
+            </Link>
+          </>
+        )}
+      </div>
+
+      <div className="grid sm:grid-cols-3 gap-6 text-left">
+        <div className="p-6 bg-surface-alt rounded-2xl border border-border">
+          <Fingerprint className="w-8 h-8 text-primary mb-3" />
+          <h3 className="font-semibold text-text mb-1">Passkey Auth</h3>
+          <p className="text-sm text-text-muted">
+            No passwords. Register and login with device biometrics or security keys.
+          </p>
+        </div>
+        <div className="p-6 bg-surface-alt rounded-2xl border border-border">
+          <Lock className="w-8 h-8 text-primary mb-3" />
+          <h3 className="font-semibold text-text mb-1">Device-Bound Keys</h3>
+          <p className="text-sm text-text-muted">
+            Each device has a non-extractable P-256 keypair. Tokens are signed locally and verified server-side.
+          </p>
+        </div>
+        <div className="p-6 bg-surface-alt rounded-2xl border border-border">
+          <Zap className="w-8 h-8 text-primary mb-3" />
+          <h3 className="font-semibold text-text mb-1">Ship Fast</h3>
+          <p className="text-sm text-text-muted">
+            Built on FastAPI + React + Vite. Secure defaults so you can focus on building.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { Fingerprint, LogIn } from "lucide-react";
+import { useAuth } from "../auth";
+import { Card, CardContent, CardHeader } from "../components/Card";
+import { Button } from "../components/Button";
+import { Alert } from "../components/Alert";
+
+export function Login() {
+  const { login, isAuthenticated } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (isAuthenticated) {
+    return (
+      <div className="max-w-md mx-auto py-16 text-center">
+        <Alert variant="info">You are already logged in.</Alert>
+      </div>
+    );
+  }
+
+  const handleLogin = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await login();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto py-16">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <LogIn className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-text">Welcome Back</h2>
+              <p className="text-sm text-text-muted">Login with your passkey</p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && <Alert variant="error">{error}</Alert>}
+
+          <Button onClick={handleLogin} disabled={loading} className="w-full">
+            <Fingerprint className="w-4 h-4" />
+            {loading ? "Authenticating..." : "Login with Passkey"}
+          </Button>
+
+          <p className="text-center text-sm text-text-muted">
+            No account?{" "}
+            <Link to="/register" className="text-primary hover:underline">
+              Register
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { Fingerprint, UserPlus } from "lucide-react";
+import { useAuth } from "../auth";
+import { Card, CardContent, CardHeader } from "../components/Card";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+import { Alert } from "../components/Alert";
+
+export function Register() {
+  const { register, isAuthenticated } = useAuth();
+  const [displayName, setDisplayName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (isAuthenticated) {
+    return (
+      <div className="max-w-md mx-auto py-16 text-center">
+        <Alert variant="info">You are already registered and logged in.</Alert>
+      </div>
+    );
+  }
+
+  const handleRegister = async () => {
+    if (!displayName.trim()) {
+      setError("Please enter a display name");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      await register(displayName.trim());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto py-16">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-xl">
+              <UserPlus className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-text">Create Account</h2>
+              <p className="text-sm text-text-muted">Register with a passkey</p>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error && <Alert variant="error">{error}</Alert>}
+
+          <Input
+            label="Display Name"
+            placeholder="Enter your name"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleRegister()}
+          />
+
+          <Button onClick={handleRegister} disabled={loading} className="w-full">
+            <Fingerprint className="w-4 h-4" />
+            {loading ? "Creating account..." : "Register with Passkey"}
+          </Button>
+
+          <p className="text-center text-sm text-text-muted">
+            Already have an account?{" "}
+            <Link to="/login" className="text-primary hover:underline">
+              Login
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { Fingerprint, Plus, Trash2, AlertCircle } from "lucide-react";
+import { apiFetch } from "../auth";
+import { toCreateOptions, serializeCreateResponse } from "../auth/webauthn";
+import { Card, CardContent, CardHeader } from "../components/Card";
+import { Button } from "../components/Button";
+import { Alert } from "../components/Alert";
+
+interface Passkey {
+  id: string;
+  label: string | null;
+  created_at: string;
+  last_used_at: string | null;
+  revoked_at: string | null;
+}
+
+export function Settings() {
+  const queryClient = useQueryClient();
+  const [addLoading, setAddLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastPasskeyError, setLastPasskeyError] = useState<string | null>(null);
+
+  const { data: passkeys, isLoading } = useQuery<Passkey[]>({
+    queryKey: ["passkeys"],
+    queryFn: async () => {
+      const res = await apiFetch<{ passkeys: Passkey[] }>("/auth/passkeys");
+      if (!res.ok) throw new Error("Failed to load passkeys");
+      return res.data.passkeys;
+    },
+  });
+
+  const revokeMutation = useMutation({
+    mutationFn: async (passkeyId: string) => {
+      setLastPasskeyError(null);
+      const res = await apiFetch(`/auth/passkeys/${passkeyId}/revoke`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        const data = res.data as { error?: string; detail?: string };
+        if (data.error === "LAST_PASSKEY" || data.detail?.includes("LAST_PASSKEY")) {
+          throw new Error("LAST_PASSKEY");
+        }
+        throw new Error(data.detail || "Revoke failed");
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["passkeys"] });
+    },
+    onError: (err: Error) => {
+      if (err.message === "LAST_PASSKEY") {
+        setLastPasskeyError(
+          "Cannot revoke your last active passkey. Add another passkey first to maintain account access."
+        );
+      } else {
+        setError(err.message);
+      }
+    },
+  });
+
+  const handleAddPasskey = async () => {
+    setAddLoading(true);
+    setError(null);
+    try {
+      const startRes = await apiFetch<{ options: Record<string, unknown>; flow_id: string }>(
+        "/auth/passkey/add/start",
+        { method: "POST" }
+      );
+      if (!startRes.ok) throw new Error("Failed to start passkey addition");
+
+      const createOptions = toCreateOptions(
+        startRes.data.options as unknown as Parameters<typeof toCreateOptions>[0]
+      );
+      const credential = (await navigator.credentials.create(
+        createOptions
+      )) as PublicKeyCredential | null;
+      if (!credential) throw new Error("Passkey creation cancelled");
+
+      const finishRes = await apiFetch("/auth/passkey/add/finish", {
+        method: "POST",
+        body: JSON.stringify({
+          flow_id: startRes.data.flow_id,
+          credential: serializeCreateResponse(credential),
+        }),
+      });
+      if (!finishRes.ok) throw new Error("Failed to add passkey");
+
+      queryClient.invalidateQueries({ queryKey: ["passkeys"] });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to add passkey");
+    } finally {
+      setAddLoading(false);
+    }
+  };
+
+  const activePasskeys = passkeys?.filter((p) => !p.revoked_at) ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-text">Settings</h1>
+        <p className="text-text-muted">Manage your passkeys and account security</p>
+      </div>
+
+      {error && <Alert variant="error">{error}</Alert>}
+      {lastPasskeyError && (
+        <Alert variant="warning">
+          <div className="flex items-start gap-2">
+            <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
+            <span>{lastPasskeyError}</span>
+          </div>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Fingerprint className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold text-text">Passkeys</h2>
+            <span className="text-sm text-text-muted">({activePasskeys.length} active)</span>
+          </div>
+          <Button size="sm" onClick={handleAddPasskey} disabled={addLoading}>
+            <Plus className="w-4 h-4" />
+            {addLoading ? "Adding..." : "Add Passkey"}
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
+            </div>
+          ) : passkeys && passkeys.length > 0 ? (
+            <div className="divide-y divide-border">
+              {passkeys.map((passkey) => (
+                <div key={passkey.id} className="flex items-center justify-between py-3">
+                  <div>
+                    <p className="text-sm font-medium text-text">
+                      {passkey.label || "Unnamed passkey"}
+                      {passkey.revoked_at && (
+                        <span className="ml-2 text-xs text-danger">(revoked)</span>
+                      )}
+                    </p>
+                    <p className="text-xs text-text-muted font-mono">{passkey.id}</p>
+                    <p className="text-xs text-text-muted">
+                      Created: {new Date(passkey.created_at).toLocaleDateString()}
+                      {passkey.last_used_at && (
+                        <> | Last used: {new Date(passkey.last_used_at).toLocaleDateString()}</>
+                      )}
+                    </p>
+                  </div>
+                  {!passkey.revoked_at && (
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      onClick={() => revokeMutation.mutate(passkey.id)}
+                      disabled={revokeMutation.isPending}
+                    >
+                      <Trash2 className="w-3 h-3" />
+                      Revoke
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-text-muted py-4 text-center">No passkeys found.</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,6 @@
+export { Landing } from "./Landing";
+export { Register } from "./Register";
+export { Login } from "./Login";
+export { Dashboard } from "./Dashboard";
+export { Settings } from "./Settings";
+export { Admin } from "./Admin";

package/templates/fullstack/web/src/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/templates/fullstack/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/fullstack/web/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["src"]
+}

package/templates/fullstack/web/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/fullstack/web/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts"]
+}

package/templates/fullstack/web/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+});

package/templates/fullstack/web/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+  },
+});