@adminforth/mcp 1.0.2 → 1.0.3

package/README.md

@@ -4,6 +4,11 @@
 
 The server identifies itself to agents using the configured AdminForth `brandName`. An optional `adminPanelOrigin` can distinguish deployments further; the plugin combines it with the AdminForth `baseUrl`.
 
+> **Security:** an MCP auth secret carries the full permissions of the user who created it. An agent
+> holding it can do everything that user can do in the admin panel, including destructive actions and
+> changes to that user's security settings. Issue one secret per agent, treat it like a password, and
+> revoke it as soon as the agent or its machine is compromised.
+
 Install with:
 
 ```bash

package/dist/authSecretStore.d.ts

@@ -19,7 +19,7 @@ export declare class McpAuthSecretStore {
         name: any;
         createdAt: any;
         lastUsedAt: any;
-        lastUsedByAgent: any;
+        lastUsedByAgent: McpClientInfo | null;
     }[]>;
     create(name: string, adminUser: AdminUser, extra: HttpExtra): Promise<{
         error: string;

package/dist/authSecretStore.js

@@ -5,6 +5,25 @@ const SECRET_PREFIX = 'afmcp_';
 function hashSecret(secret) {
     return createHash('sha256').update(secret).digest('hex');
 }
+/**
+ * Stored agent info originates from the MCP client, so it is never trusted to be valid JSON:
+ * a database column which truncated an oversized value would otherwise break every next
+ * request made with the auth secret, including the page used to revoke it.
+ */
+function parseStoredClient(value) {
+    if (typeof value !== 'string' || !value)
+        return null;
+    let parsed;
+    try {
+        parsed = JSON.parse(value);
+    }
+    catch {
+        return null;
+    }
+    if (!parsed || typeof parsed !== 'object' || typeof parsed.client !== 'string')
+        return null;
+    return { client: parsed.client, ver: typeof parsed.ver === 'string' ? parsed.ver : null };
+}
 export class McpAuthSecretStore {
     adminforth;
     options;
@@ -22,9 +41,7 @@ export class McpAuthSecretStore {
             name: record[fields.nameField],
             createdAt: record[fields.createdAtField],
             lastUsedAt: record[fields.lastUsedAtField] ?? null,
-            lastUsedByAgent: record[fields.lastUsedByAgentField]
-                ? JSON.parse(record[fields.lastUsedByAgentField])
-                : null,
+            lastUsedByAgent: parseStoredClient(record[fields.lastUsedByAgentField]),
         }));
     }
     async create(name, adminUser, extra) {
@@ -76,9 +93,7 @@ export class McpAuthSecretStore {
                 username: dbUser[auth.usernameField],
                 dbUser,
             },
-            client: record[fields.lastUsedByAgentField]
-                ? JSON.parse(record[fields.lastUsedByAgentField])
-                : null,
+            client: parseStoredClient(record[fields.lastUsedByAgentField]),
             name: record[fields.nameField],
             recordId: record[fields.idField],
         };

package/dist/clientInfo.js

@@ -1,22 +1,39 @@
 const CLIENT_INFO_META_KEY = 'io.modelcontextprotocol/clientInfo';
 const NON_CLIENT_NAME_CHARACTER_RE = /[^a-z0-9]+/g;
 const EDGE_HYPHEN_RE = /^-+|-+$/g;
+const NON_CLIENT_VERSION_CHARACTER_RE = /[^A-Za-z0-9._-]+/g;
 const USER_AGENT_PRODUCT_RE = /^([^/\s]+)(?:\/(\S+))?/;
+// Client name and version are attacker-controlled: they are persisted as JSON and rendered into
+// the audit "executed by" string, so they are sanitized and capped here, at the single entry point.
+const MAX_CLIENT_NAME_LENGTH = 64;
+const MAX_CLIENT_VERSION_LENGTH = 32;
 export const UNKNOWN_CLIENT = 'unknown-agent';
 function normalizeClientName(name) {
-    return name.toLowerCase().replace(NON_CLIENT_NAME_CHARACTER_RE, '-').replace(EDGE_HYPHEN_RE, '');
+    if (typeof name !== 'string')
+        return '';
+    return name
+        .toLowerCase()
+        .replace(NON_CLIENT_NAME_CHARACTER_RE, '-')
+        .slice(0, MAX_CLIENT_NAME_LENGTH)
+        .replace(EDGE_HYPHEN_RE, '');
+}
+function normalizeClientVersion(version) {
+    if (typeof version !== 'string')
+        return null;
+    return version
+        .replace(NON_CLIENT_VERSION_CHARACTER_RE, '')
+        .slice(0, MAX_CLIENT_VERSION_LENGTH) || null;
 }
 function parseUserAgent(userAgent) {
     const [, name, version] = userAgent.match(USER_AGENT_PRODUCT_RE) ?? [];
-    return name ? { client: normalizeClientName(name), ver: version ?? null } : null;
+    const client = normalizeClientName(name);
+    return client ? { client, ver: normalizeClientVersion(version) } : null;
 }
 export function readMcpClient(body, headers) {
     const clientInfo = body.params?._meta?.[CLIENT_INFO_META_KEY] ?? (body.method === 'initialize' ? body.params?.clientInfo : undefined);
-    if (clientInfo?.name) {
-        return {
-            client: normalizeClientName(clientInfo.name),
-            ver: clientInfo.version ?? null,
-        };
+    const client = normalizeClientName(clientInfo?.name);
+    if (client) {
+        return { client, ver: normalizeClientVersion(clientInfo.version) };
     }
     return parseUserAgent(String(headers['user-agent'] ?? '')) ?? {
         client: UNKNOWN_CLIENT,

package/dist/custom/McpSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col justify-center mr-6 md:mr-12">
+  <div class="af-mcp-settings flex flex-col justify-center mr-6 md:mr-12">
     <div class="flex flex-wrap items-start justify-between gap-4">
       <div>
         <h2 class="text-3xl font-semibold leading-none text-gray-800 dark:text-gray-50">
@@ -9,113 +9,94 @@
           {{ $t('Create a separate auth secret for each AI agent. Secrets are shown only once.') }}
         </p>
       </div>
-      <button
-        type="button"
-        class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700"
-        @click="openCreateDialog"
-      >
+      <Button @click="openCreateDialog">
         {{ $t('Create auth secret') }}
-      </button>
+      </Button>
     </div>
 
-    <div class="mt-6 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
+    <div class="mt-6 rounded-default border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
       <p class="text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('MCP server URL') }}</p>
       <div class="mt-2 flex items-center gap-2">
         <code class="min-w-0 flex-1 overflow-x-auto rounded bg-white px-3 py-2 text-sm text-gray-800 dark:bg-gray-900 dark:text-gray-100">{{ mcpUrl }}</code>
-        <button class="text-sm font-medium text-blue-700 dark:text-blue-400" @click="copy(mcpUrl)">
+        <Button variant="secondary" @click="copy(mcpUrl, $t('MCP server URL copied'))">
           {{ $t('Copy') }}
-        </button>
+        </Button>
       </div>
       <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">
         <code>Authorization: Bearer &lt;secret&gt;</code>
       </p>
     </div>
 
-    <div v-if="authSecrets.length" class="mt-6 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead class="bg-gray-50 dark:bg-gray-800">
-          <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Name') }}</th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Last used by') }}</th>
-            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Last usage') }}</th>
-            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Actions') }}</th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
-          <tr v-for="authSecret in authSecrets" :key="authSecret.id">
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 dark:text-white">{{ authSecret.name }}</p>
-              <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ formatDate(authSecret.createdAt) }}</p>
-            </td>
-            <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-200">
-              <div v-if="authSecret.lastUsedByAgent" class="flex items-center gap-2">
-                <img v-if="describeAgent(authSecret.lastUsedByAgent).icon" :src="describeAgent(authSecret.lastUsedByAgent).icon" class="h-5 w-5" alt="" />
-                <span>{{ describeAgent(authSecret.lastUsedByAgent).label }}</span>
-              </div>
-              <span v-else class="text-gray-400">{{ $t('Not used yet') }}</span>
-            </td>
-            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
-              {{ authSecret.lastUsedAt ? formatDate(authSecret.lastUsedAt) : $t('Never') }}
-            </td>
-            <td class="px-4 py-3 text-right">
-              <button
-                type="button"
-                class="rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50 dark:border-red-700 dark:text-red-300 dark:hover:bg-red-950"
-                :disabled="revokingId === authSecret.id"
-                @click="revoke(authSecret)"
-              >
-                {{ revokingId === authSecret.id ? $t('Revoking') : $t('Revoke') }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <p v-else-if="!loading" class="mt-6 text-sm text-gray-500 dark:text-gray-400">
-      {{ $t('No MCP auth secrets yet.') }}
-    </p>
-
-    <div v-if="dialogOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-      <div class="w-full max-w-xl rounded-xl bg-white p-6 shadow-xl dark:bg-gray-800">
-        <template v-if="!createdSecret">
-          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $t('Create MCP auth secret') }}</h3>
-          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ $t('Use one auth secret for one agent.') }}</p>
-          <label class="mt-5 block text-sm font-medium text-gray-700 dark:text-gray-200">{{ $t('Secret name') }}</label>
-          <input
-            v-model="secretName"
-            class="mt-2 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-            placeholder="Claude Code"
-            @keydown.enter="createAuthSecret"
-          />
-          <div class="mt-6 flex justify-end gap-3">
-            <button class="px-4 py-2 text-sm text-gray-600 dark:text-gray-300" @click="closeDialog">{{ $t('Cancel') }}</button>
-            <button
-              class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white disabled:opacity-50 dark:bg-blue-600"
-              :disabled="creating || !secretName.trim()"
-              @click="createAuthSecret"
-            >
-              {{ creating ? $t('Creating') : $t('Create') }}
-            </button>
-          </div>
-        </template>
-        <template v-else>
-          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $t('Auth secret created') }}</h3>
-          <p class="mt-2 text-sm text-amber-700 dark:text-amber-300">{{ $t('Copy it now. You will not be able to view it again.') }}</p>
-          <code class="mt-4 block overflow-x-auto rounded-lg bg-gray-100 p-3 text-sm text-gray-900 dark:bg-gray-900 dark:text-gray-100">{{ createdSecret }}</code>
-          <p class="mt-5 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Prompt for your agent') }}</p>
-          <pre class="mt-2 whitespace-pre-wrap rounded-lg bg-gray-100 p-3 text-sm text-gray-800 dark:bg-gray-900 dark:text-gray-100">{{ setupPrompt }}</pre>
-          <div class="mt-6 flex justify-end gap-3">
-            <button class="text-sm font-medium text-blue-700 dark:text-blue-400" @click="copy(setupPrompt)">{{ $t('Copy prompt') }}</button>
-            <button class="rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white dark:bg-blue-600" @click="closeDialog">{{ $t('Done') }}</button>
-          </div>
-        </template>
+    <Table
+      class="mt-6"
+      :columns="columns"
+      :data="authSecrets"
+      :isLoading="loading"
+      :pageSize="10"
+    >
+      <template #cell:name="{ item }">
+        <p class="font-medium text-gray-900 dark:text-white">{{ item.name }}</p>
+        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ formatDate(item.createdAt) }}</p>
+      </template>
+
+      <template #cell:lastUsedByAgent="{ item }">
+        <div v-if="item.lastUsedByAgent" class="flex items-center gap-2">
+          <img v-if="describeAgent(item.lastUsedByAgent).icon" :src="describeAgent(item.lastUsedByAgent).icon" class="h-5 w-5" alt="" />
+          <span>{{ describeAgent(item.lastUsedByAgent).label }}</span>
+        </div>
+        <span v-else class="text-gray-400">{{ $t('Not used yet') }}</span>
+      </template>
+
+      <template #cell:lastUsedAt="{ item }">
+        {{ item.lastUsedAt ? formatDate(item.lastUsedAt) : $t('Never') }}
+      </template>
+
+      <template #cell:actions="{ item }">
+        <div class="flex justify-end">
+          <Button
+            variant="danger"
+            :loader="revokingId === item.id"
+            :disabled="revokingId === item.id"
+            @click="revoke(item)"
+          >
+            {{ revokingId === item.id ? $t('Revoking') : $t('Revoke') }}
+          </Button>
+        </div>
+      </template>
+    </Table>
+
+    <Dialog
+      ref="dialogRef"
+      class="w-full max-w-xl"
+      :header="createdSecret ? $t('Auth secret created') : $t('Create MCP auth secret')"
+      :buttons="dialogButtons"
+    >
+      <!-- enter is handled on the wrapper so it fires once: Input spreads attrs on both its root and the input -->
+      <div v-if="!createdSecret" @keydown.enter="createAuthSecret">
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('Use one auth secret for one agent.') }}</p>
+        <label class="mt-5 block text-sm font-medium text-gray-700 dark:text-gray-200">{{ $t('Secret name') }}</label>
+        <div class="mt-2">
+          <Input v-model="secretName" type="text" fullWidth placeholder="Claude Code" />
+        </div>
       </div>
-    </div>
+      <div v-else>
+        <p class="text-sm text-amber-700 dark:text-amber-300">{{ $t('Copy it now. You will not be able to view it again.') }}</p>
+        <p class="mt-3 rounded-default border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-200">
+          {{ $t('This secret lets an agent do everything you can do in the admin panel, including deleting data and changing your security settings. Keep it like a password, give it to one agent only, and revoke it if that agent or its device is compromised.') }}
+        </p>
+        <code class="mt-4 block overflow-x-auto rounded-default bg-gray-100 p-3 text-sm text-gray-900 dark:bg-gray-900 dark:text-gray-100">{{ createdSecret }}</code>
+        <p class="mt-5 text-xs font-medium uppercase text-gray-500 dark:text-gray-400">{{ $t('Prompt for your agent') }}</p>
+        <pre class="mt-2 whitespace-pre-wrap rounded-default bg-gray-100 p-3 text-sm text-gray-800 dark:bg-gray-900 dark:text-gray-100">{{ setupPrompt }}</pre>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button, Dialog, Input, Table } from '@/afcl';
+import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import claudeCodeIcon from './icons/claude-code.svg';
 import codexIcon from './icons/codex.svg';
@@ -130,14 +111,49 @@ type AuthSecret = {
   lastUsedByAgent: Agent | null;
 };
 
+const { t } = useI18n();
+
 const authSecrets = ref<AuthSecret[]>([]);
 const loading = ref(true);
-const dialogOpen = ref(false);
+const dialogRef = ref();
 const secretName = ref('');
 const createdSecret = ref('');
 const creating = ref(false);
 const revokingId = ref<string | null>(null);
 
+const columns = computed(() => [
+  { label: t('Name'), fieldName: 'name', sortable: true },
+  { label: t('Last used by'), fieldName: 'lastUsedByAgent' },
+  { label: t('Last usage'), fieldName: 'lastUsedAt', sortable: true },
+  { label: t('Actions'), fieldName: 'actions' },
+]);
+
+const dialogButtons = computed(() => createdSecret.value
+  ? [
+      {
+        label: t('Copy prompt'),
+        options: { variant: 'secondary' },
+        onclick: () => copy(setupPrompt.value, t('Prompt copied')),
+      },
+      {
+        label: t('Done'),
+        onclick: (dialog: { hide: () => void }) => dialog.hide(),
+      },
+    ]
+  : [
+      {
+        label: t('Cancel'),
+        options: { variant: 'secondary' },
+        onclick: (dialog: { hide: () => void }) => dialog.hide(),
+      },
+      {
+        label: creating.value ? t('Creating') : t('Create'),
+        options: { loader: creating.value, disabled: creating.value || !secretName.value.trim() },
+        onclick: () => createAuthSecret(),
+      },
+    ]
+);
+
 const mcpUrl = computed(() => {
   const baseUrl = (import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || '').replace(/\/$/, '');
   return `${window.location.origin}${baseUrl}/adminapi/v1/mcp`;
@@ -164,15 +180,11 @@ async function loadAuthSecrets() {
 function openCreateDialog() {
   secretName.value = '';
   createdSecret.value = '';
-  dialogOpen.value = true;
-}
-
-function closeDialog() {
-  dialogOpen.value = false;
-  createdSecret.value = '';
+  dialogRef.value?.open();
 }
 
 async function createAuthSecret() {
+  if (creating.value || !secretName.value.trim()) return;
   creating.value = true;
   try {
     const response = await callAdminForthApi({
@@ -190,7 +202,13 @@ async function createAuthSecret() {
 }
 
 async function revoke(authSecret: AuthSecret) {
-  if (!window.confirm(`Revoke MCP auth secret "${authSecret.name}"?`)) return;
+  const confirmed = await adminforth.confirm({
+    message: t('Revoke MCP auth secret "{name}"? Any agent using it will lose access.', { name: authSecret.name }),
+    yes: t('Revoke'),
+    no: t('Cancel'),
+    dangerous: true,
+  });
+  if (!confirmed) return;
   revokingId.value = authSecret.id;
   try {
     await callAdminForthApi({ method: 'DELETE', path: '/mcp/auth-secrets', body: { id: authSecret.id } });
@@ -224,7 +242,8 @@ function formatDate(value: string) {
   return new Date(value).toLocaleString();
 }
 
-async function copy(value: string) {
+async function copy(value: string, message: string) {
   await navigator.clipboard.writeText(value);
+  adminforth.alert({ message, variant: 'success' });
 }
 </script>

package/dist/index.js

@@ -5,6 +5,7 @@ import { createMcpServerPresentation, handleMcpProtocol, } from './mcpProtocol.j
 import { McpAuthSecretStore } from './authSecretStore.js';
 const BEARER_SECRET_RE = /^Bearer (afmcp_[A-Za-z0-9_-]+)$/i;
 const MCP_PATH = '/mcp';
+const CREDENTIAL_HEADERS = new Set(['authorization', 'proxy-authorization', 'cookie']);
 function requestExtra(input) {
     return {
         body: input.body,
@@ -15,6 +16,13 @@ function requestExtra(input) {
         response: input.response,
     };
 }
+/**
+ * The MCP auth secret is a long-lived credential, so it is dropped as soon as it is verified and
+ * never reaches tool handlers, which may log, persist or forward the headers they are given.
+ */
+function withoutCredentials(headers) {
+    return Object.fromEntries(Object.entries(headers).filter(([name]) => !CREDENTIAL_HEADERS.has(name.toLowerCase())));
+}
 function jsonRpcAuthError(id = null) {
     return {
         jsonrpc: '2.0',
@@ -146,7 +154,8 @@ export default class AdminForthMcpPlugin extends AdminForthPlugin {
             input.response.setStatus(403);
             return jsonRpcAuthError(input.body.id ?? null);
         }
-        const reportedClient = readMcpClient(input.body, input.headers);
+        const toolHeaders = withoutCredentials(input.headers);
+        const reportedClient = readMcpClient(input.body, toolHeaders);
         const client = reportedClient.client === UNKNOWN_CLIENT && authenticated.client
             ? authenticated.client
             : reportedClient;
@@ -158,13 +167,13 @@ export default class AdminForthMcpPlugin extends AdminForthPlugin {
         const protocolResponse = await handleMcpProtocol({
             ...this.serverPresentation,
             body: input.body,
-            headers: input.headers,
+            headers: toolHeaders,
             listTools: () => this.apiTools.list(),
             callTool: (name, arguments_) => this.apiTools.call({
                 name,
                 arguments: arguments_,
                 adminUser,
-                headers: input.headers,
+                headers: toolHeaders,
                 requestUrl: input.requestUrl,
                 abortSignal: input.abortSignal,
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/mcp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Expose AdminForth APIs as an authenticated MCP server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",