feat(frontend): use __Host prefix for token cookie

Foxnouns.Frontend/app/lib/request.server.ts

@@ -1,6 +1,7 @@
 import { parse as parseCookie, serialize as serializeCookie } from "cookie";
 import { API_BASE } from "~/env.server";
 import { ApiError, ErrorCode } from "./api/error";
+import { tokenCookieName } from "~/lib/utils";
 
 export type RequestParams = {
 	token?: string;
@@ -39,7 +40,7 @@ export default async function serverRequest<T>(
 	return (await resp.json()) as T;
 }
 
-export const getToken = (req: Request) => getCookie(req, "pronounscc-token");
+export const getToken = (req: Request) => getCookie(req, tokenCookieName);
 
 export function getCookie(req: Request, cookieName: string): string | undefined {
 	const header = req.headers.get("Cookie");
@@ -57,4 +58,5 @@ export const writeCookie = (cookieName: string, value: string, maxAge: number |
 		path: "/",
 		sameSite: "lax",
 		httpOnly: true,
+		secure: true,
 	});

Foxnouns.Frontend/app/lib/utils.ts

@@ -1 +1,2 @@
 export const defaultAvatarUrl = "https://pronouns.cc/default/512.webp";
+export const tokenCookieName = "__Host-pronounscc-token";

Foxnouns.Frontend/app/root.tsx

@@ -13,7 +13,7 @@ import { LoaderFunctionArgs } from "@remix-run/node";
 import { useChangeLanguage } from "remix-i18next/react";
 import { useTranslation } from "react-i18next";
 
-import serverRequest, { getCookie, writeCookie } from "./lib/request.server";
+import serverRequest, { getToken, writeCookie } from "./lib/request.server";
 import Meta from "./lib/api/meta";
 import Navbar from "./components/nav/Navbar";
 import { User, UserSettings } from "./lib/api/user";
@@ -26,11 +26,12 @@ import { errorCodeDesc } from "./components/ErrorAlert";
 import { Container } from "react-bootstrap";
 import { ReactNode } from "react";
 import BaseNavbar from "~/components/nav/BaseNavbar";
+import { tokenCookieName } from "~/lib/utils";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const meta = await serverRequest<Meta>("GET", "/meta");
 
-	const token = getCookie(request, "pronounscc-token");
+	const token = getToken(request);
 	let setCookie = "";
 
 	let meUser: User | undefined;
@@ -43,7 +44,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		} catch (e) {
 			// If we get an unauthorized error, clear the token, as it's not valid anymore.
 			if ((e as ApiError).code === ErrorCode.AuthenticationRequired) {
-				setCookie = writeCookie("pronounscc-token", token, 0);
+				setCookie = writeCookie(tokenCookieName, token, 0);
 			}
 		}
 	}

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -19,6 +19,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { Form, Button, Alert } from "react-bootstrap";
 import ErrorAlert from "~/components/ErrorAlert";
 import i18n from "~/i18next.server";
+import { tokenCookieName } from "~/lib/utils";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
@@ -53,7 +54,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 			},
 			{
 				headers: {
-					"Set-Cookie": writeCookie("pronounscc-token", resp.token!),
+					"Set-Cookie": writeCookie(tokenCookieName, resp.token!),
 				},
 			},
 		);
@@ -90,7 +91,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
 		return redirect("/auth/welcome", {
 			headers: {
-				"Set-Cookie": writeCookie("pronounscc-token", resp.token),
+				"Set-Cookie": writeCookie(tokenCookieName, resp.token),
 			},
 			status: 303,
 		});

Foxnouns.Frontend/app/routes/auth.log-in/route.tsx

@@ -19,6 +19,7 @@ import { AuthResponse, AuthUrls } from "~/lib/api/auth";
 import { ApiError, ErrorCode } from "~/lib/api/error";
 import ErrorAlert from "~/components/ErrorAlert";
 import { User } from "~/lib/api/user";
+import { tokenCookieName } from "~/lib/utils";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
@@ -61,7 +62,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 		return redirect("/", {
 			status: 303,
 			headers: {
-				"Set-Cookie": writeCookie("pronounscc-token", resp.token),
+				"Set-Cookie": writeCookie(tokenCookieName, resp.token),
 			},
 		});
 	} catch (e) {

Foxnouns.Frontend/app/routes/auth.log-out/route.tsx

@@ -1,10 +1,11 @@
 import { ActionFunction } from "@remix-run/node";
 import { writeCookie } from "~/lib/request.server";
+import { tokenCookieName } from "~/lib/utils";
 
 export const action: ActionFunction = async () => {
 	return new Response(null, {
 		headers: {
-			"Set-Cookie": writeCookie("pronounscc-token", "token", 0),
+			"Set-Cookie": writeCookie(tokenCookieName, "token", 0),
 		},
 		status: 204,
 	});

Foxnouns.Frontend/app/routes/dark-mode/route.tsx

@@ -1,6 +1,6 @@
 import { ActionFunction } from "@remix-run/node";
 import { UserSettings } from "~/lib/api/user";
-import serverRequest, { getCookie, writeCookie } from "~/lib/request.server";
+import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
 
 // Handles theme switching
 // Remix itself handles redirecting back to the original page after the setting is set
@@ -15,7 +15,7 @@ export const action: ActionFunction = async ({ request }) => {
 	const body = await request.formData();
 	const theme = (body.get("theme") as string | null) || "auto";
 
-	const token = getCookie(request, "pronounscc-token");
+	const token = getToken(request);
 	if (token) {
 		await serverRequest<UserSettings>("PATCH", "/users/@me/settings", {
 			token,