Enhance authentication and authorization components

- Refactored `AppAuth` to introduce `getGuardContextSchema` for improved user context handling. - Updated `Authenticator` to utilize `pickKeys` for user data extraction in JWT generation. - Enhanced `Guard` class to improve permission checks and error handling. - Modified `SystemController` to return context schema alongside permissions in API responses. - Added new `permissions` method in `SystemApi` for fetching permissions. - Improved UI components with additional props and tooltip support for better user experience.
2026-03-16 04:27:21 +00:00 · 2025-10-24 09:14:31 +02:00
parent 38902ebcba
commit eb0822bbff
15 changed files with 290 additions and 57 deletions
--- a/app/package.json
+++ b/app/package.json
@@ -65,7 +65,7 @@
    "hono": "4.8.3",
    "json-schema-library": "10.0.0-rc7",
    "json-schema-to-ts": "^3.1.1",
-    "jsonv-ts": "0.8.6",
+    "jsonv-ts": "0.9.1",
    "kysely": "0.27.6",
    "lodash-es": "^4.17.21",
    "oauth4webapi": "^2.11.1",
--- a/app/src/auth/AppAuth.ts
+++ b/app/src/auth/AppAuth.ts
@@ -2,7 +2,7 @@ import type { DB, PrimaryFieldType } from "bknd";
 import * as AuthPermissions from "auth/auth-permissions";
 import type { AuthStrategy } from "auth/authenticate/strategies/Strategy";
 import type { PasswordStrategy } from "auth/authenticate/strategies/PasswordStrategy";
-import { $console, secureRandomString, transformObject, pick } from "bknd/utils";
+import { $console, secureRandomString, transformObject, pickKeys } from "bknd/utils";
 import type { Entity, EntityManager } from "data/entities";
 import { em, entity, enumm, type FieldSchema } from "data/prototype";
 import { Module } from "modules/Module";
@@ -113,6 +113,19 @@ export class AppAuth extends Module<AppAuthSchema> {
      return authConfigSchema;
   }

+   getGuardContextSchema() {
+      const userschema = this.getUsersEntity().toSchema() as any;
+      return {
+         type: "object",
+         properties: {
+            user: {
+               type: "object",
+               properties: pickKeys(userschema.properties, this.config.jwt.fields as any),
+            },
+         },
+      };
+   }
+
   get authenticator(): Authenticator {
      this.throwIfNotBuilt();
      return this._authenticator!;
--- a/app/src/auth/authenticate/Authenticator.ts
+++ b/app/src/auth/authenticate/Authenticator.ts
@@ -6,10 +6,8 @@ import { deleteCookie, getSignedCookie, setSignedCookie } from "hono/cookie";
 import { sign, verify } from "hono/jwt";
 import { type CookieOptions, serializeSigned } from "hono/utils/cookie";
 import type { ServerEnv } from "modules/Controller";
-import { pick } from "lodash-es";
 import { InvalidConditionsException } from "auth/errors";
-import { s, parse, secret, runtimeSupports, truncate, $console } from "bknd/utils";
-import { $object } from "modules/mcp";
+import { s, parse, secret, runtimeSupports, truncate, $console, pickKeys } from "bknd/utils";
 import type { AuthStrategy } from "./strategies/Strategy";

 type Input = any; // workaround
@@ -229,7 +227,7 @@ export class Authenticator<

   // @todo: add jwt tests
   async jwt(_user: SafeUser | ProfileExchange): Promise<string> {
-      const user = pick(_user, this.config.jwt.fields);
+      const user = pickKeys(_user, this.config.jwt.fields as any);

      const payload: JWTPayload = {
         ...user,
@@ -255,7 +253,7 @@ export class Authenticator<
   }

   async safeAuthResponse(_user: User): Promise<AuthResponse> {
-      const user = pick(_user, this.config.jwt.fields) as SafeUser;
+      const user = pickKeys(_user, this.config.jwt.fields as any) as SafeUser;
      return {
         user,
         token: await this.jwt(user),
--- a/app/src/auth/authorize/Guard.ts
+++ b/app/src/auth/authorize/Guard.ts
@@ -125,7 +125,7 @@ export class Guard {
      return this.config?.enabled === true;
   }

-   private collect(permission: Permission, c: GuardContext, context: any) {
+   private collect(permission: Permission, c: GuardContext | undefined, context: any) {
      const user = c && "get" in c ? c.get("auth")?.user : c;
      const ctx = {
         ...((context ?? {}) as any),
@@ -181,15 +181,15 @@ export class Guard {
      }

      if (!role) {
-         $console.debug("guard: user has no role, denying");
         throw new GuardPermissionsException(permission, undefined, "User has no role");
-      } else if (role.implicit_allow === true) {
-         $console.debug(`guard: role "${role.name}" has implicit allow, allowing`);
-         return;
      }

      if (!rolePermission) {
-         $console.debug("guard: rolePermission not found, denying");
+         if (role.implicit_allow === true) {
+            $console.debug(`guard: role "${role.name}" has implicit allow, allowing`);
+            return;
+         }
+
         throw new GuardPermissionsException(
            permission,
            undefined,
--- a/app/src/modules/ModuleHelper.ts
+++ b/app/src/modules/ModuleHelper.ts
@@ -137,6 +137,6 @@ export class ModuleHelper {
      }

      const user = await auth.authenticator?.resolveAuthFromRequest(c.raw as any);
-      this.ctx.guard.granted(permission, { user }, context as any);
+      this.ctx.guard.granted(permission, user as any, context as any);
   }
 }
--- a/app/src/modules/SystemApi.ts
+++ b/app/src/modules/SystemApi.ts
@@ -1,6 +1,7 @@
 import type { ConfigUpdateResponse } from "modules/server/SystemController";
 import { ModuleApi } from "./ModuleApi";
 import type { ModuleConfigs, ModuleKey, ModuleSchemas } from "./ModuleManager";
+import type { TPermission } from "auth/authorize/Permission";

 export type ApiSchemaResponse = {
   version: number;
@@ -54,4 +55,8 @@ export class SystemApi extends ModuleApi<any> {
   removeConfig<Module extends ModuleKey>(module: Module, path: string) {
      return this.delete<ConfigUpdateResponse>(["config", "remove", module, path]);
   }
+
+   permissions() {
+      return this.get<{ permissions: TPermission[]; context: object }>("permissions");
+   }
 }
--- a/app/src/modules/server/SystemController.ts
+++ b/app/src/modules/server/SystemController.ts
@@ -69,10 +69,13 @@ export class SystemController extends Controller {
      if (!config.mcp.enabled) {
         return;
      }
+      const { permission } = this.middlewares;

      this.registerMcp();

-      app.server.use(
+      app.server.all(
+         config.mcp.path,
+         permission(SystemPermissions.mcp, {}),
         mcpMiddleware({
            setup: async () => {
               if (!this._mcpServer) {
@@ -110,7 +113,6 @@ export class SystemController extends Controller {
               explainEndpoint: true,
            },
            endpoint: {
-               path: config.mcp.path as any,
               // @ts-ignore
               _init: isNode() ? { duplex: "half" } : {},
            },
@@ -415,7 +417,6 @@ export class SystemController extends Controller {
               schema,
               config: config ? this.app.toJSON(secrets) : undefined,
               permissions: this.app.modules.ctx().guard.getPermissions(),
-               //permissions: this.app.modules.ctx().guard.getPermissionNames(),
            });
         },
      );
@@ -428,7 +429,7 @@ export class SystemController extends Controller {
         }),
         (c) => {
            const permissions = this.app.modules.ctx().guard.getPermissions();
-            return c.json({ permissions });
+            return c.json({ permissions, context: this.app.module.auth.getGuardContextSchema() });
         },
      );

--- a/app/src/ui/client/api/use-api.ts
+++ b/app/src/ui/client/api/use-api.ts
@@ -1,6 +1,6 @@
 import type { Api } from "Api";
 import { FetchPromise, type ModuleApi, type ResponseObject } from "modules/ModuleApi";
-import useSWR, { type SWRConfiguration, useSWRConfig } from "swr";
+import useSWR, { type SWRConfiguration, useSWRConfig, type Middleware, type SWRHook } from "swr";
 import useSWRInfinite from "swr/infinite";
 import { useApi } from "ui/client";
 import { useState } from "react";
@@ -89,3 +89,25 @@ export const useInvalidate = (options?: { exact?: boolean }) => {
      return mutate((k) => typeof k === "string" && k.startsWith(key));
   };
 };
+
+const mountOnceCache = new Map<string, any>();
+
+/**
+ * Simple middleware to only load on first mount.
+ */
+export const mountOnce: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
+   if (typeof key === "string") {
+      if (mountOnceCache.has(key)) {
+         return useSWRNext(key, fetcher, {
+            ...config,
+            revalidateOnMount: false,
+         });
+      }
+      const swr = useSWRNext(key, fetcher, config);
+      if (swr.data) {
+         mountOnceCache.set(key, true);
+      }
+      return swr;
+   }
+   return useSWRNext(key, fetcher, config);
+};
--- a/app/src/ui/components/buttons/Button.tsx
+++ b/app/src/ui/components/buttons/Button.tsx
@@ -5,13 +5,15 @@ import { twMerge } from "tailwind-merge";
 import { Link } from "ui/components/wouter/Link";

 const sizes = {
+   smaller: "px-1.5 py-1 rounded-md gap-1 !text-xs",
   small: "px-2 py-1.5 rounded-md gap-1 text-sm",
   default: "px-3 py-2.5 rounded-md gap-1.5",
   large: "px-4 py-3 rounded-md gap-2.5 text-lg",
 };

 const iconSizes = {
-   small: 12,
+   smaller: 12,
+   small: 14,
   default: 16,
   large: 20,
 };
--- a/app/src/ui/components/code/CodePreview.tsx
+++ b/app/src/ui/components/code/CodePreview.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "ui/client/use-theme";
+import { cn } from "ui/lib/utils";
+
+export type CodePreviewProps = {
+   code: string;
+   className?: string;
+   lang?: string;
+   theme?: string;
+   enabled?: boolean;
+};
+
+export const CodePreview = ({
+   code,
+   className,
+   lang = "typescript",
+   theme: _theme,
+   enabled = true,
+}: CodePreviewProps) => {
+   const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
+   const $theme = useTheme();
+   const theme = (_theme ?? $theme.theme === "dark") ? "github-dark" : "github-light";
+
+   useEffect(() => {
+      if (!enabled) return;
+
+      let cancelled = false;
+      setHighlightedHtml(null);
+
+      async function highlightCode() {
+         try {
+            // Dynamically import Shiki from CDN
+            // @ts-expect-error - Dynamic CDN import
+            const { codeToHtml } = await import("https://esm.sh/shiki@3.13.0");
+
+            if (cancelled) return;
+
+            const html = await codeToHtml(code, {
+               lang,
+               theme,
+               structure: "inline",
+            });
+
+            if (cancelled) return;
+
+            setHighlightedHtml(html);
+         } catch (error) {
+            console.error("Failed to load Shiki:", error);
+            // Fallback to plain text if Shiki fails to load
+            if (!cancelled) {
+               setHighlightedHtml(code);
+            }
+         }
+      }
+
+      highlightCode();
+
+      return () => {
+         cancelled = true;
+      };
+   }, [code, enabled]);
+
+   if (!highlightedHtml) {
+      return <pre className={cn("select-text cursor-text", className)}>{code}</pre>;
+   }
+
+   return (
+      <pre
+         className={cn("select-text cursor-text", className)}
+         dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+      />
+   );
+};
--- a/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
+++ b/app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
@@ -1,4 +1,4 @@
-import { IconBug } from "@tabler/icons-react";
+import { IconBug, IconInfoCircle } from "@tabler/icons-react";
 import type { JsonSchema } from "json-schema-library";
 import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
 import { IconButton } from "ui/components/buttons/IconButton";
@@ -12,6 +12,7 @@ import {
 import { Popover } from "ui/components/overlay/Popover";
 import { getLabel } from "./utils";
 import { twMerge } from "tailwind-merge";
+import { Tooltip } from "@mantine/core";

 export type FieldwrapperProps = {
   name: string;
@@ -24,7 +25,7 @@ export type FieldwrapperProps = {
   children: ReactElement | ReactNode;
   errorPlacement?: "top" | "bottom";
   description?: string;
-   descriptionPlacement?: "top" | "bottom";
+   descriptionPlacement?: "top" | "bottom" | "label";
   fieldId?: string;
   className?: string;
 };
@@ -53,11 +54,17 @@ export function FieldWrapper({
      <Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
   );

-   const Description = description && (
-      <Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
-         {description}
-      </Formy.Help>
-   );
+   const Description = description ? (
+      ["top", "bottom"].includes(descriptionPlacement) ? (
+         <Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
+            {description}
+         </Formy.Help>
+      ) : (
+         <Tooltip label={description}>
+            <IconInfoCircle className="size-4 opacity-50" />
+         </Tooltip>
+      )
+   ) : null;

   return (
      <Formy.Group
@@ -72,9 +79,10 @@ export function FieldWrapper({
            <Formy.Label
               as={wrapper === "fieldset" ? "legend" : "label"}
               htmlFor={fieldId}
-               className="self-start"
+               className="self-start flex flex-row gap-1 items-center"
            >
               {label} {required && <span className="font-medium opacity-30">*</span>}
+               {descriptionPlacement === "label" && Description}
            </Formy.Label>
         )}
         {descriptionPlacement === "top" && Description}
--- a/app/src/ui/routes/auth/auth.roles.edit.$role.tsx
+++ b/app/src/ui/routes/auth/auth.roles.edit.$role.tsx
@@ -7,34 +7,36 @@ import { useNavigate } from "ui/lib/routes";
 import { isDebug } from "core/env";
 import { Dropdown } from "ui/components/overlay/Dropdown";
 import { IconButton } from "ui/components/buttons/IconButton";
-import { TbAdjustments, TbDots, TbFilter, TbTrash } from "react-icons/tb";
+import { TbAdjustments, TbDots, TbFilter, TbTrash, TbInfoCircle, TbCodeDots } from "react-icons/tb";
 import { Button } from "ui/components/buttons/Button";
 import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
 import { routes } from "ui/lib/routes";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
 import * as Formy from "ui/components/form/Formy";
-
-import { ucFirst, type s } from "bknd/utils";
+import { ucFirst, s, transformObject, isObject } from "bknd/utils";
 import type { ModuleSchemas } from "bknd";
 import {
-   ArrayField,
   CustomField,
   Field,
   FieldWrapper,
   Form,
   FormContextOverride,
   FormDebug,
-   ObjectField,
+   ObjectJsonField,
   Subscribe,
   useDerivedFieldContext,
   useFormContext,
+   useFormError,
   useFormValue,
 } from "ui/components/form/json-schema-form";
 import type { TPermission } from "auth/authorize/Permission";
 import type { RoleSchema } from "auth/authorize/Role";
-import { Indicator, SegmentedControl, Tooltip } from "@mantine/core";
+import { SegmentedControl, Tooltip } from "@mantine/core";
+import { Popover } from "ui/components/overlay/Popover";
 import { cn } from "ui/lib/utils";
-import type { PolicySchema } from "auth/authorize/Policy";
+import { JsonViewer } from "ui/components/code/JsonViewer";
+import { mountOnce, useApiQuery } from "ui/client";
+import { CodePreview } from "ui/components/code/CodePreview";

 export function AuthRolesEdit(props) {
   useBrowserTitle(["Auth", "Roles", props.params.role]);
@@ -67,7 +69,7 @@ const formConfig = {
   },
 };

-function AuthRolesEditInternal({ params }) {
+function AuthRolesEditInternal({ params }: { params: { role: string } }) {
   const [navigate] = useNavigate();
   const { config, schema: authSchema, actions } = useBkndAuth();
   const roleName = params.role;
@@ -225,11 +227,10 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
      if (!Array.isArray(v)) return undefined;
      return v.find((v) => v && v.permission === permission.name);
   });
-   const { setValue, deleteValue } = useFormContext();
+   const { setValue } = useFormContext();
   const [open, setOpen] = useState(false);
   const data = value as PermissionData | undefined;
   const policiesCount = data?.policies?.length ?? 0;
-   const hasContext = !!permission.context;

   async function handleSwitch() {
      if (data) {
@@ -270,9 +271,9 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
                     <IconButton
                        size="md"
                        variant="ghost"
-                        disabled={!data || !hasContext}
+                        disabled={!data}
                        Icon={TbAdjustments}
-                        className={cn("disabled:opacity-20", !hasContext && "!opacity-0")}
+                        className={cn("disabled:opacity-20")}
                        onClick={() => setOpen((o) => !o)}
                     />
                  </div>
@@ -282,14 +283,6 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
            {open && (
               <div className="px-3.5 py-3.5">
                  <Policies path={`permissions.${index}.policies`} permission={permission} />
-                  {/* <ArrayField
-                     path={`permissions.${index}.policies`}
-                     labelAdd="Add Policy"
-                     wrapperProps={{
-                        label: false,
-                        wrapper: "group",
-                     }}
-                  /> */}
               </div>
            )}
         </div>
@@ -337,19 +330,68 @@ const Policies = ({ path, permission }: { path: string; permission: TPermission
   );
 };

+const mergeSchemas = (...schemas: object[]) => {
+   const schema = s.allOf(schemas.filter(Boolean).map(s.fromSchema));
+   return s.toTypes(schema, "Context");
+};
+
+function replaceEntitiesEnum(schema: Record<string, any>, entities: string[]) {
+   if (!isObject(schema) || !Array.isArray(entities) || entities.length === 0) return schema;
+   return transformObject(schema, (sub, name) => {
+      if (name === "properties") {
+         return transformObject(sub as Record<string, any>, (propConfig, propKey) => {
+            if (propKey === "entity" && propConfig.type === "string") {
+               return {
+                  ...propConfig,
+                  enum: entities,
+               };
+            }
+            return propConfig;
+         });
+      }
+      return sub;
+   });
+}
+
 const Policy = ({
   permission,
 }: {
   permission: TPermission;
 }) => {
   const { value } = useFormValue("");
+   const $bknd = useBknd();
+   const $permissions = useApiQuery((api) => api.system.permissions(), {
+      use: [mountOnce],
+   });
+   const entities = Object.keys($bknd.config.data.entities ?? {});
+   const ctx = $permissions.data
+      ? mergeSchemas(
+           $permissions.data.context,
+           replaceEntitiesEnum(permission.context ?? null, entities),
+        )
+      : undefined;
+
   return (
      <div className="flex flex-col gap-2">
         <Field name="description" />
-         <ObjectField path="condition" wrapperProps={{ wrapper: "group" }} />
+
+         <CustomFieldWrapper
+            name="condition"
+            label="Condition"
+            description="The condition that must be met for the policy to be applied."
+            schema={ctx}
+         >
+            <ObjectJsonField path="condition" />
+         </CustomFieldWrapper>
+
         <CustomField path="effect">
            {({ value, setValue }) => (
-               <FieldWrapper name="effect" label="Effect">
+               <FieldWrapper
+                  name="effect"
+                  label="Effect"
+                  descriptionPlacement="label"
+                  description="The effect of the policy to take effect on met condition."
+               >
                  <SegmentedControl
                     className="border border-muted"
                     defaultValue={value}
@@ -368,8 +410,72 @@ const Policy = ({
         </CustomField>

         {value?.effect === "filter" && (
-            <ObjectField path="filter" wrapperProps={{ wrapper: "group" }} />
+            <CustomFieldWrapper
+               name="filter"
+               label="Filter"
+               description="Filter to apply to all queries on met condition."
+               schema={ctx}
+            >
+               <ObjectJsonField path="filter" />
+            </CustomFieldWrapper>
         )}
      </div>
   );
 };
+
+const CustomFieldWrapper = ({ children, name, label, description, schema }: any) => {
+   const errors = useFormError(name, { strict: true });
+   const Errors = errors.length > 0 && (
+      <Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
+   );
+
+   return (
+      <Formy.Group as="div">
+         <Formy.Label
+            as="label"
+            htmlFor={name}
+            className="flex flex-row gap-1 justify-between items-center"
+         >
+            <div className="flex flex-row gap-1 items-center">
+               {label}
+               {description && (
+                  <Tooltip label={description}>
+                     <TbInfoCircle className="size-4 opacity-50" />
+                  </Tooltip>
+               )}
+            </div>
+            {schema && (
+               <div>
+                  <Popover
+                     overlayProps={{
+                        className: "max-w-none",
+                     }}
+                     position="bottom-end"
+                     target={() =>
+                        typeof schema === "object" ? (
+                           <JsonViewer
+                              className="w-auto max-w-120 bg-background pr-3 text-sm"
+                              json={schema}
+                              expand={5}
+                           />
+                        ) : (
+                           <CodePreview
+                              code={schema}
+                              lang="typescript"
+                              className="w-auto max-w-120 bg-background p-3 text-sm"
+                           />
+                        )
+                     }
+                  >
+                     <Button variant="ghost" size="smaller" IconLeft={TbCodeDots}>
+                        Context
+                     </Button>
+                  </Popover>
+               </div>
+            )}
+         </Formy.Label>
+         {children}
+         {Errors}
+      </Formy.Group>
+   );
+};
--- a/app/src/ui/routes/tools/mcp/mcp.tsx
+++ b/app/src/ui/routes/tools/mcp/mcp.tsx
@@ -39,7 +39,7 @@ export default function ToolsMcp() {
               <div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
                  <TbWorld />
                  <div className="min-w-0 flex-1">
-                     <span className="block truncate text-sm font-mono leading-none">
+                     <span className="block truncate text-sm font-mono leading-none select-text">
                        {window.location.origin + mcpPath}
                     </span>
                  </div>
--- a/app/src/ui/routes/tools/mcp/tools.tsx
+++ b/app/src/ui/routes/tools/mcp/tools.tsx
@@ -12,6 +12,7 @@ import * as Formy from "ui/components/form/Formy";
 import { appShellStore } from "ui/store";
 import { Icon } from "ui/components/display/Icon";
 import { useMcpClient } from "./hooks/use-mcp-client";
+import { Tooltip } from "@mantine/core";

 export function Sidebar({ open, toggle }) {
   const client = useMcpClient();
@@ -48,7 +49,11 @@ export function Sidebar({ open, toggle }) {
         toggle={toggle}
         renderHeaderRight={() => (
            <div className="flex flex-row gap-2 items-center">
-               {error && <Icon.Err title={error} className="size-5 pointer-events-auto" />}
+               {error && (
+                  <Tooltip label={error}>
+                     <Icon.Err className="size-5 pointer-events-auto" />
+                  </Tooltip>
+               )}
               <span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
                  {tools.length}
               </span>