Security key support

app/api/auth/login/route.ts

@@ -1,14 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(req: NextRequest) {
-	const { username, password, totp } = await req.json();
+	const { username, password } = await req.json();
 
 	const res = await fetch("http://localhost:3001/auth/login", {
 		method: "POST",
 		headers: {
 			Authorization:
 				"Basic " +
-				Buffer.from(`${username}:${password}${totp}`).toString("base64"),
+				Buffer.from(`${username}:${password}`).toString("base64"),
 		},
 	});
 
@@ -16,14 +16,6 @@ export async function POST(req: NextRequest) {
 		return NextResponse.json({ error: "Invalid credentials" }, { status: 401 });
 	}
 
-	const { token } = await res.json();
-	const response = NextResponse.json({ success: true });
-	response.cookies.set("token", token, {
-		httpOnly: true,
-		secure: true,
-		sameSite: "strict",
-		maxAge: 60 * 60 * 8,
-		path: "/",
-	});
-	return response;
+	// Returns { session_id, challenge } — browser completes the WebAuthn step
+	return NextResponse.json(await res.json());
 }

app/api/auth/register/finish/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+	const body = await req.json();
+
+	const res = await fetch("http://localhost:3001/auth/register/finish", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body),
+	});
+
+	if (!res.ok) {
+		return NextResponse.json({ error: "Registration failed" }, { status: 400 });
+	}
+
+	return NextResponse.json(await res.json());
+}

app/api/auth/register/start/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+	const { username, password } = await req.json();
+
+	const res = await fetch("http://localhost:3001/auth/register/start", {
+		method: "POST",
+		headers: {
+			Authorization:
+				"Basic " +
+				Buffer.from(`${username}:${password}`).toString("base64"),
+		},
+	});
+
+	if (!res.ok) {
+		return NextResponse.json({ error: "Invalid credentials" }, { status: 401 });
+	}
+
+	return NextResponse.json(await res.json());
+}

app/api/auth/verify/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+	const body = await req.json();
+
+	const res = await fetch("http://localhost:3001/auth/verify", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body),
+	});
+
+	if (!res.ok) {
+		return NextResponse.json(
+			{ error: "YubiKey verification failed" },
+			{ status: 401 },
+		);
+	}
+
+	const { token } = await res.json();
+	const response = NextResponse.json({ success: true });
+	response.cookies.set("token", token, {
+		httpOnly: true,
+		secure: true,
+		sameSite: "strict",
+		maxAge: 60 * 60 * 8,
+		path: "/",
+	});
+	return response;
+}

app/auth/page.tsx

@@ -2,14 +2,30 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
+function b64uToBuf(b64u: string): ArrayBuffer {
+	const b64 = b64u.replace(/-/g, "+").replace(/_/g, "/");
+	const bin = atob(b64);
+	const buf = new Uint8Array(bin.length);
+	for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+	return buf.buffer;
+}
+
+function bufToB64u(buf: ArrayBuffer): string {
+	const bytes = new Uint8Array(buf);
+	let bin = "";
+	for (const b of bytes) bin += String.fromCharCode(b);
+	return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+type Status = "idle" | "checking" | "waiting_yubikey" | "verifying";
+
 export default function AuthPage() {
 	const router = useRouter();
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
-	const [totp, setTotp] = useState("");
 	const [error, setError] = useState("");
-	const [loading, setLoading] = useState(false);
-	const [checking, setChecking] = useState(true);
+	const [status, setStatus] = useState<Status>("idle");
+	const [initialChecking, setInitialChecking] = useState(true);
 
 	useEffect(() => {
 		async function checkAuth() {
@@ -22,7 +38,7 @@ export default function AuthPage() {
 					router.push(callbackUrl);
 				}
 			} finally {
-				setChecking(false);
+				setInitialChecking(false);
 			}
 		}
 		checkAuth();
@@ -30,29 +46,96 @@ export default function AuthPage() {
 
 	async function handleLogin(e: React.FormEvent) {
 		e.preventDefault();
-		setLoading(true);
 		setError("");
+		setStatus("checking");
+
 		try {
-			const res = await fetch("/api/auth/login", {
+			// Step 1: verify password → get WebAuthn challenge
+			const loginRes = await fetch("/api/auth/login", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ username, password, totp }),
+				body: JSON.stringify({ username, password }),
 			});
-			if (!res.ok) {
-				setError("Invalid credentials or authenticator code.");
-				setLoading(false);
+
+			if (!loginRes.ok) {
+				setError("Invalid credentials.");
+				setStatus("idle");
 				return;
 			}
+
+			const { session_id, challenge } = await loginRes.json();
+
+			// Step 2: prompt YubiKey tap
+			setStatus("waiting_yubikey");
+			const opts = challenge.publicKey;
+			opts.challenge = b64uToBuf(opts.challenge);
+			if (opts.allowCredentials) {
+				opts.allowCredentials = opts.allowCredentials.map(
+					(c: { id: string; type: string; transports?: string[] }) => ({
+						...c,
+						id: b64uToBuf(c.id),
+					}),
+				);
+			}
+
+			let cred: PublicKeyCredential;
+			try {
+				cred = (await navigator.credentials.get({
+					publicKey: opts,
+				})) as PublicKeyCredential;
+			} catch (err: unknown) {
+				setError(
+					"YubiKey error: " +
+						(err instanceof Error ? err.message : "cancelled"),
+				);
+				setStatus("idle");
+				return;
+			}
+
+			// Step 3: verify assertion → set cookie
+			setStatus("verifying");
+			const assertion = cred.response as AuthenticatorAssertionResponse;
+
+			const verifyRes = await fetch("/api/auth/verify", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					session_id,
+					credential: {
+						id: cred.id,
+						rawId: bufToB64u(cred.rawId),
+						type: cred.type,
+						response: {
+							authenticatorData: bufToB64u(assertion.authenticatorData),
+							clientDataJSON: bufToB64u(assertion.clientDataJSON),
+							signature: bufToB64u(assertion.signature),
+							userHandle: assertion.userHandle
+								? bufToB64u(assertion.userHandle)
+								: null,
+						},
+						extensions: {},
+					},
+				}),
+			});
+
+			if (!verifyRes.ok) {
+				setError("YubiKey verification failed.");
+				setStatus("idle");
+				return;
+			}
+
 			const callbackUrl =
 				new URLSearchParams(window.location.search).get("callbackUrl") ?? "/";
 			router.push(callbackUrl);
 		} catch {
 			setError("Something went wrong. Try again.");
-			setLoading(false);
+			setStatus("idle");
 		}
 	}
 
-	if (checking) return null;
+	if (initialChecking) return null;
+
+	const busy = status !== "idle";
 
 	return (
 		<main className="h-full bg-gray-100 flex items-center justify-center">
@@ -79,13 +162,14 @@ export default function AuthPage() {
 							value={username}
 							onChange={(e) => setUsername(e.target.value)}
 							required
+							disabled={busy}
 							autoComplete="username"
 							className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
 						/>
 					</div>
 
 					{/* Password */}
-					<div className="mb-4">
+					<div className="mb-6">
 						<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
 							Password
 						</label>
@@ -94,44 +178,38 @@ export default function AuthPage() {
 							value={password}
 							onChange={(e) => setPassword(e.target.value)}
 							required
+							disabled={busy}
 							autoComplete="current-password"
 							className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
 						/>
 					</div>
 
-					{/* TOTP */}
-					<div className="mb-6">
-						<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
-							Authenticator code
-						</label>
-						<input
-							type="text"
-							value={totp}
-							onChange={(e) =>
-								setTotp(e.target.value.replace(/\D/g, "").slice(0, 6))
-							}
-							required
-							autoComplete="one-time-code"
-							inputMode="numeric"
-							placeholder="000000"
-							className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors tracking-widest"
-						/>
-					</div>
+					{/* YubiKey cue */}
+					{status === "waiting_yubikey" && (
+						<p className="text-sm text-blue-500 mb-4 text-center animate-pulse">
+							Touch your YubiKey…
+						</p>
+					)}
 
 					{/* Error */}
-					{error && <p className="text-[13px] text-red-400 mb-4">{error}</p>}
+					{error && (
+						<p className="text-[13px] text-red-400 mb-4">{error}</p>
+					)}
 
 					{/* Submit */}
 					<button
 						type="submit"
-						disabled={loading}
+						disabled={busy}
 						className={`w-full py-2.5 rounded-xl text-md border border-blue-600 shadow-sm text-white font-[600] tracking-wide transition-colors ${
-							loading
+							busy
 								? "bg-blue-200 cursor-not-allowed"
 								: "bg-blue-500 hover:bg-blue-400 cursor-pointer"
 						}`}
 					>
-						{loading ? "Signing in..." : "Sign in"}
+						{status === "idle" && "Sign in"}
+						{status === "checking" && "Checking…"}
+						{status === "waiting_yubikey" && "Waiting for YubiKey…"}
+						{status === "verifying" && "Verifying…"}
 					</button>
 				</form>
 			</div>

app/enroll/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+import { useState } from "react";
+
+function b64uToBuf(b64u: string): ArrayBuffer {
+	const b64 = b64u.replace(/-/g, "+").replace(/_/g, "/");
+	const bin = atob(b64);
+	const buf = new Uint8Array(bin.length);
+	for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+	return buf.buffer;
+}
+
+function bufToB64u(buf: ArrayBuffer): string {
+	const bytes = new Uint8Array(buf);
+	let bin = "";
+	for (const b of bytes) bin += String.fromCharCode(b);
+	return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+type Status = "idle" | "starting" | "waiting_yubikey" | "saving" | "done" | "error";
+
+export default function EnrollPage() {
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [status, setStatus] = useState<Status>("idle");
+	const [message, setMessage] = useState("");
+
+	async function enroll(e: React.FormEvent) {
+		e.preventDefault();
+		setStatus("starting");
+		setMessage("");
+
+		try {
+			// Step 1: get registration challenge
+			const startRes = await fetch("/api/auth/register/start", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ username, password }),
+			});
+
+			if (!startRes.ok) {
+				setMessage("Invalid credentials.");
+				setStatus("error");
+				return;
+			}
+
+			const { session_id, challenge } = await startRes.json();
+
+			// Step 2: create credential with YubiKey
+			setStatus("waiting_yubikey");
+			const opts = challenge.publicKey;
+			opts.challenge = b64uToBuf(opts.challenge);
+			opts.user.id = b64uToBuf(opts.user.id);
+			if (opts.excludeCredentials) {
+				opts.excludeCredentials = opts.excludeCredentials.map(
+					(c: { id: string; type: string; transports?: string[] }) => ({
+						...c,
+						id: b64uToBuf(c.id),
+					}),
+				);
+			}
+
+			let cred: PublicKeyCredential;
+			try {
+				cred = (await navigator.credentials.create({
+					publicKey: opts,
+				})) as PublicKeyCredential;
+			} catch (err: unknown) {
+				setMessage(
+					"YubiKey error: " +
+						(err instanceof Error ? err.message : "cancelled"),
+				);
+				setStatus("error");
+				return;
+			}
+
+			// Step 3: save credential
+			setStatus("saving");
+			const attestation = cred.response as AuthenticatorAttestationResponse;
+
+			const finishRes = await fetch("/api/auth/register/finish", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					session_id,
+					credential: {
+						id: cred.id,
+						rawId: bufToB64u(cred.rawId),
+						type: cred.type,
+						response: {
+							attestationObject: bufToB64u(attestation.attestationObject),
+							clientDataJSON: bufToB64u(attestation.clientDataJSON),
+							transports: attestation.getTransports
+								? attestation.getTransports()
+								: [],
+						},
+						extensions: {},
+					},
+				}),
+			});
+
+			if (!finishRes.ok) {
+				setMessage("Registration failed. Check server logs.");
+				setStatus("error");
+				return;
+			}
+
+			setStatus("done");
+			setMessage("YubiKey enrolled! You can now log in.");
+		} catch {
+			setMessage("Something went wrong. Try again.");
+			setStatus("error");
+		}
+	}
+
+	const canSubmit = status === "idle" || status === "error";
+	const busy = !canSubmit;
+
+	return (
+		<main className="h-full bg-gray-100 flex items-center justify-center">
+			<div className="bg-white border border-gray-300 rounded-2xl md:p-12 p-8 w-full m-[10px] md:max-w-md shadow-sm">
+				{/* Header */}
+				<div className="mb-8">
+					<p className="text-[11px] tracking-widest text-blue-500 uppercase mb-2">
+						dell-xps-nixos-serv
+					</p>
+					<h1 className="text-[28px] font-normal text-gray-900 tracking-tight mb-1.5">
+						Enroll YubiKey
+					</h1>
+					<p className="text-sm text-gray-400">One-time security key setup</p>
+				</div>
+
+				{status === "done" ? (
+					<p className="text-sm text-green-500">{message}</p>
+				) : (
+					<form onSubmit={enroll}>
+						{/* Username */}
+						<div className="mb-4">
+							<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
+								Username
+							</label>
+							<input
+								type="text"
+								value={username}
+								onChange={(e) => setUsername(e.target.value)}
+								required
+								disabled={busy}
+								autoComplete="username"
+								className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
+							/>
+						</div>
+
+						{/* Password */}
+						<div className="mb-6">
+							<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
+								Password
+							</label>
+							<input
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								required
+								disabled={busy}
+								autoComplete="current-password"
+								className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
+							/>
+						</div>
+
+						{/* YubiKey cue */}
+						{status === "waiting_yubikey" && (
+							<p className="text-sm text-blue-500 mb-4 text-center animate-pulse">
+								Touch your YubiKey…
+							</p>
+						)}
+
+						{/* Error */}
+						{status === "error" && message && (
+							<p className="text-[13px] text-red-400 mb-4">{message}</p>
+						)}
+
+						{/* Submit */}
+						<button
+							type="submit"
+							disabled={busy}
+							className={`w-full py-2.5 rounded-xl text-md border border-blue-600 shadow-sm text-white font-[600] tracking-wide transition-colors ${
+								busy
+									? "bg-blue-200 cursor-not-allowed"
+									: "bg-blue-500 hover:bg-blue-400 cursor-pointer"
+							}`}
+						>
+							{status === "idle" && "Register YubiKey"}
+							{status === "error" && "Try again"}
+							{status === "starting" && "Starting…"}
+							{status === "waiting_yubikey" && "Touch YubiKey…"}
+							{status === "saving" && "Saving…"}
+						</button>
+					</form>
+				)}
+			</div>
+		</main>
+	);
+}