Enhances query validation for protected routes

Introduces query validation using Zod schema to standardize
and ensure accurate processing of query parameters in protected
loaders and actions. This improvement increases the robustness
of query handling by validating parameters such as pagination
and sorting criteria.

Refines the loader function to handle queries more efficiently,
leveraging Zod to enforce value constraints and defaults,
thereby reducing potential runtime errors from malformed queries.

Author: MichielOlijslagers

app/features/admin/routes/users.tsx

@@ -9,23 +9,24 @@ import { Prisma } from "@prisma/client";
 import { Can } from "~/components/providers/permission.provider";
 import { Button } from "~/components/ui/button";
 import { createProtectedLoader } from "~/lib/secureRoute";
+import { z } from "zod";
 
 export const loader = createProtectedLoader({
-  function: async ({ request }) => {
-    const url = new URL(request.url);
-    const page = parseInt(url.searchParams.get("page") || "1");
-    const limit = parseInt(url.searchParams.get("limit") || "10");
-    const search = url.searchParams.get("search") || "";
-    const sortBy = url.searchParams.get("sortBy") || "createdAt";
-    const sortDirection = (url.searchParams.get("sortDirection") || "desc") as "asc" | "desc";
-
+  queryValidation: z.object({
+    page: z.number().min(1).default(1),
+    limit: z.number().min(1).default(10),
+    search: z.string().optional(),
+    sortBy: z.string().optional().default("createdAt"),
+    sortDirection: z.enum(["asc", "desc"]).optional(),
+  }),
+  function: async ({ query }) => {
     // Build the where clause for searching
-    const where = search
+    const where = query.search
       ? {
           OR: [
-            { name: { contains: search, mode: Prisma.QueryMode.insensitive } },
-            { email: { contains: search, mode: Prisma.QueryMode.insensitive } },
-            { role: { contains: search, mode: Prisma.QueryMode.insensitive } },
+            { name: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
+            { email: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
+            { role: { contains: query.search, mode: Prisma.QueryMode.insensitive } },
           ],
         }
       : {};
@@ -37,10 +38,10 @@ export const loader = createProtectedLoader({
     const users = await prisma.user.findMany({
       where,
       orderBy: {
-        [sortBy]: sortDirection,
+        [query.sortBy]: query.sortDirection,
       },
-      skip: (page - 1) * limit,
-      take: limit,
+      skip: (query.page - 1) * query.limit,
+      take: query.limit,
     });
 
     return {
@@ -49,10 +50,10 @@ export const loader = createProtectedLoader({
         role: user.role ? user.role.split(",").map((role) => role.trim()) : null,
       })),
       total,
-      page,
-      limit,
-      sortBy,
-      sortDirection,
+      page: query.page,
+      limit: query.limit,
+      sortBy: query.sortBy,
+      sortDirection: query.sortDirection,
     };
   },
 });

app/lib/secureRoute.ts

@@ -18,13 +18,19 @@ type StrictParams<T> = {
 type Identity = Awaited<ReturnType<typeof getUserInformation>>;
 
 // Base configuration type for protected routes
-type BaseProtectedConfig<T, P extends z.ZodSchema | undefined = undefined> = {
+type BaseProtectedConfig<
+  T,
+  P extends z.ZodSchema | undefined = undefined,
+  Q extends z.ZodSchema | undefined = undefined,
+> = {
   permissions?: PermissionCheck;
   paramValidation?: P;
+  queryValidation?: Q;
   function: (
     args: Omit<LoaderFunctionArgs, "params"> & {
       identity: Identity;
       params: P extends z.ZodSchema ? StrictParams<z.infer<P>> : null;
+      query: Q extends z.ZodSchema ? StrictParams<z.infer<Q>> : null;
     }
   ) => T;
 };
@@ -33,39 +39,63 @@ type BaseProtectedConfig<T, P extends z.ZodSchema | undefined = undefined> = {
 type ProtectedLoaderConfig<
   T = any,
   P extends z.ZodSchema | undefined = undefined,
-> = BaseProtectedConfig<T, P>;
+  Q extends z.ZodSchema | undefined = undefined,
+> = BaseProtectedConfig<T, P, Q>;
 
 // Action specific configuration
 type ProtectedActionConfig<
   T = any,
   P extends z.ZodSchema | undefined = undefined,
-> = BaseProtectedConfig<T, P>;
+  Q extends z.ZodSchema | undefined = undefined,
+> = BaseProtectedConfig<T, P, Q>;
 
 /**
  * Creates a protected loader function that validates permissions and parameters
  */
-export function createProtectedLoader<T, P extends z.ZodSchema | undefined = undefined>(
-  config: ProtectedLoaderConfig<T, P>
-) {
+export function createProtectedLoader<
+  T,
+  P extends z.ZodSchema | undefined = undefined,
+  Q extends z.ZodSchema | undefined = undefined,
+>(config: ProtectedLoaderConfig<T, P, Q>) {
   return async (args: LoaderFunctionArgs) => {
     const parsedParams = validateParams(args.params, config.paramValidation);
+    const parsedQuery = validateQueryParams(
+      new URL(args.request.url).searchParams,
+      config.queryValidation
+    );
     const identity = await validateIdentity(args.request, config.permissions);
     const { params: _, ...rest } = args;
-    return await config.function({ ...rest, identity, params: parsedParams.data });
+    return await config.function({
+      ...rest,
+      identity,
+      params: parsedParams.data,
+      query: parsedQuery.data,
+    });
   };
 }
 
 /**
  * Creates a protected action function that validates permissions and parameters
  */
-export function createProtectedAction<T, P extends z.ZodSchema | undefined = undefined>(
-  config: ProtectedActionConfig<T, P>
-) {
+export function createProtectedAction<
+  T,
+  P extends z.ZodSchema | undefined = undefined,
+  Q extends z.ZodSchema | undefined = undefined,
+>(config: ProtectedActionConfig<T, P, Q>) {
   return async (args: ActionFunctionArgs) => {
     const parsedParams = validateParams(args.params, config.paramValidation);
+    const parsedQuery = validateQueryParams(
+      new URL(args.request.url).searchParams,
+      config.queryValidation
+    );
     const identity = await validateIdentity(args.request, config.permissions);
     const { params: _, ...rest } = args;
-    return await config.function({ ...rest, identity, params: parsedParams.data });
+    return await config.function({
+      ...rest,
+      identity,
+      params: parsedParams.data,
+      query: parsedQuery.data,
+    });
   };
 }
 
@@ -93,3 +123,22 @@ function validateParams(params: any, schema?: z.ZodSchema) {
 
   return { data: parsed.data };
 }
+
+function validateQueryParams(searchParams: URLSearchParams, schema?: z.ZodSchema) {
+  if (!schema) {
+    return { data: null };
+  }
+
+  // Convert URLSearchParams to a plain object
+  const params: Record<string, string> = {};
+  searchParams.forEach((value, key) => {
+    params[key] = value;
+  });
+
+  const parsed = schema.safeParse(params);
+  if (!parsed.success) {
+    throw new Error(parsed.error.message);
+  }
+
+  return { data: parsed.data };
+}