feat: completely overhaul the auth model

* Cookies are now encrypted JWTs (GHSA-wrqq-v7qw-r5w7)
* Authentication is stored in the SQLite database (auto-migrated)
* Session logic is much cleaner

app/routes/acls/acl-action.ts

@@ -31,7 +31,7 @@ export async function aclAction({
 		const { policy, updatedAt } = await context.client.put<{
 			policy: string;
 			updatedAt: string;
-		}>('v1/policy', session.get('api_key')!, {
+		}>('v1/policy', session.api_key, {
 			policy: policyData,
 		});
 

app/routes/acls/acl-loader.ts

@@ -34,7 +34,7 @@ export async function aclLoader({
 		const { policy, updatedAt } = await context.client.get<{
 			policy: string;
 			updatedAt: string | null;
-		}>('v1/policy', session.get('api_key')!);
+		}>('v1/policy', session.api_key);
 
 		// Successfully loaded the policy, mark it as readable
 		// If `updatedAt` is null, it means the policy is in file mode.

app/routes/auth/login/action.ts

@@ -60,25 +60,23 @@ export async function loginAction({
 			};
 		}
 
-		// Set the session
-		const session = await context.sessions.getOrCreate(request);
 		const expiresDays = Math.round(
 			(expiry.getTime() - Date.now()) / 1000 / 60 / 60 / 24,
 		);
 
-		session.set('state', 'auth');
-		session.set('api_key', apiKey);
-		session.set('user', {
-			subject: 'unknown-non-oauth',
-			name: `${lookup.prefix}...`,
-			email: `expires@${expiresDays.toString()}-days`,
-		});
-
 		return redirect('/machines', {
 			headers: {
-				'Set-Cookie': await context.sessions.commit(session, {
-					maxAge: expiry.getTime() - Date.now(),
-				}),
+				'Set-Cookie': await context.sessions.createSession(
+					{
+						api_key: apiKey,
+						user: {
+							subject: 'unknown-non-oauth',
+							name: `${lookup.prefix}...`,
+							email: `expires@${expiresDays.toString()}-days`,
+						},
+					},
+					expiry.getTime() - Date.now(),
+				),
 			},
 		});
 	} catch (error) {

app/routes/auth/login/page.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 import {
 	ActionFunctionArgs,
+	data,
 	Form,
 	LoaderFunctionArgs,
 	Link as RemixLink,
-	data,
 	redirect,
 	useActionData,
 	useLoaderData,
@@ -24,10 +24,8 @@ export async function loader({
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
 	try {
-		const session = await context.sessions.auth(request);
-		if (session.has('api_key')) {
-			return redirect('/machines');
-		}
+		await context.sessions.auth(request);
+		return redirect('/machines');
 	} catch {}
 
 	const qp = new URL(request.url).searchParams;
@@ -104,26 +102,26 @@ export default function Page() {
 						terminal.
 					</Card.Text>
 					<Input
+						className="mt-8 mb-2"
 						isRequired
-						labelHidden
 						label="API Key"
+						labelHidden
 						name="api_key"
 						placeholder="API Key"
 						type="password"
-						className="mt-8 mb-2"
 					/>
 					{formData?.success === false ? (
 						<Card.Text className="text-sm mb-2 text-red-600 dark:text-red-300">
 							{formData.message}
 						</Card.Text>
 					) : undefined}
-					<Button className="w-full" variant="heavy" type="submit">
+					<Button className="w-full" type="submit" variant="heavy">
 						Sign In
 					</Button>
 				</Form>
 				{oidc ? (
 					<RemixLink to="/oidc/start">
-						<Button variant="light" className="w-full mt-2">
+						<Button className="w-full mt-2" variant="light">
 							Single Sign-On
 						</Button>
 					</RemixLink>

app/routes/auth/logout.ts

@@ -9,9 +9,10 @@ export async function action({
 	request,
 	context,
 }: ActionFunctionArgs<LoadContext>) {
-	const session = await context.sessions.auth(request);
-	if (!session.has('api_key')) {
-		return redirect('/login');
+	try {
+		await context.sessions.auth(request);
+	} catch {
+		redirect('/login');
 	}
 
 	// When API key is disabled, we need to explicitly redirect
@@ -22,7 +23,7 @@ export async function action({
 
 	return redirect(url, {
 		headers: {
-			'Set-Cookie': await context.sessions.destroy(session),
+			'Set-Cookie': await context.sessions.destroySession(),
 		},
 	});
 }

app/routes/auth/oidc-callback.ts

@@ -1,9 +1,19 @@
-import { type LoaderFunctionArgs, Session, redirect } from 'react-router';
+import { count } from 'drizzle-orm';
+import { createCookie, type LoaderFunctionArgs, redirect } from 'react-router';
+import { ulid } from 'ulidx';
 import type { LoadContext } from '~/server';
-import type { AuthSession, OidcFlowSession } from '~/server/web/sessions';
+import { users } from '~/server/db/schema';
+import { Roles } from '~/server/web/roles';
 import { finishAuthFlow, formatError } from '~/utils/oidc';
 import { send } from '~/utils/res';
 
+interface OidcFlowSession {
+	state: string;
+	nonce: string;
+	code_verifier: string;
+	redirect_uri: string;
+}
+
 export async function loader({
 	request,
 	context,
@@ -18,13 +28,21 @@ export async function loader({
 		return redirect('/login');
 	}
 
-	const session = await context.sessions.getOrCreate<OidcFlowSession>(request);
-	if (session.get('state') !== 'flow') {
-		return redirect('/login'); // Haven't started an OIDC flow
+	const cookie = createCookie('__oidc_auth_flow', {
+		httpOnly: true,
+		maxAge: 300, // 5 minutes
+	});
+
+	const data: OidcFlowSession | null = await cookie.parse(
+		request.headers.get('Cookie'),
+	);
+
+	if (data === null) {
+		console.warn('OIDC flow session not found');
+		return redirect('/login');
 	}
 
-	const payload = session.get('oidc')!;
-	const { code_verifier, state, nonce, redirect_uri } = payload;
+	const { code_verifier, state, nonce, redirect_uri } = data;
 	if (!code_verifier || !state || !nonce || !redirect_uri) {
 		return send({ error: 'Missing OIDC state' }, { status: 400 });
 	}
@@ -43,19 +61,30 @@ export async function loader({
 
 	try {
 		const user = await finishAuthFlow(context.oidc, flowOptions);
-		session.unset('oidc');
-		const userSession = session as Session<AuthSession>;
 
-		// TODO: This is breaking, to stop the "over-generation" of API
-		// keys because they are currently non-deletable in the headscale
-		// database. Look at this in the future once we have a solution
-		// or we have permissioned API keys.
-		userSession.set('user', user);
-		userSession.set('api_key', context.config.oidc?.headscale_api_key!);
-		userSession.set('state', 'auth');
+		const [{ count: userCount }] = await context.db
+			.select({ count: count() })
+			.from(users);
+
+		await context.db
+			.insert(users)
+			.values({
+				id: ulid(),
+				sub: user.subject,
+				caps: userCount === 0 ? Roles.owner : Roles.member,
+			})
+			.onConflictDoNothing();
+
 		return redirect('/machines', {
 			headers: {
-				'Set-Cookie': await context.sessions.commit(userSession),
+				'Set-Cookie': await context.sessions.createSession({
+					// TODO: This is breaking, to stop the "over-generation" of API
+					// keys because they are currently non-deletable in the headscale
+					// database. Look at this in the future once we have a solution
+					// or we have permissioned API keys.
+					api_key: context.config.oidc?.headscale_api_key!,
+					user,
+				}),
 			},
 		});
 	} catch (error) {

app/routes/auth/oidc-start.ts

@@ -1,42 +1,42 @@
-import { type LoaderFunctionArgs, Session, redirect } from 'react-router';
+import { createCookie, type LoaderFunctionArgs, redirect } from 'react-router';
 import type { LoadContext } from '~/server';
-import { AuthSession, OidcFlowSession } from '~/server/web/sessions';
 import { beginAuthFlow, getRedirectUri } from '~/utils/oidc';
 
 export async function loader({
 	request,
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
-	const session = await context.sessions.getOrCreate<OidcFlowSession>(request);
-	if ((session as Session<AuthSession>).has('api_key')) {
+	try {
+		await context.sessions.auth(request);
 		return redirect('/machines');
-	}
+	} catch {}
 
-	if (!context.oidc) {
+	if (!context.oidc || !context.config.oidc) {
 		throw new Error('OIDC is not enabled');
 	}
 
+	const cookie = createCookie('__oidc_auth_flow', {
+		httpOnly: true,
+		maxAge: 300, // 5 minutes
+	});
+
 	const redirectUri =
 		context.config.oidc?.redirect_uri ?? getRedirectUri(request);
 	const data = await beginAuthFlow(
 		context.oidc,
 		redirectUri,
-		// We can't get here without the OIDC config being defined
-		context.config.oidc!.token_endpoint_auth_method,
+		context.config.oidc.token_endpoint_auth_method,
 	);
 
-	session.set('state', 'flow');
-	session.set('oidc', {
-		state: data.state,
-		nonce: data.nonce,
-		code_verifier: data.codeVerifier,
-		redirect_uri: redirectUri,
-	});
-
 	return redirect(data.url, {
 		status: 302,
 		headers: {
-			'Set-Cookie': await context.sessions.commit(session),
+			'Set-Cookie': await cookie.serialize({
+				state: data.state,
+				nonce: data.nonce,
+				code_verifier: data.codeVerifier,
+				redirect_uri: redirectUri,
+			}),
 		},
 	});
 }

app/routes/machines/machine-actions.ts

@@ -14,7 +14,7 @@ export async function machineAction({
 	);
 
 	const formData = await request.formData();
-	const apiKey = session.get('api_key')!;
+	const apiKey = session.api_key;
 
 	const action = formData.get('action_id')?.toString();
 	if (!action) {
@@ -55,7 +55,7 @@ export async function machineAction({
 	}
 
 	if (
-		node.user.providerId?.split('/').pop() !== session.get('user')!.subject &&
+		node.user.providerId?.split('/').pop() !== session.user.subject &&
 		!check
 	) {
 		throw data('You do not have permission to act on this machine', {

app/routes/machines/machine.tsx

@@ -39,9 +39,9 @@ export async function loader({
 	const [machine, { users }] = await Promise.all([
 		context.client.get<{ node: Machine }>(
 			`v1/node/${params.id}`,
-			session.get('api_key')!,
+			session.api_key,
 		),
-		context.client.get<{ users: User[] }>('v1/user', session.get('api_key')!),
+		context.client.get<{ users: User[] }>('v1/user', session.api_key),
 	]);
 
 	const lookup = await context.agents?.lookup([machine.node.nodeKey]);
@@ -77,7 +77,7 @@ export default function Page() {
 	return (
 		<div>
 			<p className="mb-8 text-md">
-				<RemixLink to="/machines" className="font-medium">
+				<RemixLink className="font-medium" to="/machines">
 					All Machines
 				</RemixLink>
 				<span className="mx-2">/</span>
@@ -91,9 +91,9 @@ export default function Page() {
 			>
 				<span className="flex items-baseline gap-x-4 text-sm">
 					<h1 className="text-2xl font-medium">{node.givenName}</h1>
-					<StatusCircle isOnline={node.online} className="w-4 h-4" />
+					<StatusCircle className="w-4 h-4" isOnline={node.online} />
 				</span>
-				<MenuOptions isFullButton node={node} users={users} magic={magic} />
+				<MenuOptions isFullButton magic={magic} node={node} users={users} />
 			</div>
 			<div className="flex gap-1 mb-4">
 				<div className="border-r border-headplane-100 dark:border-headplane-800 p-2 pr-4">
@@ -123,14 +123,14 @@ export default function Page() {
 					</div>
 				</div>
 			</div>
-			<Routes node={node} isOpen={showRouting} setIsOpen={setShowRouting} />
+			<Routes isOpen={showRouting} node={node} setIsOpen={setShowRouting} />
 			<h2 className="text-xl font-medium mt-8">Subnets & Routing</h2>
 			<div className="flex items-center justify-between mb-4">
 				<p>
 					Subnets let you expose physical network routes onto Tailscale.{' '}
 					<Link
-						to="https://tailscale.com/kb/1019/subnets"
 						name="Tailscale Subnets Documentation"
+						to="https://tailscale.com/kb/1019/subnets"
 					>
 						Learn More
 					</Link>
@@ -138,11 +138,11 @@ export default function Page() {
 				<Button onPress={() => setShowRouting(true)}>Review</Button>
 			</div>
 			<Card
-				variant="flat"
 				className={cn(
 					'w-full max-w-full grid sm:grid-cols-2',
 					'md:grid-cols-4 gap-8 mr-2 text-sm mb-8',
 				)}
+				variant="flat"
 			>
 				<div>
 					<span className="text-headplane-600 dark:text-headplane-300 flex items-center gap-x-1">
@@ -166,11 +166,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
-						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
+						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
@@ -198,11 +198,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
-						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
+						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
@@ -233,11 +233,11 @@ export default function Page() {
 						)}
 					</div>
 					<Button
-						onPress={() => setShowRouting(true)}
 						className={cn(
 							'px-1.5 py-0.5 rounded-md mt-1.5',
 							'text-blue-500 dark:text-blue-400',
 						)}
+						onPress={() => setShowRouting(true)}
 					>
 						Edit
 					</Button>
@@ -249,15 +249,15 @@ export default function Page() {
 				issues.
 			</p>
 			<Card
-				variant="flat"
 				className="w-full max-w-full grid grid-cols-1 lg:grid-cols-2 gap-y-2 sm:gap-x-12"
+				variant="flat"
 			>
 				<div className="flex flex-col gap-1">
 					<Attribute name="Creator" value={node.user.name || node.user.email} />
 					<Attribute name="Machine name" value={node.givenName} />
 					<Attribute
-						tooltip="OS hostname is published by the machine’s operating system and is used as the default name for the machine."
 						name="OS hostname"
+						tooltip="OS hostname is published by the machine’s operating system and is used as the default name for the machine."
 						value={node.name}
 					/>
 					{stats ? (
@@ -267,14 +267,14 @@ export default function Page() {
 						</>
 					) : undefined}
 					<Attribute
-						tooltip="ID for this machine. Used in the Headscale API."
 						name="ID"
+						tooltip="ID for this machine. Used in the Headscale API."
 						value={node.id}
 					/>
 					<Attribute
 						isCopyable
-						tooltip="Public key which uniquely identifies this machine."
 						name="Node key"
+						tooltip="Public key which uniquely identifies this machine."
 						value={node.nodeKey}
 					/>
 					<Attribute
@@ -311,27 +311,27 @@ export default function Page() {
 					</p>
 					<Attribute
 						isCopyable
-						tooltip="This machine’s IPv4 address within your tailnet (your private Tailscale network)."
 						name="Tailscale IPv4"
+						tooltip="This machine’s IPv4 address within your tailnet (your private Tailscale network)."
 						value={getIpv4Address(node.ipAddresses)}
 					/>
 					<Attribute
 						isCopyable
-						tooltip="This machine’s IPv6 address within your tailnet (your private Tailscale network). Connections within your tailnet support IPv6 even if your ISP does not."
 						name="Tailscale IPv6"
+						tooltip="This machine’s IPv6 address within your tailnet (your private Tailscale network). Connections within your tailnet support IPv6 even if your ISP does not."
 						value={getIpv6Address(node.ipAddresses)}
 					/>
 					<Attribute
 						isCopyable
-						tooltip="Users of your tailnet can use this DNS short name to access this machine."
 						name="Short domain"
+						tooltip="Users of your tailnet can use this DNS short name to access this machine."
 						value={node.givenName}
 					/>
 					{magic ? (
 						<Attribute
 							isCopyable
-							tooltip="Users of your tailnet can use this DNS name to access this machine."
 							name="Full domain"
+							tooltip="Users of your tailnet can use this DNS name to access this machine."
 							value={`${node.givenName}.${magic}`}
 						/>
 					) : undefined}
@@ -341,13 +341,13 @@ export default function Page() {
 								Client Connectivity
 							</p>
 							<Attribute
-								tooltip="Whether the machine is behind a difficult NAT that varies the machine’s IP address depending on the destination."
 								name="Varies"
+								tooltip="Whether the machine is behind a difficult NAT that varies the machine’s IP address depending on the destination."
 								value={stats.NetInfo?.MappingVariesByDestIP ? 'Yes' : 'No'}
 							/>
 							<Attribute
-								tooltip="Whether the machine needs to traverse NATs with hairpinning."
 								name="Hairpinning"
+								tooltip="Whether the machine needs to traverse NATs with hairpinning."
 								value={stats.NetInfo?.HairPinning ? 'Yes' : 'No'}
 							/>
 							<Attribute

app/routes/machines/overview.tsx

@@ -18,7 +18,7 @@ export async function loader({
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
 	const session = await context.sessions.auth(request);
-	const user = session.get('user');
+	const user = session.user;
 	if (!user) {
 		throw new Error('Missing user session. Please log in again.');
 	}
@@ -41,11 +41,8 @@ export async function loader({
 	);
 
 	const [{ nodes }, { users }] = await Promise.all([
-		context.client.get<{ nodes: Machine[] }>(
-			'v1/node',
-			session.get('api_key')!,
-		),
-		context.client.get<{ users: User[] }>('v1/user', session.get('api_key')!),
+		context.client.get<{ nodes: Machine[] }>('v1/node', session.api_key),
+		context.client.get<{ users: User[] }>('v1/user', session.api_key),
 	]);
 
 	let magic: string | undefined;
@@ -90,18 +87,18 @@ export default function Page() {
 					<p>
 						Manage the devices connected to your Tailnet.{' '}
 						<Link
-							to="https://tailscale.com/kb/1372/manage-devices"
 							name="Tailscale Manage Devices Documentation"
+							to="https://tailscale.com/kb/1372/manage-devices"
 						>
 							Learn more
 						</Link>
 					</p>
 				</div>
 				<NewMachine
+					disabledKeys={data.preAuth ? [] : ['pre-auth']}
+					isDisabled={!data.writable}
 					server={data.publicServer ?? data.server}
 					users={data.users}
-					isDisabled={!data.writable}
-					disabledKeys={data.preAuth ? [] : ['pre-auth']}
 				/>
 			</div>
 			<table className="table-auto w-full rounded-lg">
@@ -141,16 +138,16 @@ export default function Page() {
 				>
 					{data.populatedNodes.map((machine) => (
 						<MachineRow
-							key={machine.id}
-							node={machine}
-							users={data.users}
-							magic={data.magic}
 							isAgent={data.agent ? data.agent === machine.nodeKey : undefined}
 							isDisabled={
 								data.writable
 									? false // If the user has write permissions, they can edit all machines
 									: machine.user.providerId?.split('/').pop() !== data.subject
 							}
+							key={machine.id}
+							magic={data.magic}
+							node={machine}
+							users={data.users}
 						/>
 					))}
 				</tbody>

app/routes/settings/auth-keys/actions.ts

@@ -20,7 +20,7 @@ export async function authKeysAction({
 	}
 
 	const formData = await request.formData();
-	const apiKey = session.get('api_key')!;
+	const apiKey = session.api_key;
 	const action = formData.get('action_id')?.toString();
 	if (!action) {
 		throw data('Missing `action_id` in the form data.', {

app/routes/settings/auth-keys/overview.tsx

@@ -1,8 +1,7 @@
 import { FileKey2 } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { useLoaderData } from 'react-router';
-import { Link as RemixLink } from 'react-router';
+import { Link as RemixLink, useLoaderData } from 'react-router';
 import Code from '~/components/Code';
 import Link from '~/components/Link';
 import Notice from '~/components/Notice';
@@ -23,7 +22,7 @@ export async function loader({
 	const session = await context.sessions.auth(request);
 	const { users } = await context.client.get<{ users: User[] }>(
 		'v1/user',
-		session.get('api_key')!,
+		session.api_key,
 	);
 
 	const preAuthKeys = await Promise.all(
@@ -36,7 +35,7 @@ export async function loader({
 				try {
 					const { preAuthKeys } = await context.client.get<{
 						preAuthKeys: PreAuthKey[];
-					}>(`v1/preauthkey?${qp.toString()}`, session.get('api_key')!);
+					}>(`v1/preauthkey?${qp.toString()}`, session.api_key);
 					return {
 						success: true,
 						user,
@@ -139,13 +138,15 @@ export default function Page() {
 
 					return key.reusable;
 				}
+
+				return false;
 			});
 	}, [keys, selectedUser, status]);
 
 	return (
 		<div className="flex flex-col md:w-2/3">
 			<p className="mb-8 text-md">
-				<RemixLink to="/settings" className="font-medium">
+				<RemixLink className="font-medium" to="/settings">
 					Settings
 				</RemixLink>
 				<span className="mx-2">/</span> Pre-Auth Keys
@@ -176,8 +177,8 @@ export default function Page() {
 				devices to your Tailnet. To learn more about using pre-authentication
 				keys, visit the{' '}
 				<Link
-					to="https://tailscale.com/kb/1085/auth-keys/"
 					name="Tailscale Auth Keys documentation"
+					to="https://tailscale.com/kb/1085/auth-keys/"
 				>
 					Tailscale documentation
 				</Link>
@@ -185,14 +186,14 @@ export default function Page() {
 			<AddAuthKey users={users} />
 			<div className="flex items-center gap-4 mt-4">
 				<Select
-					label="User"
-					placeholder="Select a user"
 					className="w-full"
 					defaultSelectedKey="__headplane_all"
 					isDisabled={isDisabled}
+					label="User"
 					onSelectionChange={(value) =>
 						setSelectedUser(value?.toString() ?? '')
 					}
+					placeholder="Select a user"
 				>
 					{[
 						<Select.Item key="__headplane_all">All</Select.Item>,
@@ -202,14 +203,14 @@ export default function Page() {
 					]}
 				</Select>
 				<Select
-					label="Status"
-					placeholder="Select a status"
 					className="w-full"
 					defaultSelectedKey="active"
 					isDisabled={isDisabled}
+					label="Status"
 					onSelectionChange={(value) =>
 						setStatus((value?.toString() ?? 'active') as Status)
 					}
+					placeholder="Select a status"
 				>
 					<Select.Item key="all">All</Select.Item>
 					<Select.Item key="active">Active</Select.Item>

app/routes/ssh/console.tsx

@@ -1,24 +1,24 @@
+/** biome-ignore-all lint/correctness/noNestedComponentDefinitions: Wtf? */
 import { faker } from '@faker-js/faker';
+import { eq } from 'drizzle-orm';
 import { Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import {
 	ActionFunctionArgs,
+	data,
 	LoaderFunctionArgs,
 	ShouldRevalidateFunction,
-	data,
 	useLoaderData,
 	useSubmit,
 } from 'react-router';
+import wasm from '~/hp_ssh.wasm?url';
 import { LoadContext } from '~/server';
+import { EphemeralNodeInsert, ephemeralNodes } from '~/server/db/schema';
 import { Machine, PreAuthKey, User } from '~/types';
 import { useLiveData } from '~/utils/live-data';
-import XTerm from './xterm.client';
-
-import { eq } from 'drizzle-orm';
-import wasm from '~/hp_ssh.wasm?url';
-import { EphemeralNodeInsert, ephemeralNodes } from '~/server/db/schema';
 import '~/wasm_exec';
 import UserPrompt from './user-prompt';
+import XTerm from './xterm.client';
 
 export const shouldRevalidate: ShouldRevalidateFunction = () => {
 	return false;
@@ -36,16 +36,12 @@ export async function loader({
 	}
 
 	const session = await context.sessions.auth(request);
-	const user = session.get('user');
-	if (!user) {
-		throw data('Unauthorized', 401);
-	}
-	if (user.subject === 'unknown-non-oauth') {
+	if (session.user.subject === 'unknown-non-oauth') {
 		throw data('Only OAuth users are allowed to use WebSSH', 403);
 	}
 	const { users } = await context.client.get<{ users: User[] }>(
 		'v1/user',
-		session.get('api_key')!,
+		session.api_key,
 	);
 
 	// MARK: This assumes that a user has authenticated with Headscale first
@@ -57,19 +53,19 @@ export async function loader({
 		if (!subject) {
 			return false;
 		}
-		return subject === user.subject;
+		return subject === session.user.subject;
 	});
 
 	if (!lookup) {
 		throw data(
-			`User with subject ${user.subject} not found within Headscale`,
+			`User with subject ${session.user.subject} not found within Headscale`,
 			404,
 		);
 	}
 
 	const { preAuthKey } = await context.client.post<{ preAuthKey: PreAuthKey }>(
 		'v1/preauthkey',
-		session.get('api_key')!,
+		session.api_key,
 		{
 			user: lookup.id,
 			reusable: false,
@@ -122,7 +118,7 @@ export async function loader({
 
 	const { nodes } = await context.client.get<{ nodes: Machine[] }>(
 		'v1/node',
-		session.get('api_key')!,
+		session.api_key,
 	);
 
 	// node.name is the hostname, given_name is the set name
@@ -133,7 +129,7 @@ export async function loader({
 
 	// Last thing is keeping track of the ephemeral node in the database
 	// because Headscale doesn't automatically delete ephemeral nodes???
-	const [ephemeralNode] = await context.db
+	const [_ephemeralNode] = await context.db
 		.insert(ephemeralNodes)
 		.values({
 			auth_key: preAuthKey.key,
@@ -176,7 +172,7 @@ export async function action({
 	request,
 	context,
 }: ActionFunctionArgs<LoadContext>) {
-	const session = await context.sessions.auth(request);
+	const _session = await context.sessions.auth(request);
 	if (!context.agents?.agentID()) {
 		throw data(
 			'WebSSH is only available with the Headplane agent integration',
@@ -274,9 +270,9 @@ export default function Page() {
 			) : (
 				<div className="flex flex-col h-screen">
 					<XTerm
+						hostname={sshDetails.hostname}
 						ipn={ipn}
 						username={sshDetails.username}
-						hostname={sshDetails.hostname}
 					/>
 				</div>
 			)}

app/routes/users/onboarding-skip.tsx

@@ -1,16 +1,23 @@
+import { eq } from 'drizzle-orm';
 import { LoaderFunctionArgs, redirect } from 'react-router';
 import { LoadContext } from '~/server';
+import { users } from '~/server/db/schema';
 
 export async function loader({
 	request,
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
-	const session = await context.sessions.auth(request);
-	const user = session.get('user');
-	if (!user) {
+	try {
+		const { user } = await context.sessions.auth(request);
+		await context.db
+			.update(users)
+			.set({
+				onboarded: true,
+			})
+			.where(eq(users.sub, user.subject));
+
+		return redirect('/machines');
+	} catch {
 		return redirect('/login');
 	}
-
-	context.sessions.overrideOnboarding(user.subject, true);
-	return redirect('/machines');
 }

app/routes/users/onboarding.tsx

@@ -4,12 +4,7 @@ import { GrApple } from 'react-icons/gr';
 import { ImFinder } from 'react-icons/im';
 import { MdAndroid } from 'react-icons/md';
 import { PiTerminalFill, PiWindowsLogoFill } from 'react-icons/pi';
-import {
-	LoaderFunctionArgs,
-	NavLink,
-	redirect,
-	useLoaderData,
-} from 'react-router';
+import { LoaderFunctionArgs, NavLink, useLoaderData } from 'react-router';
 import Button from '~/components/Button';
 import Card from '~/components/Card';
 import Link from '~/components/Link';
@@ -27,10 +22,6 @@ export async function loader({
 	context,
 }: LoaderFunctionArgs<LoadContext>) {
 	const session = await context.sessions.auth(request);
-	const user = session.get('user');
-	if (!user) {
-		return redirect('/login');
-	}
 
 	// Try to determine the OS split between Linux, Windows, macOS, iOS, and Android
 	// We need to convert this to a known value to return it to the client so we can
@@ -60,11 +51,11 @@ export async function loader({
 			break;
 	}
 
-	let firstMachine: Machine | undefined = undefined;
+	let firstMachine: Machine | undefined;
 	try {
 		const { nodes } = await context.client.get<{ nodes: Machine[] }>(
 			'v1/node',
-			session.get('api_key')!,
+			session.api_key,
 		);
 
 		const node = nodes.find((n) => {
@@ -79,12 +70,7 @@ export async function loader({
 				return false;
 			}
 
-			const sessionUser = session.get('user');
-			if (!sessionUser) {
-				return false;
-			}
-
-			if (subject !== sessionUser.subject) {
+			if (subject !== session.user.subject) {
 				return false;
 			}
 
@@ -98,7 +84,7 @@ export async function loader({
 	}
 
 	return {
-		user,
+		user: session.user,
 		osValue,
 		firstMachine,
 	};
@@ -126,7 +112,7 @@ export default function Page() {
 	return (
 		<div className="fixed w-full h-screen flex items-center px-4">
 			<div className="w-fit mx-auto grid grid-cols-1 md:grid-cols-2 gap-4 mb-24">
-				<Card variant="flat" className="max-w-lg">
+				<Card className="max-w-lg" variant="flat">
 					<Card.Title className="mb-8">
 						Welcome!
 						<br />
@@ -138,9 +124,9 @@ export default function Page() {
 					</Card.Text>
 
 					<Options
+						className="my-4"
 						defaultSelectedKey={osValue}
 						label="Download Selector"
-						className="my-4"
 					>
 						<Options.Item
 							key="linux"
@@ -183,12 +169,12 @@ export default function Page() {
 							}
 						>
 							<a
-								href="https://pkgs.tailscale.com/stable/tailscale-setup-latest.exe"
 								aria-label="Download for Windows"
-								target="_blank"
+								href="https://pkgs.tailscale.com/stable/tailscale-setup-latest.exe"
 								rel="noreferrer"
+								target="_blank"
 							>
-								<Button variant="heavy" className="my-4 w-full">
+								<Button className="my-4 w-full" variant="heavy">
 									Download for Windows
 								</Button>
 							</a>
@@ -206,12 +192,12 @@ export default function Page() {
 							}
 						>
 							<a
-								href="https://pkgs.tailscale.com/stable/Tailscale-latest-macos.pkg"
 								aria-label="Download for macOS"
-								target="_blank"
+								href="https://pkgs.tailscale.com/stable/Tailscale-latest-macos.pkg"
 								rel="noreferrer"
+								target="_blank"
 							>
-								<Button variant="heavy" className="my-4 w-full">
+								<Button className="my-4 w-full" variant="heavy">
 									Download for macOS
 								</Button>
 							</a>
@@ -238,12 +224,12 @@ export default function Page() {
 							}
 						>
 							<a
-								href="https://apps.apple.com/us/app/tailscale/id1470499037"
 								aria-label="Download for iOS"
-								target="_blank"
+								href="https://apps.apple.com/us/app/tailscale/id1470499037"
 								rel="noreferrer"
+								target="_blank"
 							>
-								<Button variant="heavy" className="my-4 w-full">
+								<Button className="my-4 w-full" variant="heavy">
 									Download for iOS
 								</Button>
 							</a>
@@ -261,12 +247,12 @@ export default function Page() {
 							}
 						>
 							<a
-								href="https://play.google.com/store/apps/details?id=com.tailscale.ipn"
 								aria-label="Download for Android"
-								target="_blank"
+								href="https://play.google.com/store/apps/details?id=com.tailscale.ipn"
 								rel="noreferrer"
+								target="_blank"
 							>
-								<Button variant="heavy" className="my-4 w-full">
+								<Button className="my-4 w-full" variant="heavy">
 									Download for Android
 								</Button>
 							</a>
@@ -287,8 +273,8 @@ export default function Page() {
 							<div className="border border-headplane-100 dark:border-headplane-800 rounded-xl p-4">
 								<div className="flex items-start gap-4">
 									<StatusCircle
-										isOnline={firstMachine.online}
 										className="size-6 mt-3"
+										isOnline={firstMachine.online}
 									/>
 									<div>
 										<p className="font-semibold leading-snug">
@@ -300,7 +286,7 @@ export default function Page() {
 										<div className="mt-6">
 											<p className="text-sm font-semibold">IP Addresses</p>
 											{firstMachine.ipAddresses.map((ip) => (
-												<p key={ip} className="text-xs font-mono opacity-50">
+												<p className="text-xs font-mono opacity-50" key={ip}>
 													{ip}
 												</p>
 											))}
@@ -308,8 +294,8 @@ export default function Page() {
 									</div>
 								</div>
 							</div>
-							<NavLink to="/">
-								<Button variant="heavy" className="w-full">
+							<NavLink to="/onboarding/skip">
+								<Button className="w-full" variant="heavy">
 									Continue
 								</Button>
 							</NavLink>
@@ -335,7 +321,7 @@ export default function Page() {
 						</div>
 					)}
 				</Card>
-				<NavLink to="/onboarding/skip" className="col-span-2 w-max mx-auto">
+				<NavLink className="col-span-2 w-max mx-auto" to="/onboarding/skip">
 					<Button className="flex items-center gap-1">
 						I already know what I'm doing
 						<ArrowRight className="p-1" />

app/routes/users/overview.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { useLoaderData, useSubmit } from 'react-router';
+import { useLoaderData } from 'react-router';
 import type { LoadContext } from '~/server';
 import { Capabilities } from '~/server/web/roles';
 import { Machine, User } from '~/types';
@@ -32,11 +32,8 @@ export async function loader({
 	);
 
 	const [machines, apiUsers] = await Promise.all([
-		context.client.get<{ nodes: Machine[] }>(
-			'v1/node',
-			session.get('api_key')!,
-		),
-		context.client.get<{ users: User[] }>('v1/user', session.get('api_key')!),
+		context.client.get<{ nodes: Machine[] }>('v1/node', session.api_key),
+		context.client.get<{ users: User[] }>('v1/user', session.api_key),
 	]);
 
 	const users = apiUsers.users.map((user) => ({
@@ -44,30 +41,32 @@ export async function loader({
 		machines: machines.nodes.filter((machine) => machine.user.id === user.id),
 	}));
 
-	const roles = users
-		.sort((a, b) => a.name.localeCompare(b.name))
-		.map((user) => {
-			if (user.provider !== 'oidc') {
-				return 'no-oidc';
-			}
-
-			if (user.provider === 'oidc' && user.providerId) {
-				// For some reason, headscale makes providerID a url where the
-				// last component is the subject, so we need to strip that out
-				const subject = user.providerId.split('/').pop();
-				if (!subject) {
-					return 'invalid-oidc';
+	const roles = await Promise.all(
+		users
+			.sort((a, b) => a.name.localeCompare(b.name))
+			.map(async (user) => {
+				if (user.provider !== 'oidc') {
+					return 'no-oidc';
 				}
 
-				const role = context.sessions.roleForSubject(subject);
-				return role ?? 'no-role';
-			}
+				if (user.provider === 'oidc' && user.providerId) {
+					// For some reason, headscale makes providerID a url where the
+					// last component is the subject, so we need to strip that out
+					const subject = user.providerId.split('/').pop();
+					if (!subject) {
+						return 'invalid-oidc';
+					}
 
-			// No role means the user is not registered in Headplane, but they
-			// are in Headscale. We also need to handle what happens if someone
-			// logs into the UI and they don't have a Headscale setup.
-			return 'no-role';
-		});
+					const role = await context.sessions.roleForSubject(subject);
+					return role ?? 'no-role';
+				}
+
+				// No role means the user is not registered in Headplane, but they
+				// are in Headscale. We also need to handle what happens if someone
+				// logs into the UI and they don't have a Headscale setup.
+				return 'no-role';
+			}),
+	);
 
 	let magic: string | undefined;
 	if (context.hs.readable()) {
@@ -107,7 +106,7 @@ export default function Page() {
 			<p className="mb-8 text-md">
 				Manage the users in your network and their permissions.
 			</p>
-			<ManageBanner oidc={data.oidc} isDisabled={!data.writable} />
+			<ManageBanner isDisabled={!data.writable} oidc={data.oidc} />
 			<table className="table-auto w-full rounded-lg">
 				<thead className="text-headplane-600 dark:text-headplane-300">
 					<tr className="text-left px-0.5">
@@ -128,8 +127,8 @@ export default function Page() {
 						.map((user) => (
 							<UserRow
 								key={user.id}
-								user={user}
 								role={data.roles[users.indexOf(user)]}
+								user={user}
 							/>
 						))}
 				</tbody>

app/routes/users/user-actions.ts

@@ -1,7 +1,6 @@
-import { ActionFunctionArgs, Session, data } from 'react-router';
+import { ActionFunctionArgs, data } from 'react-router';
 import type { LoadContext } from '~/server';
 import { Capabilities, Roles } from '~/server/web/roles';
-import { AuthSession } from '~/server/web/sessions';
 import { User } from '~/types';
 import { data400, data403 } from '~/utils/res';
 
@@ -15,7 +14,7 @@ export async function userAction({
 		throw data403('You do not have permission to update users');
 	}
 
-	const apiKey = session.get('api_key')!;
+	const apiKey = session.api_key;
 	const formData = await request.formData();
 	const action = formData.get('action_id')?.toString();
 	if (!action) {