diff --git a/README.md b/README.md index fff4dae..98e56b2 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 using the input field in the sidebar. ### Security Considerations diff --git a/client/src/App.tsx b/client/src/App.tsx index 04be204..5964bd8 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -117,6 +117,10 @@ const App = () => { return localStorage.getItem("lastBearerToken") || ""; }); + const [headerName, setHeaderName] = useState(() => { + return localStorage.getItem("lastHeaderName") || ""; + }); + const [pendingSampleRequests, setPendingSampleRequests] = useState< Array< PendingRequest & { @@ -169,6 +173,7 @@ const App = () => { sseUrl, env, bearerToken, + headerName, config, onNotification: (notification) => { setNotifications((prev) => [...prev, notification as ServerNotification]); @@ -208,6 +213,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]); @@ -500,6 +509,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 efc054a..c736558 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[]; @@ -76,6 +78,8 @@ const Sidebar = ({ setEnv, bearerToken, setBearerToken, + headerName, + setHeaderName, onConnect, onDisconnect, stdErrNotifications, @@ -176,6 +180,7 @@ const Sidebar = ({ variant="outline" onClick={() => setShowBearerToken(!showBearerToken)} className="flex items-center w-full" + data-testid="auth-button" aria-expanded={showBearerToken} > {showBearerToken ? ( @@ -187,6 +192,16 @@ const Sidebar = ({ {showBearerToken && (
+ + + setHeaderName && setHeaderName(e.target.value) + } + data-testid="header-input" + className="font-mono" + value={headerName} + />