fix(frontend): prevent infinite loop of setting cookies

Author: IgnisDa

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "ryot"
-version = "4.3.10"
+version = "4.3.11"
 edition = "2021"
 repository = "https://github.com/IgnisDa/ryot"
 license = "GPL-3.0"

apps/backend/Cargo.toml

@@ -13,12 +13,15 @@ import {
 } from "@remix-run/node";
 import {
 	type CoreDetails,
+	CoreDetailsDocument,
 	CoreEnabledFeaturesDocument,
 	GetPresignedS3UrlDocument,
 	PresignedPutS3UrlDocument,
+	UserCollectionsListDocument,
 	type UserCollectionsListQuery,
 	type UserLot,
 	type UserPreferences,
+	UserPreferencesDocument,
 } from "@ryot/generated/graphql/backend/graphql";
 import { UserDetailsDocument } from "@ryot/generated/graphql/backend/graphql";
 import { GraphQLClient } from "graphql-request";
@@ -40,8 +43,14 @@ const getAuthorizationCookie = async (request: Request) => {
 	return cookie;
 };
 
-export const getAuthorizationHeader = async (request: Request) => {
-	const cookie = await getAuthorizationCookie(request);
+export const getAuthorizationHeader = async (
+	request?: Request,
+	token?: string,
+) => {
+	let cookie: string;
+	if (request) cookie = await getAuthorizationCookie(request);
+	else if (token) cookie = token;
+	else cookie = "";
 	return { Authorization: `Bearer ${cookie}` };
 };
 
@@ -147,6 +156,15 @@ export const processSubmission = <Schema extends ZodTypeAny>(
 	return submission.value;
 };
 
+export const getUserCollectionsList = async (request: Request) => {
+	const { userCollectionsList } = await gqlClient.request(
+		UserCollectionsListDocument,
+		{},
+		await getAuthorizationHeader(request),
+	);
+	return userCollectionsList;
+};
+
 export const getLogoutCookies = async () => {
 	return combineHeaders(
 		{
@@ -169,11 +187,6 @@ export const getLogoutCookies = async () => {
 				expires: new Date(0),
 			}),
 		},
-		{
-			"Set-Cookie": await userCollectionsListCookie.serialize("", {
-				expires: new Date(0),
-			}),
-		},
 	);
 };
 
@@ -256,7 +269,6 @@ export const getCoreDetails = async (request: Request) => {
 	const details = await coreDetailsCookie.parse(
 		request.headers.get("cookie") || "",
 	);
-	redirectIfDetailNotPresent(request, details);
 	return details as CoreDetails;
 };
 
@@ -265,7 +277,6 @@ export const getUserPreferences = async (request: Request) => {
 	const prefs = await userPreferencesCookie.parse(
 		request.headers.get("cookie") || "",
 	);
-	redirectIfDetailNotPresent(request, prefs);
 	return prefs as UserPreferences;
 };
 
@@ -274,28 +285,9 @@ export const getUserDetails = async (request: Request) => {
 	const details = await userDetailsCookie.parse(
 		request.headers.get("cookie") || "",
 	);
-	redirectIfDetailNotPresent(request, details);
 	return details as ApplicationUser;
 };
 
-export const getUserCollectionsList = async (request: Request) => {
-	await redirectIfNotAuthenticated(request);
-	const list = await userCollectionsListCookie.parse(
-		request.headers.get("cookie") || "",
-	);
-	redirectIfDetailNotPresent(request, list);
-	return list as UserCollectionsListQuery["userCollectionsList"];
-};
-
-const redirectIfDetailNotPresent = (request: Request, detail: unknown) => {
-	if (!detail)
-		throw redirect(
-			withQuery($path("/actions"), {
-				[redirectToQueryParam]: withoutHost(request.url),
-			}),
-		);
-};
-
 const envVariables = expectedEnvironmentVariables.parse(process.env);
 
 const commonCookieOptions = {
@@ -329,11 +321,6 @@ export const userDetailsCookie = createCookie(
 	commonCookieOptions,
 );
 
-export const userCollectionsListCookie = createCookie(
-	ApplicationKey.UserCollectionsList,
-	commonCookieOptions,
-);
-
 export const toastSessionStorage = createCookieSessionStorage({
 	cookie: { ...commonCookieOptions, name: ApplicationKey.Toast },
 });
@@ -392,3 +379,38 @@ export async function getToast(request: Request) {
 			: null,
 	};
 }
+
+export const getCookiesForApplication = async (token: string) => {
+	const [{ coreDetails }, { userPreferences }, { userDetails }] =
+		await Promise.all([
+			gqlClient.request(CoreDetailsDocument),
+			gqlClient.request(
+				UserPreferencesDocument,
+				undefined,
+				await getAuthorizationHeader(undefined, token),
+			),
+			gqlClient.request(
+				UserDetailsDocument,
+				undefined,
+				await getAuthorizationHeader(undefined, token),
+			),
+		]);
+	const cookieMaxAge = coreDetails.tokenValidForDays * 24 * 60 * 60;
+	return combineHeaders(
+		{
+			"Set-Cookie": await coreDetailsCookie.serialize(coreDetails, {
+				maxAge: cookieMaxAge,
+			}),
+		},
+		{
+			"Set-Cookie": await userPreferencesCookie.serialize(userPreferences, {
+				maxAge: cookieMaxAge,
+			}),
+		},
+		{
+			"Set-Cookie": await userDetailsCookie.serialize(userDetails, {
+				maxAge: cookieMaxAge,
+			}),
+		},
+	);
+};

apps/frontend/app/lib/utilities.server.ts

@@ -1,5 +1,4 @@
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
-import { $path } from "@ignisda/remix-routes";
 import {
 	ActionIcon,
 	Affix,
@@ -49,12 +48,12 @@ import {
 import clsx from "clsx";
 import { Fragment, useState } from "react";
 import { match } from "ts-pattern";
-import { withQuery, withoutHost } from "ufo";
 import { z } from "zod";
 import { zx } from "zodix";
-import { redirectToQueryParam } from "~/lib/generals";
 import {
+	authCookie,
 	getAuthorizationHeader,
+	getCookiesForApplication,
 	getUserDetails,
 	getUserPreferences,
 	gqlClient,
@@ -109,11 +108,9 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 			await getAuthorizationHeader(request),
 		);
 	}
-	return redirect(
-		withQuery($path("/actions"), {
-			[redirectToQueryParam]: withoutHost(request.url),
-		}),
-	);
+	const token = await authCookie.parse(request.headers.get("Cookie"));
+	const headers = await getCookiesForApplication(token);
+	return json({}, { headers });
 };
 
 export default function Page() {

apps/frontend/app/routes/_dashboard.settings.preferences.tsx

@@ -1,7 +1,6 @@
 import { $path } from "@ignisda/remix-routes";
 import {
 	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
 	json,
 	redirect,
 	unstable_parseMultipartFormData,
@@ -10,7 +9,6 @@ import {
 	AddEntityToCollectionDocument,
 	CommitMetadataDocument,
 	CommitPersonDocument,
-	CoreDetailsDocument,
 	CreateMediaReminderDocument,
 	CreateReviewCommentDocument,
 	DeleteMediaReminderDocument,
@@ -22,12 +20,8 @@ import {
 	PostReviewDocument,
 	RemoveEntityFromCollectionDocument,
 	ToggleMediaMonitorDocument,
-	UserCollectionsListDocument,
-	UserDetailsDocument,
-	UserPreferencesDocument,
 	Visibility,
 } from "@ryot/generated/graphql/backend/graphql";
-import { safeRedirect } from "remix-utils/safe-redirect";
 import invariant from "tiny-invariant";
 import { match } from "ts-pattern";
 import { z } from "zod";
@@ -36,77 +30,15 @@ import { redirectToQueryParam } from "~/lib/generals";
 import {
 	MetadataSpecificsSchema,
 	colorSchemeCookie,
-	combineHeaders,
-	coreDetailsCookie,
 	createToastHeaders,
 	getAuthorizationHeader,
 	getLogoutCookies,
 	gqlClient,
 	processSubmission,
-	redirectIfNotAuthenticated,
 	s3FileUploader,
-	userCollectionsListCookie,
-	userDetailsCookie,
-	userPreferencesCookie,
 } from "~/lib/utilities.server";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-	await redirectIfNotAuthenticated(request);
-	const url = new URL(request.url);
-	const [
-		{ coreDetails },
-		{ userPreferences },
-		{ userDetails },
-		{ userCollectionsList },
-	] = await Promise.all([
-		gqlClient.request(CoreDetailsDocument),
-		gqlClient.request(
-			UserPreferencesDocument,
-			undefined,
-			await getAuthorizationHeader(request),
-		),
-		gqlClient.request(
-			UserDetailsDocument,
-			undefined,
-			await getAuthorizationHeader(request),
-		),
-		gqlClient.request(
-			UserCollectionsListDocument,
-			{},
-			await getAuthorizationHeader(request),
-		),
-	]);
-	const cookieMaxAge = coreDetails.tokenValidForDays * 24 * 60 * 60;
-	let redirectUrl = safeRedirect(
-		url.searchParams.get(redirectToQueryParam) || "/",
-	);
-	if (redirectUrl.includes("actions")) redirectUrl = "/";
-	return redirect(redirectUrl, {
-		headers: combineHeaders(
-			{
-				"Set-Cookie": await coreDetailsCookie.serialize(coreDetails, {
-					maxAge: cookieMaxAge,
-				}),
-			},
-			{
-				"Set-Cookie": await userPreferencesCookie.serialize(userPreferences, {
-					maxAge: cookieMaxAge,
-				}),
-			},
-			{
-				"Set-Cookie": await userDetailsCookie.serialize(userDetails, {
-					maxAge: cookieMaxAge,
-				}),
-			},
-			{
-				"Set-Cookie": await userCollectionsListCookie.serialize(
-					userCollectionsList,
-					{ maxAge: cookieMaxAge },
-				),
-			},
-		),
-	});
-};
+export const loader = async () => redirect($path("/"));
 
 export const action = async ({ request }: ActionFunctionArgs) => {
 	const formData = await request.clone().formData();

apps/frontend/app/routes/actions.tsx

@@ -20,7 +20,9 @@ import { z } from "zod";
 import { redirectToQueryParam } from "~/lib/generals";
 import {
 	authCookie,
+	combineHeaders,
 	createToastHeaders,
+	getCookiesForApplication,
 	getCoreEnabledFeatures,
 	getIsAuthenticated,
 	gqlClient,
@@ -57,16 +59,17 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 		let redirectUrl = $path("/");
 		if (submission[redirectToQueryParam])
 			redirectUrl = safeRedirect(submission[redirectToQueryParam]);
-		return redirect(
-			$path("/actions", { [redirectToQueryParam]: redirectUrl }),
-			{
-				headers: {
+		const cookies = await getCookiesForApplication(loginUser.apiKey);
+		return redirect(redirectUrl, {
+			headers: combineHeaders(
+				{
 					"Set-Cookie": await authCookie.serialize(loginUser.apiKey, {
 						maxAge: coreDetails.tokenValidForDays * 24 * 60 * 60,
 					}),
 				},
-			},
-		);
+				cookies,
+			),
+		});
 	}
 	const message = match(loginUser.error)
 		.with(