feat: add a warning banner on the login page for misconfigured cookies

app/routes/auth/login/page.tsx

@@ -1,40 +1,35 @@
-import { useEffect } from 'react';
+import { AlertCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import {
-	ActionFunctionArgs,
 	data,
 	Form,
-	LoaderFunctionArgs,
 	Link as RemixLink,
 	redirect,
-	useActionData,
-	useLoaderData,
 	useSearchParams,
 } from 'react-router';
 import Button from '~/components/Button';
 import Card from '~/components/Card';
 import Code from '~/components/Code';
 import Input from '~/components/Input';
-import type { LoadContext } from '~/server';
+import Link from '~/components/Link';
 import { useLiveData } from '~/utils/live-data';
+import type { Route } from './+types/page';
 import { loginAction } from './action';
 import Logout from './logout';
 
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
+export async function loader({ request, context }: Route.LoaderArgs) {
 	try {
 		await context.sessions.auth(request);
 		return redirect('/machines');
 	} catch {}
 
 	const qp = new URL(request.url).searchParams;
-	const state = qp.get('s') ?? undefined;
+	const urlState = qp.get('s') ?? undefined;
 
 	// OIDC config cannot be undefined if an OIDC client is set
 	// Also check if we are in a logout state and skip redirect if we are
 	const ssoOnly = context.config.oidc?.disable_api_key_login;
-	if (state !== 'logout' && ssoOnly) {
+	if (urlState !== 'logout' && ssoOnly) {
 		// This shouldn't be possible, but still a safe sanity check
 		if (!context.oidc) {
 			throw data(
@@ -49,30 +44,35 @@ export async function loader({
 	}
 
 	return {
-		oidc: context.oidc,
-		state,
+		isOidcEnabled: context.oidc !== undefined,
+		isCookieSecureEnabled: context.config.server.cookie_secure,
+		urlState,
 	};
 }
 
-export async function action(request: ActionFunctionArgs<LoadContext>) {
+export async function action(request: Route.ActionArgs) {
 	return loginAction(request);
 }
 
-export default function Page() {
-	const { state, oidc } = useLoaderData<typeof loader>();
-	const formData = useActionData<typeof action>();
+export default function Page({ loaderData, actionData }: Route.ComponentProps) {
+	const { isOidcEnabled, isCookieSecureEnabled, urlState } = loaderData;
+	const [showCookieWarning, setShowCookieWarning] = useState(false);
 	const [params] = useSearchParams();
 	const { pause } = useLiveData();
 
 	useEffect(() => {
 		// This page does NOT need stale while revalidate logic
 		pause();
+
+		if (isCookieSecureEnabled && window.location.protocol !== 'https:') {
+			setShowCookieWarning(true);
+		}
 	});
 
 	useEffect(() => {
 		// State is a one time thing, we need to remove it after it has
 		// been consumed to prevent logic loops.
-		if (state !== null) {
+		if (urlState !== null) {
 			const searchParams = new URLSearchParams(params);
 			searchParams.delete('s');
 
@@ -85,48 +85,71 @@ export default function Page() {
 
 			window.history.replaceState(null, '', newUrl);
 		}
-	}, [state, params]);
+	}, [urlState, params]);
 
-	if (state === 'logout') {
+	if (urlState === 'logout') {
 		return <Logout />;
 	}
 
 	return (
 		<div className="flex w-screen h-screen items-center justify-center">
-			<Card className="max-w-md m-4 sm:m-0">
-				<Card.Title>Welcome to Headplane</Card.Title>
-				<Form method="POST">
-					<Card.Text>
-						Enter an API key to authenticate with Headplane. You can generate
-						one by running <Code>headscale apikeys create</Code> in your
-						terminal.
-					</Card.Text>
-					<Input
-						className="mt-8 mb-2"
-						isRequired
-						label="API Key"
-						labelHidden
-						name="api_key"
-						placeholder="API Key"
-						type="password"
-					/>
-					{formData?.success === false ? (
-						<Card.Text className="text-sm mb-2 text-red-600 dark:text-red-300">
-							{formData.message}
+			<div>
+				{showCookieWarning ? (
+					<Card className="max-w-md m-4 sm:m-0 mb-4 sm:mb-4 border border-red-500">
+						<div className="flex items-center justify-between gap-4">
+							<Card.Title className="text-red-500">
+								Configuration Issue
+							</Card.Title>
+							<AlertCircle className="w-6 h-6 mb-2 text-red-500" />
+						</div>
+						<Card.Text className="text-sm text-red-600 dark:text-red-400">
+							Headplane is configured to use secure cookies, but this site is
+							being served over an insecure connection and login will not work
+							correctly.{' '}
+							<Link
+								name="Headplane Common Issues"
+								to="https://headplane.net/configuration/common-issues#issue-logging-in-does-not-do-anything"
+							>
+								Learn more.
+							</Link>
 						</Card.Text>
-					) : undefined}
-					<Button className="w-full" type="submit" variant="heavy">
-						Sign In
-					</Button>
-				</Form>
-				{oidc ? (
-					<RemixLink to="/oidc/start">
-						<Button className="w-full mt-2" variant="light">
-							Single Sign-On
-						</Button>
-					</RemixLink>
+					</Card>
 				) : undefined}
-			</Card>
+				<Card className="max-w-md m-4 sm:m-0">
+					<Card.Title>Welcome to Headplane</Card.Title>
+					<Form method="POST">
+						<Card.Text>
+							Enter an API key to authenticate with Headplane. You can generate
+							one by running <Code>headscale apikeys create</Code> in your
+							terminal.
+						</Card.Text>
+						<Input
+							className="mt-8 mb-2"
+							isRequired
+							label="API Key"
+							labelHidden
+							name="api_key"
+							placeholder="API Key"
+							type="password"
+						/>
+						{actionData?.success === false ? (
+							<Card.Text className="text-sm mb-2 text-red-600 dark:text-red-300">
+								{actionData.message}
+							</Card.Text>
+						) : undefined}
+						<Button className="w-full" type="submit" variant="heavy">
+							Sign In
+						</Button>
+					</Form>
+					{isOidcEnabled ? (
+						<RemixLink to="/oidc/start">
+							<Button className="w-full mt-2" variant="light">
+								Single Sign-On
+							</Button>
+						</RemixLink>
+					) : undefined}
+				</Card>
+			</div>
 		</div>
 	);
 }

app/server/index.ts

@@ -40,6 +40,12 @@ const agents = await createHeadplaneAgent(
 // These are usually per-request things that we need access to, like the
 // helper that can issue and revoke cookies.
 export type LoadContext = typeof appLoadContext;
+
+import 'react-router';
+declare module 'react-router' {
+	interface AppLoadContext extends LoadContext {}
+}
+
 const appLoadContext = {
 	config,
 	hs: await loadHeadscaleConfig(