set header name

Author: idosal

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
 

client/src/App.tsx

@@ -108,8 +108,13 @@ const App = () => {
   const [bearerToken, setBearerToken] = useState<string>(() => {
     return localStorage.getItem("lastBearerToken") || "";
   });
+  
+  const [headerName, setHeaderName] = useState<string>(() => {
+    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}

client/src/components/Sidebar.tsx

@@ -51,6 +51,8 @@ interface SidebarProps {
   setEnv: (env: Record<string, string>) => 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 = ({
                 </Button>
                 {showBearerToken && (
                   <div className="space-y-2">
+                    <label className="text-sm font-medium">Header Name</label>
+                    <Input
+                      placeholder="Authorization"
+                      defaultValue="Authorization"
+                      onChange={(e) => setHeaderName && setHeaderName(e.target.value)}
+                      className="font-mono"
+                      value={headerName}
+                    />
                     <label className="text-sm font-medium">Bearer Token</label>
                     <Input
                       placeholder="Bearer Token"

client/src/lib/hooks/useConnection.ts

@@ -41,6 +41,7 @@ interface UseConnectionOptions {
   env: Record<string, string>;
   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, {