Rework authentication

AGENTS.md

@@ -0,0 +1,53 @@
+# Core Concepts
+
+Headplane is a web application to manage Headscale, a self-hosted implementation
+of the Tailscale control server. There are a few tenets that guide the entire
+development of the project:
+
+- **Simple starts**: We want to make it as easy as possible to set up and use
+  Headplane, while still providing powerful features for advanced users. This
+  means that we prioritize a clean and intuitive user interface, as well as
+  straightforward installation and configuration processes.
+
+- **No breaking changes**: We want to avoid making breaking changes to the
+  project as much as possible. This means that we will strive to maintain
+  backward compatibility and provide clear migration paths when necessary.
+
+- **Documentation**: This is the most important part of the project, without it
+  the entire project falls apart and is hard to use.
+
+## Project Management
+
+It's hard to manage this project easily, use the `gh` CLI when responding to
+prompts to get context. Some common issue tags to keep track of include a
+"Needs Triage", "Needs Info", "Bug", "Enhancement", and several other tags based
+on what parts of the project are affected.
+
+## Headplane Agent
+
+The Headplane Agent is a lightweight component that runs on the same server as
+Headplane and connects directly to the Tailnet in order to pull in details about
+nodes that aren't available through the Headscale API such as versions, etc.
+
+## WebSSH
+
+This is an ephemeral WASM shim that runs in the browser and connects directly
+to the Tailnet using Tailscale's go packages. It allows anyone to open up an
+ephemeral machine in the Tailnet that directly SSHes into a target node.
+
+## Build/Tooling
+
+Headplane is a React Router 7 (framework mode) project built with Vite. Take
+care to use our preferred PNPM version and Node version as defined in the
+`engines` field of `package.json`. We also use TypeScript Go and Oxfmt for
+type-checking and formatting respectively.
+
+You can also run Headscale CLI commands with
+`docker exec headscale headscale <command>` when the dev environment is running.
+
+## Docs
+
+The project has a documentation site available at the `docs/` directory built
+with VitePress. The documentation is written in Markdown and can be easily
+edited and extended. If making changes to staple features, please take care to
+also update the documentation to reflect any changes in functionality or usage.

app/layouts/dashboard.tsx

@@ -1,53 +1,54 @@
-import { Outlet, redirect } from 'react-router';
-import { ErrorBanner } from '~/components/error-banner';
-import { pruneEphemeralNodes } from '~/server/db/pruner';
-import { isDataUnauthorizedError } from '~/server/headscale/api/error-client';
-import log from '~/utils/log';
-import type { Route } from './+types/dashboard';
+import { Outlet, redirect } from "react-router";
+
+import { ErrorBanner } from "~/components/error-banner";
+import { pruneEphemeralNodes } from "~/server/db/pruner";
+import { isDataUnauthorizedError } from "~/server/headscale/api/error-client";
+import log from "~/utils/log";
+
+import type { Route } from "./+types/dashboard";
 
 export async function loader({ request, context, ...rest }: Route.LoaderArgs) {
-	const session = await context.sessions.auth(request);
-	const api = context.hsApi.getRuntimeClient(session.api_key);
+  const principal = await context.auth.require(request);
+  const apiKey = context.auth.getHeadscaleApiKey(principal, context.oidc?.apiKey);
+  const api = context.hsApi.getRuntimeClient(apiKey);
 
-	// MARK: The session should stay valid if Headscale isn't healthy
-	const healthy = await api.isHealthy();
-	if (healthy) {
-		try {
-			await api.getApiKeys();
-			await pruneEphemeralNodes({ context, request, ...rest });
-		} catch (error) {
-			if (isDataUnauthorizedError(error)) {
-				log.warn(
-					'auth',
-					'Logging out %s due to expired API key',
-					session.user.name,
-				);
-				return redirect('/login', {
-					headers: {
-						'Set-Cookie': await context.sessions.destroySession(),
-					},
-				});
-			}
-		}
-	}
+  // MARK: The session should stay valid if Headscale isn't healthy
+  const healthy = await api.isHealthy();
+  if (healthy) {
+    try {
+      await api.getApiKeys();
+      await pruneEphemeralNodes({ context, request, ...rest });
+    } catch (error) {
+      if (isDataUnauthorizedError(error)) {
+        const displayName =
+          principal.kind === "oidc" ? principal.profile.name : principal.displayName;
+        log.warn("auth", "Logging out %s due to expired API key", displayName);
+        return redirect("/login", {
+          headers: {
+            "Set-Cookie": await context.auth.destroySession(request),
+          },
+        });
+      }
+    }
+  }
 
-	return {
-		healthy,
-	};
+  return {
+    healthy,
+  };
 }
 
 export default function Layout() {
-	return (
-		<main className="container mx-auto overscroll-contain mt-4 mb-24">
-			<Outlet />
-		</main>
-	);
+  return (
+    <main className="container mx-auto mt-4 mb-24 overscroll-contain">
+      <Outlet />
+    </main>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-	return (
-		<div className="w-fit mx-auto overscroll-contain my-24">
-			<ErrorBanner className="max-w-2xl" error={error} />
-		</div>
-	);
+  return (
+    <div className="mx-auto my-24 w-fit overscroll-contain">
+      <ErrorBanner className="max-w-2xl" error={error} />
+    </div>
+  );
 }