feat: oidc based authentication

2026-08-27 15:37:04 +00:00 · 2024-03-25 17:51:11 -04:00
parent 025cc4f6f1
commit 58992efa2e
10 changed files with 494 additions and 62 deletions
@@ -1,29 +1,106 @@
+import { ExclamationTriangleIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/outline'
+import type { LinksFunction, MetaFunction } from '@remix-run/node'
 import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
+	isRouteErrorResponse,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useRouteError
+} from '@remix-run/react'
+import clsx from 'clsx'

-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
+import stylesheet from '~/tailwind.css?url'
+
+export const meta: MetaFunction = () => [
+	{ title: 'Headplane' },
+	{ name: 'description', content: 'A frontend for the headscale coordination server' }
+]
+
+export const links: LinksFunction = () => [
+	{ rel: 'stylesheet', href: stylesheet }
+]
+
+export function loader() {
+	if (!process.env.HEADSCALE_URL) {
+		throw new Error('The HEADSCALE_URL environment variable is required')
+	}
+
+	if (!process.env.COOKIE_SECRET) {
+		throw new Error('The COOKIE_SECRET environment variable is required')
+	}
+
+	if (!process.env.API_KEY) {
+		throw new Error('The API_KEY environment variable is required')
+	}
+
+	// eslint-disable-next-line unicorn/no-null
+	return null
+}
+
+export function Layout({ children }: { readonly children: React.ReactNode }) {
+	return (
+		<html lang='en'>
+			<head>
+				<meta charSet='utf-8'/>
+				<meta name='viewport' content='width=device-width, initial-scale=1'/>
+				<Meta/>
+				<Links/>
+			</head>
+			<body className='overscroll-none'>
+				{children}
+				<ScrollRestoration/>
+				<Scripts/>
+			</body>
+		</html>
+	)
+}
+
+export function ErrorBoundary() {
+	const error = useRouteError()
+	const routing = isRouteErrorResponse(error)
+	const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
+	return (
+		<html>
+			<head>
+				<title>Oh no!</title>
+				<Meta/>
+				<Links/>
+			</head>
+			<body>
+				<div className='flex min-h-screen items-center justify-center'>
+					<div className={clsx(
+						'w-1/3 border p-4 rounded-lg flex flex-col items-center text-center',
+						routing ? 'gap-2' : 'gap-4'
+					)}
+					>
+						{routing ? (
+							<>
+								<QuestionMarkCircleIcon className='text-gray-500 w-14 h-14'/>
+								<h1 className='text-2xl font-bold'>{error.status}</h1>
+								<p className='opacity-50 text-sm'>{error.statusText}</p>
+							</>
+						) : (
+							<>
+								<ExclamationTriangleIcon className='text-red-500 w-14 h-14'/>
+								<h1 className='text-2xl font-bold'>Error</h1>
+								<code className='bg-gray-100 p-1 rounded-md'>
+									{message}
+								</code>
+								<p className='opacity-50 text-sm mt-4'>
+									If you are the administrator of this site, please check your logs for information.
+								</p>
+							</>
+						)}
+					</div>
+				</div>
+				<Scripts/>
+			</body>
+		</html>
+	)
 }

 export default function App() {
-  return <Outlet />;
+	return <Outlet/>
 }