Merge pull request #859 from modelcontextprotocol/crondinini/support-client-secret

Add client secret option

Author: cliffhall

client/src/App.tsx

@@ -141,6 +141,10 @@ const App = () => {
     return localStorage.getItem("lastOauthScope") || "";
   });
 
+  const [oauthClientSecret, setOauthClientSecret] = useState<string>(() => {
+    return localStorage.getItem("lastOauthClientSecret") || "";
+  });
+
   // Custom headers state with migration from legacy auth
   const [customHeaders, setCustomHeaders] = useState<CustomHeaders>(() => {
     const savedHeaders = localStorage.getItem("lastCustomHeaders");
@@ -262,6 +266,7 @@ const App = () => {
     env,
     customHeaders,
     oauthClientId,
+    oauthClientSecret,
     oauthScope,
     config,
     connectionType,
@@ -394,6 +399,10 @@ const App = () => {
     localStorage.setItem("lastOauthScope", oauthScope);
   }, [oauthScope]);
 
+  useEffect(() => {
+    localStorage.setItem("lastOauthClientSecret", oauthClientSecret);
+  }, [oauthClientSecret]);
+
   useEffect(() => {
     saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
   }, [config]);
@@ -900,6 +909,8 @@ const App = () => {
           setCustomHeaders={setCustomHeaders}
           oauthClientId={oauthClientId}
           setOauthClientId={setOauthClientId}
+          oauthClientSecret={oauthClientSecret}
+          setOauthClientSecret={setOauthClientSecret}
           oauthScope={oauthScope}
           setOauthScope={setOauthScope}
           onConnect={connectMcpServer}

client/src/components/Sidebar.tsx

@@ -58,6 +58,8 @@ interface SidebarProps {
   setCustomHeaders: (headers: CustomHeadersType) => void;
   oauthClientId: string;
   setOauthClientId: (id: string) => void;
+  oauthClientSecret: string;
+  setOauthClientSecret: (secret: string) => void;
   oauthScope: string;
   setOauthScope: (scope: string) => void;
   onConnect: () => void;
@@ -87,6 +89,8 @@ const Sidebar = ({
   setCustomHeaders,
   oauthClientId,
   setOauthClientId,
+  oauthClientSecret,
+  setOauthClientSecret,
   oauthScope,
   setOauthScope,
   onConnect,
@@ -104,6 +108,7 @@ const Sidebar = ({
   const [showAuthConfig, setShowAuthConfig] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+  const [showClientSecret, setShowClientSecret] = useState(false);
   const [copiedServerEntry, setCopiedServerEntry] = useState(false);
   const [copiedServerFile, setCopiedServerFile] = useState(false);
   const { toast } = useToast();
@@ -555,6 +560,38 @@ const Sidebar = ({
                         data-testid="oauth-client-id-input"
                         className="font-mono"
                       />
+                      <label className="text-sm font-medium">
+                        Client Secret
+                      </label>
+                      <div className="flex gap-2">
+                        <Input
+                          type={showClientSecret ? "text" : "password"}
+                          placeholder="Client Secret (optional)"
+                          onChange={(e) => setOauthClientSecret(e.target.value)}
+                          value={oauthClientSecret}
+                          data-testid="oauth-client-secret-input"
+                          className="font-mono"
+                        />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => setShowClientSecret(!showClientSecret)}
+                          aria-label={
+                            showClientSecret ? "Hide secret" : "Show secret"
+                          }
+                          aria-pressed={showClientSecret}
+                          title={
+                            showClientSecret ? "Hide secret" : "Show secret"
+                          }
+                        >
+                          {showClientSecret ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
+                          )}
+                        </Button>
+                      </div>
                       <label className="text-sm font-medium">
                         Redirect URL
                       </label>

client/src/components/__tests__/Sidebar.test.tsx

@@ -44,6 +44,8 @@ describe("Sidebar", () => {
     setSseUrl: jest.fn(),
     oauthClientId: "",
     setOauthClientId: jest.fn(),
+    oauthClientSecret: "",
+    setOauthClientSecret: jest.fn(),
     oauthScope: "",
     setOauthScope: jest.fn(),
     env: {},

client/src/lib/hooks/useConnection.ts

@@ -67,6 +67,7 @@ interface UseConnectionOptions {
   // Custom headers support
   customHeaders?: CustomHeaders;
   oauthClientId?: string;
+  oauthClientSecret?: string;
   oauthScope?: string;
   config: InspectorConfig;
   connectionType?: "direct" | "proxy";
@@ -89,6 +90,7 @@ export function useConnection({
   env,
   customHeaders,
   oauthClientId,
+  oauthClientSecret,
   oauthScope,
   config,
   connectionType = "proxy",
@@ -125,12 +127,20 @@ export function useConnection({
       return;
     }
 
+    const clientInformation: { client_id: string; client_secret?: string } = {
+      client_id: oauthClientId,
+    };
+
+    if (oauthClientSecret) {
+      clientInformation.client_secret = oauthClientSecret;
+    }
+
     saveClientInformationToSessionStorage({
       serverUrl: sseUrl,
-      clientInformation: { client_id: oauthClientId },
+      clientInformation,
       isPreregistered: true,
     });
-  }, [oauthClientId, sseUrl]);
+  }, [oauthClientId, oauthClientSecret, sseUrl]);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [