feat: add api keys

apps/nextjs/src/app/[locale]/manage/tools/api/components/api-keys.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Stack, Title } from "@mantine/core";
+import type { MRT_ColumnDef} from "mantine-react-table";
+import {MantineReactTable, useMantineReactTable } from "mantine-react-table";
+import {useMemo} from "react";
+import type {RouterOutputs} from "@homarr/api";
+
+interface ApiKeysManagementProps {
+  apiKeys: RouterOutputs["apiKeys"]["getAll"]
+}
+
+export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
+  const columns = useMemo<MRT_ColumnDef<RouterOutputs["apiKeys"]["getAll"][number]>[]>(
+    () => [
+      {
+        accessorKey: 'name.firstName', //access nested data with dot notation
+        header: 'First Name',
+      },
+      {
+        accessorKey: 'name.lastName',
+        header: 'Last Name',
+      },
+      {
+        accessorKey: 'address', //normal accessorKey
+        header: 'Address',
+      },
+      {
+        accessorKey: 'city',
+        header: 'City',
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+      },
+    ],
+    [],
+  );
+
+  const table = useMantineReactTable({
+    columns,
+    data: apiKeys,
+  });
+
+  return <Stack>
+    <Title>API Keys</Title>
+    <MantineReactTable table={table} />
+  </Stack>
+}

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

@@ -1,17 +1,18 @@
-import { getScopedI18n } from "@homarr/translation/server";
+import {getScopedI18n} from "@homarr/translation/server";
 
 // workaround for CSS that cannot be processed by next.js, https://github.com/swagger-api/swagger-ui/issues/10045
 import "./swagger-ui-dark.css";
 import "./swagger-ui-overrides.css";
 import "./swagger-ui.css";
 
-import { headers } from "next/headers";
+import {headers} from "next/headers";
 import SwaggerUI from "swagger-ui-react";
+import { ApiKeysManagement } from "./components/api-keys";
 
 import { openApiDocument } from "@homarr/api";
 import { extractBaseUrlFromHeaders } from "@homarr/common";
-
-import { createMetaTitle } from "~/metadata";
+import {createMetaTitle} from "~/metadata";
+import {api} from "@homarr/api/server";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
@@ -21,8 +22,12 @@ export async function generateMetadata() {
   };
 }
 
-export default function ApiPage() {
+export default async function ApiPage() {
   const document = openApiDocument(extractBaseUrlFromHeaders(headers()));
+  const apiKeys = await api.apiKeys.getAll();
 
-  return <SwaggerUI spec={document} />;
+  return <>
+    <ApiKeysManagement apiKeys={apiKeys} />
+    <SwaggerUI spec={document}/>
+  </>;
 }

packages/api/src/root.ts

@@ -13,6 +13,7 @@ import { serverSettingsRouter } from "./router/serverSettings";
 import { userRouter } from "./router/user";
 import { widgetRouter } from "./router/widgets";
 import { createTRPCRouter } from "./trpc";
+import {apiKeysRouter} from "./router/apiKeys";
 
 export const appRouter = createTRPCRouter({
   user: userRouter,
@@ -29,6 +30,7 @@ export const appRouter = createTRPCRouter({
   docker: dockerRouter,
   serverSettings: serverSettingsRouter,
   cronJobs: cronJobsRouter,
+  apiKeys: apiKeysRouter,
 });
 
 // export type definition of API

packages/api/src/router/apiKeys.ts

@@ -0,0 +1,10 @@
+import {createTRPCRouter, permissionRequiredProcedure} from "../trpc";
+import {db} from "@homarr/db";
+
+export const apiKeysRouter = createTRPCRouter({
+  getAll: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .query(() => {
+      return db.query.apiKeys.findMany();
+    })
+});

packages/db/migrations/mysql/0007_magenta_patch.sql

@@ -0,0 +1,8 @@
+CREATE TABLE `apiKey` (
+	`id` varchar(64) NOT NULL,
+	`apiKey` text NOT NULL,
+	`userId` varchar(64) NOT NULL,
+	CONSTRAINT `apiKey_id` PRIMARY KEY(`id`)
+);
+--> statement-breakpoint
+ALTER TABLE `apiKey` ADD CONSTRAINT `apiKey_userId_user_id_fk` FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON DELETE cascade ON UPDATE no action;