feat: add validation check role on protected route

Author: mpsalunggg

package.json

@@ -16,7 +16,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn format && git add -A . --allow-empty"
+      "pre-commit": "pnpm format && git add -A . --allow-empty"
     }
   },
   "dependencies": {

src/app/[locale]/admin/layout.tsx

@@ -1,35 +1,26 @@
-import { cookies } from "next/headers";
 import RouteBreadcrumb from "@/components/common/RouteBreadcrumb";
 import AdminSidebar from "@/components/layout/AdminSidebar";
 
-import { jwtDecode } from "jwt-decode";
-import { redirect } from "next/navigation";
-import { AuthJwtPayload } from "@/types";
 import { Separator } from "@/components/ui/Separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/Sidebar";
+import ProtectedRoute from "@/components/layout/ProtectedRoute";
 
 export default async function AdminLayout({ children }: { children: React.ReactNode }) {
-  const cookieStore = await cookies();
-  const token = cookieStore.get("token");
-
-  if (!token) return redirect("/");
-
-  const payload = jwtDecode<AuthJwtPayload>(token.value);
-  if (payload.role !== "admin") return redirect("/");
-
   return (
     <SidebarProvider>
-      <AdminSidebar />
-      <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-            <RouteBreadcrumb />
-          </div>
-        </header>
-        <main className="p-4">{children}</main>
-      </SidebarInset>
+      <ProtectedRoute requiredRole="admin">
+        <AdminSidebar />
+        <SidebarInset>
+          <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+            <div className="flex items-center gap-2 px-4">
+              <SidebarTrigger className="-ml-1" />
+              <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+              <RouteBreadcrumb />
+            </div>
+          </header>
+          <main className="p-4">{children}</main>
+        </SidebarInset>
+      </ProtectedRoute>
     </SidebarProvider>
   );
 }

src/components/layout/ProtectedRoute/index.tsx

@@ -6,22 +6,38 @@ import { useEffect } from "react";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
+  requiredRole?: string;
 }
 
 /**
- * Protects a route by checking if the user is authenticated
+ * Protects a route by checking if the user is authenticated and has required role
  */
-export default function ProtectedRoute({ children }: ProtectedRouteProps) {
-  const { isAuthenticated } = useAuthUser();
+export default function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
+  const { isAuthenticated, user } = useAuthUser();
   const router = useRouter();
 
+  // Check if user has required role (if no role required, always true)
+  const hasRequiredRole = !requiredRole || user?.role === requiredRole;
+  // User can access if authenticated and has required role
+  const canAccess = isAuthenticated && hasRequiredRole;
+
+  const redirectSignin = () => {
+    router.replace("/sign-in");
+  };
+
   useEffect(() => {
     if (!isAuthenticated) {
-      router.replace("/sign-in");
+      redirectSignin();
+      return;
+    }
+
+    if (!hasRequiredRole) {
+      router.replace("/");
+      return;
     }
-  }, [isAuthenticated]);
+  }, [isAuthenticated, hasRequiredRole]);
 
-  if (!isAuthenticated) {
+  if (!canAccess) {
     return null;
   }