feat(auth): hide inaccessible resource buttons (#242)

Author: kguzek

src/components/presentation/dashboard-button.tsx

@@ -4,13 +4,15 @@ import type { Route } from "next";
 
 import { Link } from "@/components/core/link";
 import { Button } from "@/components/ui/button";
+import { permit } from "@/features/authentication/server";
+import type { RoutePermission } from "@/features/authentication/types";
 import { GrammaticalCase, declineNoun } from "@/features/polish";
 import { getManagingResourceLabel } from "@/features/resources";
 import type { RoutableResource } from "@/features/resources/types";
 import { cn } from "@/lib/utils";
 import { toTitleCase } from "@/utils";
 
-export function DashboardButton({
+export async function DashboardButton({
   icon: Icon,
   variant = "default",
   className,
@@ -31,18 +33,18 @@ export function DashboardButton({
         preserveCase?: boolean;
       }
     | {
-        href: Route;
+        href: Route & RoutePermission;
         label: string;
         resource?: never;
         longLabel?: never;
         preserveCase?: never;
       }
   )) {
-  const [href, label] =
+  const [route, label] =
     resource == null
       ? [hrefOverride, labelOverride]
       : [
-          hrefOverride ?? (`/${resource}` as const),
+          `/${resource}` as const,
           longLabel
             ? getManagingResourceLabel(resource)
             : (labelOverride ??
@@ -52,6 +54,11 @@ export function DashboardButton({
               })),
         ];
 
+  const hasPermission = await permit(route);
+  if (!hasPermission) {
+    return null;
+  }
+
   const useViewTransition = resource != null && variant === "default";
 
   return (
@@ -64,7 +71,7 @@ export function DashboardButton({
       asChild
     >
       <Link
-        href={href}
+        href={hrefOverride ?? route}
         style={{
           viewTransitionName: useViewTransition
             ? `resource-card-${resource}`

src/features/authentication/data/route-permissions.ts

@@ -4,38 +4,42 @@ import { Resource } from "@/features/resources";
 import type { RoutableResource } from "@/features/resources/types";
 import type { RecordIntersection } from "@/types/helpers";
 
+const SOLVRO_ADMINS_ONLY = ["solvro_admin"] as const;
+const ADMINS_ONLY = ["admin", ...SOLVRO_ADMINS_ONLY] as const;
+const ANY_AUTHENTICATED_ROLE = ["user", ...ADMINS_ONLY] as const;
+
 export const ROUTE_PERMISSIONS = {
-  "/": ["user", "admin"],
-  "/review": ["user", "admin"],
-  [`/${Resource.AboutUs}`]: ["user", "admin"],
-  [`/${Resource.AboutUsLinks}`]: ["user", "admin"],
-  [`/${Resource.AcademicSemesters}`]: ["user", "admin"],
-  [`/${Resource.Aeds}`]: ["user", "admin"],
-  [`/${Resource.Banners}`]: ["user", "admin"],
-  [`/${Resource.BicycleShowers}`]: ["user", "admin"],
-  [`/${Resource.Buildings}`]: ["user", "admin"],
-  [`/${Resource.CalendarEvents}`]: ["user", "admin"],
-  [`/${Resource.Campuses}`]: ["user", "admin"],
-  [`/${Resource.Contributors}`]: ["user", "admin"],
-  [`/${Resource.DaySwaps}`]: ["user", "admin"],
-  [`/${Resource.Departments}`]: ["user", "admin"],
-  [`/${Resource.FoodSpots}`]: ["user", "admin"],
-  [`/${Resource.GuideArticles}`]: ["user", "admin"],
-  [`/${Resource.Holidays}`]: ["user", "admin"],
-  [`/${Resource.Libraries}`]: ["user", "admin"],
-  [`/${Resource.Map}`]: ["user", "admin"],
-  [`/${Resource.Milestones}`]: ["user", "admin"],
-  [`/${Resource.MobileConfig}`]: ["user", "admin"],
-  [`/${Resource.Notifications}`]: ["user", "admin"],
-  [`/${Resource.NotificationTopics}`]: ["user", "admin"],
-  [`/${Resource.PinkBoxes}`]: ["user", "admin"],
-  [`/${Resource.PolinkaStations}`]: ["user", "admin"],
-  [`/${Resource.Roles}`]: ["user", "admin"],
-  [`/${Resource.SksOpeningHours}`]: ["user", "admin"],
-  [`/${Resource.StudentOrganizations}`]: ["user", "admin"],
-  [`/${Resource.Versions}`]: ["user", "admin"],
+  "/": ANY_AUTHENTICATED_ROLE,
+  "/review": SOLVRO_ADMINS_ONLY,
+  [`/${Resource.AboutUs}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.AboutUsLinks}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.AcademicSemesters}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Aeds}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Banners}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.BicycleShowers}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Buildings}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.CalendarEvents}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Campuses}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Contributors}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.DaySwaps}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Departments}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.FoodSpots}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.GuideArticles}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Holidays}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Libraries}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Map}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Milestones}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.MobileConfig}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Notifications}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.NotificationTopics}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.PinkBoxes}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.PolinkaStations}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Roles}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.SksOpeningHours}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.StudentOrganizations}`]: ANY_AUTHENTICATED_ROLE,
+  [`/${Resource.Versions}`]: ANY_AUTHENTICATED_ROLE,
 } satisfies RecordIntersection<
   `/${RoutableResource}`,
   Route,
-  string[] | undefined
+  readonly string[] | undefined
 >;

src/features/authentication/server.ts

@@ -3,3 +3,4 @@ export * from "./components/private-layout";
 export * from "./components/public-layout";
 
 export * from "./utils/get-auth-state.server";
+export * from "./utils/permit";

src/features/authentication/utils/get-route-permissions.ts

@@ -6,5 +6,7 @@ import type { RoutePermission } from "../types/internal";
  * The route permissions configuration is typed to include all routable resources, so this is enforced by TypeScript,
  * but during development it helps by displaying a 403 Forbidden error rather than a runtime error in case of missing routes.
  */
-export const getRoutePermissions = (route: RoutePermission): string[] =>
-  (ROUTE_PERMISSIONS[route] as string[] | undefined) ?? [];
+export const getRoutePermissions = (
+  route: RoutePermission,
+): readonly string[] =>
+  (ROUTE_PERMISSIONS[route] as readonly string[] | undefined) ?? [];

src/features/authentication/utils/get-user-permissions.ts

@@ -4,10 +4,6 @@ export function getUserPermissions(user: User | null): string[] {
   if (user == null) {
     return [];
   }
-  // TODO: update this when the backend supports user roles
-  const roles = ["user"];
-  // if (user.email.endsWith("@solvro.pl")) {
-  //   roles.push("admin");
-  // }
+  const roles = ["user", ...user.roles.map((role) => role.slug)];
   return roles;
 }