Enhances route security with parameter validation

Refactors action and loader functions to utilize a secure route
utility for consistent permission and parameter validation.
Introduces strict parameter validation using Zod schemas to
ensure robust data handling across user management routes.

Author: MichielOlijslagers

app/features/admin/routes/user.detail.ban.tsx

@@ -9,6 +9,7 @@ import { DialogContent, DialogFooter, DialogTitle } from "~/components/ui/dialog
 import { Dialog } from "~/components/ui/dialog";
 import { useState, useEffect } from "react";
 import type { OutletContext } from "./user.detail";
+import { createProtectedAction } from "~/lib/secureRoute";
 
 const banSchema = z.object({
   banReason: z.string().min(1, "Ban reason is required").max(500, "Ban reason is too long"),
@@ -26,42 +27,47 @@ const banSchema = z.object({
     ),
 });
 
-export async function action({ request, params }: { request: Request; params: { id: string } }) {
-  try {
-    const formData = await request.formData();
-    const banData = {
-      banReason: formData.get("banReason") as string,
-      banExpires: formData.get("banExpires") as string,
-    };
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ request, params }) => {
+    try {
+      const formData = await request.formData();
+      const banData = {
+        banReason: formData.get("banReason") as string,
+        banExpires: formData.get("banExpires") as string,
+      };
 
-    const validatedData = banSchema.parse(banData);
+      const validatedData = banSchema.parse(banData);
 
-    // Calculate ban duration in seconds
-    const banExpiresIn = validatedData.banExpires
-      ? Math.floor((new Date(validatedData.banExpires).getTime() - Date.now()) / 1000)
-      : undefined;
+      // Calculate ban duration in seconds
+      const banExpiresIn = validatedData.banExpires
+        ? Math.floor((new Date(validatedData.banExpires).getTime() - Date.now()) / 1000)
+        : undefined;
 
-    await auth.api.banUser({
-      headers: request.headers,
-      body: {
-        userId: params.id,
-        banReason: validatedData.banReason,
-        banExpiresIn,
-      },
-    });
+      await auth.api.banUser({
+        headers: request.headers,
+        body: {
+          userId: params.id,
+          banReason: validatedData.banReason,
+          banExpiresIn,
+        },
+      });
 
-    return { success: true, message: "User banned successfully" };
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return {
-        success: false,
-        error: "Validation failed",
-        fieldErrors: error.flatten().fieldErrors,
-      };
+      return { success: true, message: "User banned successfully" };
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        return {
+          success: false,
+          error: "Validation failed",
+          fieldErrors: error.flatten().fieldErrors,
+        };
+      }
+      return { success: false, error: "Failed to ban user" };
     }
-    return { success: false, error: "Failed to ban user" };
-  }
-}
+  },
+});
 
 export default function UserBanPage() {
   const { user } = useOutletContext<OutletContext>();

app/features/admin/routes/user.detail.delete.tsx

@@ -6,18 +6,25 @@ import { DialogContent, DialogFooter, DialogTitle } from "~/components/ui/dialog
 import { Dialog } from "~/components/ui/dialog";
 import { useEffect, useState } from "react";
 import type { OutletContext } from "./user.detail";
+import { createProtectedAction } from "~/lib/secureRoute";
+import { z } from "zod";
 
-export async function action({ params }: { params: { id: string } }) {
-  try {
-    await prisma.user.delete({
-      where: { id: params.id },
-    });
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ params }) => {
+    try {
+      await prisma.user.delete({
+        where: { id: params.id },
+      });
 
-    return { success: true, message: "User deleted successfully" };
-  } catch (error) {
-    return { success: false, error: "Failed to delete user" };
-  }
-}
+      return { success: true, message: "User deleted successfully" };
+    } catch (error) {
+      return { success: false, error: "Failed to delete user" };
+    }
+  },
+});
 
 export default function UserDeletePage() {
   const { user } = useOutletContext<OutletContext>();

app/features/admin/routes/user.detail.revoke-all.tsx

@@ -6,19 +6,26 @@ import { DialogContent, DialogFooter, DialogTitle } from "~/components/ui/dialog
 import { Dialog } from "~/components/ui/dialog";
 import { useEffect, useState } from "react";
 import type { OutletContext } from "./user.detail";
+import { createProtectedAction } from "~/lib/secureRoute";
+import { z } from "zod";
 
-export async function action({ params }: { params: { id: string } }) {
-  try {
-    // Delete all sessions for the user
-    await prisma.session.deleteMany({
-      where: { userId: params.id },
-    });
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ params }) => {
+    try {
+      // Delete all sessions for the user
+      await prisma.session.deleteMany({
+        where: { userId: params.id },
+      });
 
-    return { success: true, message: "All sessions revoked successfully" };
-  } catch (error) {
-    return { success: false, error: "Failed to revoke sessions" };
-  }
-}
+      return { success: true, message: "All sessions revoked successfully" };
+    } catch (error) {
+      return { success: false, error: "Failed to revoke sessions" };
+    }
+  },
+});
 
 export default function UserRevokeAllSessionsPage() {
   const { user } = useOutletContext<OutletContext>();

app/features/admin/routes/user.detail.revoke.tsx

@@ -14,35 +14,36 @@ import { Dialog } from "~/components/ui/dialog";
 import { useEffect, useState } from "react";
 import { auth } from "~/lib/auth";
 import type { OutletContext } from "./user.detail";
+import { createProtectedAction } from "~/lib/secureRoute";
+import { z } from "zod";
 
-export async function action({
-  request,
-  params,
-}: {
-  request: Request;
-  params: { sessionId: string };
-}) {
-  try {
-    const session = await prisma.session.findUnique({
-      where: { id: params.sessionId },
-    });
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    sessionId: z.string(),
+  }),
+  function: async ({ request, params }) => {
+    try {
+      const session = await prisma.session.findUnique({
+        where: { id: params.sessionId },
+      });
 
-    if (!session) {
-      throw new Response("Session not found", { status: 404 });
-    }
+      if (!session) {
+        throw new Response("Session not found", { status: 404 });
+      }
 
-    await auth.api.revokeUserSession({
-      headers: request.headers,
-      body: {
-        sessionToken: session.token,
-      },
-    });
+      await auth.api.revokeUserSession({
+        headers: request.headers,
+        body: {
+          sessionToken: session.token,
+        },
+      });
 
-    return { success: true, message: "Session revoked successfully" };
-  } catch (error) {
-    return { success: false, error: "Failed to revoke session" };
-  }
-}
+      return { success: true, message: "Session revoked successfully" };
+    } catch (error) {
+      return { success: false, error: "Failed to revoke session" };
+    }
+  },
+});
 
 export default function UserRevokeSessionPage() {
   const { user } = useOutletContext<OutletContext>();

app/features/admin/routes/user.detail.set-role.tsx

@@ -9,38 +9,44 @@ import { Dialog } from "~/components/ui/dialog";
 import { useState, useEffect } from "react";
 import type { OutletContext } from "./user.detail";
 import { Checkbox } from "~/components/ui/checkbox";
+import { createProtectedAction } from "~/lib/secureRoute";
 
 const roleSchema = z.object({
   roles: z.array(z.enum(["user", "admin"])).min(1, "At least one role is required"),
 });
 
-export async function action({ request, params }: { request: Request; params: { id: string } }) {
-  try {
-    const formData = await request.formData();
-    const roles = formData.getAll("roles") as string[];
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ request, params }) => {
+    try {
+      const formData = await request.formData();
+      const roles = formData.getAll("roles") as string[];
 
-    const validatedData = roleSchema.parse({ roles });
+      const validatedData = roleSchema.parse({ roles });
 
-    await auth.api.setRole({
-      headers: request.headers,
-      body: {
-        userId: params.id,
-        role: validatedData.roles,
-      },
-    });
+      await auth.api.setRole({
+        headers: request.headers,
+        body: {
+          userId: params.id,
+          role: validatedData.roles,
+        },
+      });
 
-    return { success: true, message: "User roles updated successfully" };
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      return {
-        success: false,
-        error: "Validation failed",
-        fieldErrors: error.flatten().fieldErrors,
-      };
+      return { success: true, message: "User roles updated successfully" };
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        return {
+          success: false,
+          error: "Validation failed",
+          fieldErrors: error.flatten().fieldErrors,
+        };
+      }
+      return { success: false, error: "Failed to update user roles" };
     }
-    return { success: false, error: "Failed to update user roles" };
-  }
-}
+  },
+});
 
 export default function UserSetRolePage() {
   const { user } = useOutletContext<OutletContext>();

app/features/admin/routes/user.detail.tsx

@@ -9,29 +9,36 @@ import prisma from "~/lib/prismaClient";
 import { formatDate } from "~/lib/date";
 import { Link } from "react-router";
 import { authClient } from "~/lib/auth-client";
+import { createProtectedLoader } from "~/lib/secureRoute";
+import { z } from "zod";
 
-export async function loader({ params }: { params: { id: string } }) {
-  const user = await prisma.user.findUnique({
-    where: { id: params.id },
-    include: {
-      sessions: {
-        orderBy: { createdAt: "desc" },
-        take: 30,
+export const loader = createProtectedLoader({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ params }) => {
+    const user = await prisma.user.findUnique({
+      where: { id: params.id },
+      include: {
+        sessions: {
+          orderBy: { createdAt: "desc" },
+          take: 30,
+        },
       },
-    },
-  });
+    });
 
-  if (!user) {
-    throw new Response("User not found", { status: 404 });
-  }
+    if (!user) {
+      throw new Response("User not found", { status: 404 });
+    }
 
-  return {
-    user: {
-      ...user,
-      role: user.role ? user.role.split(",").map((role) => role.trim()) : null,
-    },
-  };
-}
+    return {
+      user: {
+        ...user,
+        role: user.role ? user.role.split(",").map((role) => role.trim()) : null,
+      },
+    };
+  },
+});
 
 export default function UserDetailPage() {
   const { user } = useLoaderData<typeof loader>();

app/features/admin/routes/user.detail.unban.tsx

@@ -6,23 +6,30 @@ import { DialogContent, DialogFooter, DialogTitle } from "~/components/ui/dialog
 import { Dialog } from "~/components/ui/dialog";
 import { useEffect, useState } from "react";
 import type { OutletContext } from "./user.detail";
+import { createProtectedAction } from "~/lib/secureRoute";
+import { z } from "zod";
 
-export async function action({ params }: { params: { id: string } }) {
-  try {
-    await prisma.user.update({
-      where: { id: params.id },
-      data: {
-        banned: false,
-        banReason: null,
-        banExpires: null,
-      },
-    });
+export const action = createProtectedAction({
+  paramValidation: z.object({
+    id: z.string(),
+  }),
+  function: async ({ params }) => {
+    try {
+      await prisma.user.update({
+        where: { id: params.id },
+        data: {
+          banned: false,
+          banReason: null,
+          banExpires: null,
+        },
+      });
 
-    return { success: true, message: "User unbanned successfully" };
-  } catch (error) {
-    return { success: false, error: "Failed to unban user" };
-  }
-}
+      return { success: true, message: "User unbanned successfully" };
+    } catch (error) {
+      return { success: false, error: "Failed to unban user" };
+    }
+  },
+});
 
 export default function UserUnbanPage() {
   const { user } = useOutletContext<OutletContext>();