diff --git a/README.md b/README.md index c43f943..7e27fbe 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ For more details on ways to use the inspector, see the [Inspector section of the ### Authentication -The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. +The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. You can override the header name. ### Security Considerations diff --git a/client/src/App.tsx b/client/src/App.tsx index 7564544..7f29a31 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -108,8 +108,13 @@ const App = () => { const [bearerToken, setBearerToken] = useState(() => { return localStorage.getItem("lastBearerToken") || ""; }); + + const [headerName, setHeaderName] = useState(() => { + return localStorage.getItem("lastHeaderName") || "Authorization"; + }); const [pendingSampleRequests, setPendingSampleRequests] = useState< + Array< PendingRequest & { resolve: (result: CreateMessageResult) => void; @@ -161,6 +166,7 @@ const App = () => { sseUrl, env, bearerToken, + headerName, proxyServerUrl: getMCPProxyAddress(config), requestTimeout: getMCPServerRequestTimeout(config), onNotification: (notification) => { @@ -201,6 +207,10 @@ const App = () => { localStorage.setItem("lastBearerToken", bearerToken); }, [bearerToken]); + useEffect(() => { + localStorage.setItem("lastHeaderName", headerName); + }, [headerName]); + useEffect(() => { localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config)); }, [config]); @@ -476,6 +486,8 @@ const App = () => { setConfig={setConfig} bearerToken={bearerToken} setBearerToken={setBearerToken} + headerName={headerName} + setHeaderName={setHeaderName} onConnect={connectMcpServer} onDisconnect={disconnectMcpServer} stdErrNotifications={stdErrNotifications} diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index 19f8020..64ffbda 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -51,6 +51,8 @@ interface SidebarProps { setEnv: (env: Record) => void; bearerToken: string; setBearerToken: (token: string) => void; + headerName?: string; + setHeaderName?: (name: string) => void; onConnect: () => void; onDisconnect: () => void; stdErrNotifications: StdErrNotification[]; @@ -75,6 +77,8 @@ const Sidebar = ({ setEnv, bearerToken, setBearerToken, + headerName, + setHeaderName, onConnect, onDisconnect, stdErrNotifications, @@ -167,6 +171,14 @@ const Sidebar = ({ {showBearerToken && (
+ + setHeaderName && setHeaderName(e.target.value)} + className="font-mono" + value={headerName} + /> ; proxyServerUrl: string; bearerToken?: string; + headerName?: string; requestTimeout?: number; onNotification?: (notification: Notification) => void; onStdErrNotification?: (notification: Notification) => void; @@ -64,6 +65,7 @@ export function useConnection({ env, proxyServerUrl, bearerToken, + headerName, requestTimeout, onNotification, onStdErrNotification, @@ -274,7 +276,8 @@ export function useConnection({ // Use manually provided bearer token if available, otherwise use OAuth tokens const token = bearerToken || (await authProvider.tokens())?.access_token; if (token) { - headers["Authorization"] = `Bearer ${token}`; + const authHeaderName = headerName || "Authorization"; + headers[authHeaderName] = `${token}`; } const clientTransport = new SSEClientTransport(mcpProxyServerUrl, {