feat: add more group permissions (#1453)

* feat: add more group permissions

* feat: restrict access with app permissions

* feat: restrict access with search-engine permissions

* feat: restrict access with media permissions

* refactor: remove permissions for users, groups and invites

* test: adjust app router tests with app permissions

* fix: integration page accessible without session

* fix: search for users, groups and integrations shown to unauthenticated users

* chore: address pull request feedback

apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/page.tsx

@@ -1,6 +1,8 @@
+import { notFound } from "next/navigation";
 import { Container, Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 import { getI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
@@ -11,6 +13,11 @@ interface AppEditPageProps {
 }
 
 export default async function AppEditPage({ params }: AppEditPageProps) {
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("app-modify-all")) {
+    notFound();
+  }
   const app = await api.app.byId({ id: params.id });
   const t = await getI18n();
 

apps/nextjs/src/app/[locale]/manage/apps/new/page.tsx

@@ -1,11 +1,19 @@
+import { notFound } from "next/navigation";
 import { Container, Stack, Title } from "@mantine/core";
 
+import { auth } from "@homarr/auth/next";
 import { getI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { AppNewForm } from "./_app-new-form";
 
 export default async function AppNewPage() {
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("app-create")) {
+    notFound();
+  }
+
   const t = await getI18n();
 
   return (

apps/nextjs/src/app/[locale]/manage/apps/page.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconApps, IconPencil } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 import { parseAppHrefWithVariablesServer } from "@homarr/common/server";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
@@ -13,6 +15,12 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { AppDeleteButton } from "./_app-delete-button";
 
 export default async function AppsPage() {
+  const session = await auth();
+
+  if (!session) {
+    redirect("/auth/login");
+  }
+
   const apps = await api.app.all();
   const t = await getScopedI18n("app");
 
@@ -22,9 +30,11 @@ export default async function AppsPage() {
       <Stack>
         <Group justify="space-between" align="center">
           <Title>{t("page.list.title")}</Title>
-          <MobileAffixButton component={Link} href="/manage/apps/new">
-            {t("page.create.title")}
-          </MobileAffixButton>
+          {session.user.permissions.includes("app-create") && (
+            <MobileAffixButton component={Link} href="/manage/apps/new">
+              {t("page.create.title")}
+            </MobileAffixButton>
+          )}
         </Group>
         {apps.length === 0 && <AppNoResults />}
         {apps.length > 0 && (
@@ -45,6 +55,7 @@ interface AppCardProps {
 
 const AppCard = async ({ app }: AppCardProps) => {
   const t = await getScopedI18n("app");
+  const session = await auth();
 
   return (
     <Card>
@@ -78,16 +89,18 @@ const AppCard = async ({ app }: AppCardProps) => {
         </Group>
         <Group>
           <ActionIconGroup>
-            <ActionIcon
-              component={Link}
-              href={`/manage/apps/edit/${app.id}`}
-              variant="subtle"
-              color="gray"
-              aria-label={t("page.edit.title")}
-            >
-              <IconPencil size={16} stroke={1.5} />
-            </ActionIcon>
-            <AppDeleteButton app={app} />
+            {session?.user.permissions.includes("app-modify-all") && (
+              <ActionIcon
+                component={Link}
+                href={`/manage/apps/edit/${app.id}`}
+                variant="subtle"
+                color="gray"
+                aria-label={t("page.edit.title")}
+              >
+                <IconPencil size={16} stroke={1.5} />
+              </ActionIcon>
+            )}
+            {session?.user.permissions.includes("app-full-all") && <AppDeleteButton app={app} />}
           </ActionIconGroup>
         </Group>
       </Group>
@@ -97,6 +110,7 @@ const AppCard = async ({ app }: AppCardProps) => {
 
 const AppNoResults = async () => {
   const t = await getI18n();
+  const session = await auth();
 
   return (
     <Card withBorder bg="transparent">
@@ -105,7 +119,9 @@ const AppNoResults = async () => {
         <Text fw={500} size="lg">
           {t("app.page.list.noResults.title")}
         </Text>
-        <Anchor href="/manage/apps/new">{t("app.page.list.noResults.action")}</Anchor>
+        {session?.user.permissions.includes("app-create") && (
+          <Anchor href="/manage/apps/new">{t("app.page.list.noResults.action")}</Anchor>
+        )}
       </Stack>
     </Card>
   );

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx

@@ -6,7 +6,7 @@ import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { IntegrationAvatar } from "@homarr/ui";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { catchTrpcNotFound } from "~/errors/trpc-not-found";
+import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { IntegrationAccessSettings } from "../../_components/integration-access-settings";
 import { EditIntegrationForm } from "./_integration-edit-form";
 

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import type { PropsWithChildren } from "react";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import {
   AccordionControl,
   AccordionItem,
@@ -50,11 +51,16 @@ interface IntegrationsPageProps {
 }
 
 export default async function IntegrationsPage({ searchParams }: IntegrationsPageProps) {
-  const integrations = await api.integration.all();
   const session = await auth();
+
+  if (!session) {
+    redirect("/auth/login");
+  }
+
+  const integrations = await api.integration.all();
   const t = await getScopedI18n("integration");
 
-  const canCreateIntegrations = session?.user.permissions.includes("integration-create") ?? false;
+  const canCreateIntegrations = session.user.permissions.includes("integration-create");
 
   return (
     <ManageContainer>

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -52,16 +52,19 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
       icon: IconBox,
       href: "/manage/apps",
       label: t("items.apps"),
+      hidden: !session,
     },
     {
       icon: IconPlug,
       href: "/manage/integrations",
       label: t("items.integrations"),
+      hidden: !session,
     },
     {
       icon: IconSearch,
       href: "/manage/search-engines",
       label: t("items.searchEngies"),
+      hidden: !session,
     },
     {
       icon: IconPhoto,
@@ -95,27 +98,32 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
     {
       label: t("items.tools.label"),
       icon: IconTool,
-      hidden: !session?.user.permissions.includes("admin"),
+      // As permissions always include there children permissions, we can check other-view-logs as admin includes it
+      hidden: !session?.user.permissions.includes("other-view-logs"),
       items: [
         {
           label: t("items.tools.items.docker"),
           icon: IconBrandDocker,
           href: "/manage/tools/docker",
+          hidden: !session?.user.permissions.includes("admin"),
         },
         {
           label: t("items.tools.items.api"),
           icon: IconPlug,
           href: "/manage/tools/api",
+          hidden: !session?.user.permissions.includes("admin"),
         },
         {
           label: t("items.tools.items.logs"),
           icon: IconLogs,
           href: "/manage/tools/logs",
+          hidden: !session?.user.permissions.includes("other-view-logs"),
         },
         {
           label: t("items.tools.items.tasks"),
           icon: IconReport,
           href: "/manage/tools/tasks",
+          hidden: !session?.user.permissions.includes("admin"),
         },
       ],
     },

apps/nextjs/src/app/[locale]/manage/medias/page.tsx

@@ -47,7 +47,6 @@ export default async function GroupsListPage(props: MediaListPageProps) {
   const t = await getI18n();
   const searchParams = searchParamsSchema.parse(props.searchParams);
   const { items: medias, totalCount } = await api.media.getPaginated(searchParams);
-  const isAdmin = session.user.permissions.includes("admin");
 
   return (
     <ManageContainer size="xl">
@@ -57,10 +56,12 @@ export default async function GroupsListPage(props: MediaListPageProps) {
         <Group justify="space-between">
           <Group>
             <SearchInput placeholder={`${t("media.search")}...`} defaultValue={searchParams.search} />
-            {isAdmin && <IncludeFromAllUsersSwitch defaultChecked={searchParams.includeFromAllUsers} />}
+            {session.user.permissions.includes("media-view-all") && (
+              <IncludeFromAllUsersSwitch defaultChecked={searchParams.includeFromAllUsers} />
+            )}
           </Group>
 
-          <UploadMedia />
+          {session.user.permissions.includes("media-upload") && <UploadMedia />}
         </Group>
         <Table striped highlightOnHover>
           <TableThead>
@@ -91,7 +92,10 @@ interface RowProps {
   media: RouterOutputs["media"]["getPaginated"]["items"][number];
 }
 
-const Row = ({ media }: RowProps) => {
+const Row = async ({ media }: RowProps) => {
+  const session = await auth();
+  const canDelete = media.creatorId === session?.user.id || session?.user.permissions.includes("media-full-all");
+
   return (
     <TableTr>
       <TableTd w={64}>
@@ -120,7 +124,7 @@ const Row = ({ media }: RowProps) => {
       <TableTd w={64}>
         <Group wrap="nowrap" gap="xs">
           <CopyMedia media={media} />
-          <DeleteMedia media={media} />
+          {canDelete && <DeleteMedia media={media} />}
         </Group>
       </TableTd>
     </TableTr>

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -64,6 +64,7 @@ export default async function ManagementPage() {
       href: "/manage/apps",
       subtitle: t("statisticLabel.resources"),
       title: t("statistic.app"),
+      hidden: !session?.user,
     },
     {
       count: statistics.countGroups,

apps/nextjs/src/app/[locale]/manage/search-engines/edit/[id]/page.tsx

@@ -1,6 +1,8 @@
+import { notFound } from "next/navigation";
 import { Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 import { getI18n } from "@homarr/translation/server";
 
 import { ManageContainer } from "~/components/manage/manage-container";
@@ -12,6 +14,12 @@ interface SearchEngineEditPageProps {
 }
 
 export default async function SearchEngineEditPage({ params }: SearchEngineEditPageProps) {
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("search-engine-modify-all")) {
+    notFound();
+  }
+
   const searchEngine = await api.searchEngine.byId({ id: params.id });
   const t = await getI18n();
 

apps/nextjs/src/app/[locale]/manage/search-engines/new/page.tsx

@@ -1,5 +1,7 @@
+import { notFound } from "next/navigation";
 import { Stack, Title } from "@mantine/core";
 
+import { auth } from "@homarr/auth/next";
 import { getI18n } from "@homarr/translation/server";
 
 import { ManageContainer } from "~/components/manage/manage-container";
@@ -7,6 +9,12 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { SearchEngineNewForm } from "./_search-engine-new-form";
 
 export default async function SearchEngineNewPage() {
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("search-engine-create")) {
+    notFound();
+  }
+
   const t = await getI18n();
 
   return (

apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
 import { IconPencil, IconSearch } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 import { SearchInput, TablePagination } from "@homarr/ui";
 import { z } from "@homarr/validation";
@@ -28,6 +30,12 @@ interface SearchEnginesPageProps {
 }
 
 export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
+  const session = await auth();
+
+  if (!session) {
+    redirect("/auth/login");
+  }
+
   const searchParams = searchParamsSchema.parse(props.searchParams);
   const { items: searchEngines, totalCount } = await api.searchEngine.getPaginated(searchParams);
 
@@ -40,9 +48,11 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
         <Title>{tEngine("page.list.title")}</Title>
         <Group justify="space-between" align="center">
           <SearchInput placeholder={`${tEngine("search")}...`} defaultValue={searchParams.search} />
-          <MobileAffixButton component={Link} href="/manage/search-engines/new">
-            {tEngine("page.create.title")}
-          </MobileAffixButton>
+          {session.user.permissions.includes("search-engine-create") && (
+            <MobileAffixButton component={Link} href="/manage/search-engines/new">
+              {tEngine("page.create.title")}
+            </MobileAffixButton>
+          )}
         </Group>
         {searchEngines.length === 0 && <SearchEngineNoResults />}
         {searchEngines.length > 0 && (
@@ -67,6 +77,7 @@ interface SearchEngineCardProps {
 
 const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
   const t = await getScopedI18n("search.engine");
+  const session = await auth();
 
   return (
     <Card>
@@ -105,16 +116,20 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
         </Group>
         <Group>
           <ActionIconGroup>
-            <ActionIcon
-              component={Link}
-              href={`/manage/search-engines/edit/${searchEngine.id}`}
-              variant="subtle"
-              color="gray"
-              aria-label={t("page.edit.title")}
-            >
-              <IconPencil size={16} stroke={1.5} />
-            </ActionIcon>
-            <SearchEngineDeleteButton searchEngine={searchEngine} />
+            {session?.user.permissions.includes("search-engine-modify-all") && (
+              <ActionIcon
+                component={Link}
+                href={`/manage/search-engines/edit/${searchEngine.id}`}
+                variant="subtle"
+                color="gray"
+                aria-label={t("page.edit.title")}
+              >
+                <IconPencil size={16} stroke={1.5} />
+              </ActionIcon>
+            )}
+            {session?.user.permissions.includes("search-engine-full-all") && (
+              <SearchEngineDeleteButton searchEngine={searchEngine} />
+            )}
           </ActionIconGroup>
         </Group>
       </Group>
@@ -124,6 +139,7 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
 
 const SearchEngineNoResults = async () => {
   const t = await getI18n();
+  const session = await auth();
 
   return (
     <Card withBorder bg="transparent">
@@ -132,7 +148,9 @@ const SearchEngineNoResults = async () => {
         <Text fw={500} size="lg">
           {t("search.engine.page.list.noResults.title")}
         </Text>
-        <Anchor href="/manage/search-engines/new">{t("search.engine.page.list.noResults.action")}</Anchor>
+        {session?.user.permissions.includes("search-engine-create") && (
+          <Anchor href="/manage/search-engines/new">{t("search.engine.page.list.noResults.action")}</Anchor>
+        )}
       </Stack>
     </Card>
   );

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -27,7 +27,7 @@ export async function generateMetadata() {
 
 export default async function LogsManagementPage() {
   const session = await auth();
-  if (!session?.user || !session.user.permissions.includes("admin")) {
+  if (!session?.user || !session.user.permissions.includes("other-view-logs")) {
     notFound();
   }
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -8,7 +8,7 @@ import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
 import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
-import { catchTrpcNotFound } from "~/errors/trpc-not-found";
+import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { createMetaTitle } from "~/metadata";
 import { canAccessUserEditPage } from "../access";
 import { ChangeHomeBoardForm } from "./_components/_change-home-board";

apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx

@@ -10,7 +10,7 @@ import { UserAvatar } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { catchTrpcNotFound } from "~/errors/trpc-not-found";
+import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { NavigationLink } from "../groups/[id]/_navigation";
 import { canAccessUserEditPage } from "./access";
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx

@@ -5,7 +5,7 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import { catchTrpcNotFound } from "~/errors/trpc-not-found";
+import { catchTrpcNotFound } from "~/errors/trpc-catch-error";
 import { canAccessUserEditPage } from "../access";
 import { ChangePasswordForm } from "./_components/_change-password-form";
 

apps/nextjs/src/errors/trpc-catch-error.ts

@@ -0,0 +1,23 @@
+import "server-only";
+
+import { notFound, redirect } from "next/navigation";
+import { TRPCError } from "@trpc/server";
+
+import { logger } from "@homarr/log";
+
+export const catchTrpcNotFound = (err: unknown) => {
+  if (err instanceof TRPCError && err.code === "NOT_FOUND") {
+    notFound();
+  }
+
+  throw err;
+};
+
+export const catchTrpcUnauthorized = (err: unknown) => {
+  if (err instanceof TRPCError && err.code === "UNAUTHORIZED") {
+    logger.info("Somebody tried to access a protected route without being authenticated, redirecting to login page");
+    redirect("/auth/login");
+  }
+
+  throw err;
+};

apps/nextjs/src/errors/trpc-not-found.ts

@@ -1,12 +0,0 @@
-import "server-only";
-
-import { notFound } from "next/navigation";
-import { TRPCError } from "@trpc/server";
-
-export const catchTrpcNotFound = (err: unknown) => {
-  if (err instanceof TRPCError && err.code === "NOT_FOUND") {
-    notFound();
-  }
-
-  throw err;
-};