feat: refactor/reorganize auth routes

app/components/Footer.tsx

@@ -0,0 +1,44 @@
+import { cn } from '~/utils/cn'
+import Link from '~/components/Link'
+
+interface FooterProps {
+	url: string
+	debug: boolean
+}
+
+export default function Footer({ url, debug, integration }: FooterProps) {
+	return (
+		<footer className={cn(
+			'fixed bottom-0 left-0 z-50 w-full h-14',
+			'bg-ui-100 dark:bg-ui-900 text-ui-500',
+			'flex flex-col justify-center gap-1',
+			'border-t border-ui-200 dark:border-ui-800',
+		)}>
+			<p className="container text-xs">
+				Headplane is entirely free to use.
+				{' '}
+				If you find it useful, consider
+				{' '}
+				<Link
+					to="https://github.com/sponsors/tale"
+					name="Aarnav's GitHub Sponsors"
+				>
+					donating
+				</Link>
+				{' '}
+				to support development.
+				{' '}
+			</p>
+			<p className="container text-xs opacity-75">
+				Version: {__VERSION__}
+				{' | '}
+				Connecting to
+				{' '}
+				<strong>{url}</strong>
+				{' '}
+				{debug && '(Debug mode enabled)'}
+			</p>
+		</footer>
+	)
+}
+

app/layouts/dashboard.tsx

@@ -4,6 +4,7 @@ import { ProgressBar } from 'react-aria-components'
 
 import { ErrorPopup } from '~/components/Error'
 import Header from '~/components/Header'
+import Footer from '~/components/Footer'
 import Link from '~/components/Link'
 import { cn } from '~/utils/cn'
 import { loadContext } from '~/utils/config/headplane'
@@ -17,14 +18,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	}
 
 	try {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		await pull('v1/apikey', session.get('hsApiKey')!)
 	} catch (error) {
 		if (error instanceof HeadscaleError) {
 			// Safest to just redirect to login if we can't pull
 			return redirect('/login', {
 				headers: {
-					// eslint-disable-next-line @typescript-eslint/naming-convention
 					'Set-Cookie': await destroySession(session),
 				},
 			})
@@ -43,47 +42,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	}
 }
 
-interface FooterProps {
-	url: string
-	debug: boolean
-}
-
-function Footer({ url, debug, integration }: FooterProps) {
-	return (
-		<footer className={cn(
-			'fixed bottom-0 left-0 z-50 w-full h-14',
-			'bg-ui-100 dark:bg-ui-900 text-ui-500',
-			'flex flex-col justify-center gap-1',
-			'border-t border-ui-200 dark:border-ui-800',
-		)}>
-			<p className="container text-xs">
-				Headplane is entirely free to use.
-				{' '}
-				If you find it useful, consider
-				{' '}
-				<Link
-					to="https://github.com/sponsors/tale"
-					name="Aarnav's GitHub Sponsors"
-				>
-					donating
-				</Link>
-				{' '}
-				to support development.
-				{' '}
-			</p>
-			<p className="container text-xs opacity-75">
-				Version: {__VERSION__}
-				{' | '}
-				Connecting to
-				{' '}
-				<strong>{url}</strong>
-				{' '}
-				{debug && '(Debug mode enabled)'}
-			</p>
-		</footer>
-	)
-}
-
 export default function Layout() {
 	const data = useLoaderData<typeof loader>()
 	const nav = useNavigation()

app/routes.ts

@@ -1,3 +1,35 @@
-import { flatRoutes } from '@remix-run/fs-routes'
+//import { flatRoutes } from '@remix-run/fs-routes'
+import { index, layout, prefix, route } from '@remix-run/route-config'
+
+export default [
+	// Utility Routes
+	index('routes/_index.tsx'),
+	route('/healthz', 'routes/healthz.tsx'),
+
+	// Authentication Routes
+	route('/login', 'routes/auth/login.tsx'),
+	route('/logout', 'routes/auth/logout.ts'),
+	route('/oidc/callback', 'routes/auth/oidc-callback.ts'),
+
+	// All the main logged-in dashboard routes
+	layout('layouts/dashboard.tsx', [
+		...prefix('/machines', [
+			index('routes/_data.machines._index/route.tsx'),
+			route('/:id', 'routes/_data.machines.$id/route.tsx'),
+		]),
+		...prefix('/users', [
+			index('routes/_data.users._index/route.tsx'),
+		]),
+		...prefix('/dns', [
+			index('routes/_data.dns._index/route.tsx'),
+		]),
+		...prefix('/acls', [
+			index('routes/_data.acls._index/route.tsx'),
+		]),
+		...prefix('/settings', [
+			index('routes/_data.settings._index/route.tsx'),
+			route('/auth-keys', 'routes/_data.settings.auth-keys._index/route.tsx'),
+		]),
+	])
+]
 
-export default flatRoutes()

app/routes/auth/login.tsx

@@ -17,7 +17,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	if (session.has('hsApiKey')) {
 		return redirect('/machines', {
 			headers: {
-				// eslint-disable-next-line @typescript-eslint/naming-convention
 				'Set-Cookie': await commitSession(session),
 			},
 		})
@@ -74,7 +73,6 @@ export async function action({ request }: ActionFunctionArgs) {
 
 		return redirect('/machines', {
 			headers: {
-				// eslint-disable-next-line @typescript-eslint/naming-convention
 				'Set-Cookie': await commitSession(session, {
 					maxAge: expiresIn,
 				}),

app/routes/auth/logout.ts

@@ -1,14 +1,14 @@
-import { type ActionFunctionArgs, redirect } from '@remix-run/node'
+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'))
-	const returnTo = new URL(request.url).pathname
+	return redirect('/login', {
-
-	return redirect(`/login?returnTo=${returnTo}`, {
 		headers: {
-			// eslint-disable-next-line @typescript-eslint/naming-convention
 			'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 })
+	}
+}

app/routes/oidc.callback.tsx

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