feat: refactor/reorganize auth routes

app/routes/auth/login.tsx

@@ -0,0 +1,161 @@
+import { ActionFunctionArgs, LoaderFunctionArgs, redirect } from '@remix-run/node'
+import { Form, useActionData, useLoaderData } from '@remix-run/react'
+import { useMemo } from 'react'
+
+import Button from '~/components/Button'
+import Card from '~/components/Card'
+import Code from '~/components/Code'
+import TextField from '~/components/TextField'
+import { Key } from '~/types'
+import { loadContext } from '~/utils/config/headplane'
+import { pull } from '~/utils/headscale'
+import { startOidc } from '~/utils/oidc'
+import { commitSession, getSession } from '~/utils/sessions'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	if (session.has('hsApiKey')) {
+		return redirect('/machines', {
+			headers: {
+				'Set-Cookie': await commitSession(session),
+			},
+		})
+	}
+
+	const context = await loadContext()
+
+	// Only set if OIDC is properly enabled anyways
+	if (context.oidc?.disableKeyLogin) {
+		return startOidc(context.oidc, request)
+	}
+
+	return {
+		oidc: context.oidc?.issuer,
+		apiKey: !context.oidc?.disableKeyLogin,
+	}
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const formData = await request.formData()
+	const oidcStart = formData.get('oidc-start')
+
+	if (oidcStart) {
+		const context = await loadContext()
+
+		if (!context.oidc) {
+			throw new Error('An invalid OIDC configuration was provided')
+		}
+
+		// We know it exists here because this action only happens on OIDC
+		return startOidc(context.oidc, request)
+	}
+
+	const apiKey = String(formData.get('api-key'))
+	const session = await getSession(request.headers.get('Cookie'))
+
+	// Test the API key
+	try {
+		const apiKeys = await pull<{ apiKeys: Key[] }>('v1/apikey', apiKey)
+		const key = apiKeys.apiKeys.find(k => apiKey.startsWith(k.prefix))
+		if (!key) {
+			throw new Error('Invalid API key')
+		}
+
+		const expiry = new Date(key.expiration)
+		const expiresIn = expiry.getTime() - Date.now()
+		const expiresDays = Math.round(expiresIn / 1000 / 60 / 60 / 24)
+
+		session.set('hsApiKey', apiKey)
+		session.set('user', {
+			name: key.prefix,
+			email: `${expiresDays.toString()} days`,
+		})
+
+		return redirect('/machines', {
+			headers: {
+				'Set-Cookie': await commitSession(session, {
+					maxAge: expiresIn,
+				}),
+			},
+		})
+	} catch {
+		return {
+			error: 'Invalid API key',
+		}
+	}
+}
+
+export default function Page() {
+	const data = useLoaderData<typeof loader>()
+	const actionData = useActionData<typeof action>()
+	const showOr = useMemo(() => data.oidc && data.apiKey, [data])
+
+	return (
+		<div className="flex min-h-screen items-center justify-center">
+			<Card className="max-w-sm m-4 sm:m-0 rounded-2xl">
+				<Card.Title>
+					Welcome to Headplane
+				</Card.Title>
+				{data.apiKey
+					? (
+						<Form method="post">
+							<Card.Text className="mb-8 text-sm">
+								Enter an API key to authenticate with Headplane. You can generate
+								one by running
+								{' '}
+								<Code>
+									headscale apikeys create
+								</Code>
+								{' '}
+								in your terminal.
+							</Card.Text>
+
+							{actionData?.error
+								? (
+									<p className="text-red-500 text-sm mb-2">{actionData.error}</p>
+									)
+								: undefined}
+							<TextField
+								isRequired
+								label="API Key"
+								name="api-key"
+								placeholder="API Key"
+								type="password"
+							/>
+							<Button
+								className="w-full mt-2.5"
+								variant="heavy"
+								type="submit"
+							>
+								Login
+							</Button>
+						</Form>
+						)
+					: undefined}
+				{showOr
+					? (
+						<div className="flex items-center gap-x-1.5 py-1">
+							<hr className="flex-1 border-ui-300 dark:border-ui-800" />
+							<span className="text-gray-500 text-sm">or</span>
+							<hr className="flex-1 border-ui-300 dark:border-ui-800" />
+						</div>
+						)
+					: undefined}
+				{data.oidc
+					? (
+						<Form method="POST">
+							<input type="hidden" name="oidc-start" value="true" />
+							<Button
+								className="w-full"
+								variant="heavy"
+								type="submit"
+							>
+								Login with SSO
+							</Button>
+						</Form>
+						)
+					: undefined}
+			</Card>
+		</div>
+	)
+}

app/routes/auth/logout.ts

@@ -0,0 +1,15 @@
+import { ActionFunctionArgs, redirect } from '@remix-run/node'
+import { destroySession, getSession } from '~/utils/sessions'
+
+export async function loader() {
+	return redirect('/machines')
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'))
+	return redirect('/login', {
+		headers: {
+			'Set-Cookie': await destroySession(session)
+		}
+	})
+}

app/routes/auth/oidc-callback.ts

@@ -0,0 +1,17 @@
+import { LoaderFunctionArgs, data } from '@remix-run/node'
+import { loadContext } from '~/utils/config/headplane'
+import { finishOidc } from '~/utils/oidc'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+	try {
+		const context = await loadContext()
+		if (!context.oidc) {
+			throw new Error('An invalid OIDC configuration was provided')
+		}
+
+		return finishOidc(context.oidc, request)
+	} catch (error) {
+		// Gracefully present OIDC errors
+		return data({ error }, { status: 500 })
+	}
+}