diff --git a/client/src/App.tsx b/client/src/App.tsx index b7fc607b0..5937d7385 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -141,6 +141,10 @@ const App = () => { return localStorage.getItem("lastOauthScope") || ""; }); + const [oauthClientSecret, setOauthClientSecret] = useState(() => { + return localStorage.getItem("lastOauthClientSecret") || ""; + }); + // Custom headers state with migration from legacy auth const [customHeaders, setCustomHeaders] = useState(() => { 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} diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index 889380d8b..b369a967b 100644 --- a/client/src/components/Sidebar.tsx +++ b/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>(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" /> + +
+ setOauthClientSecret(e.target.value)} + value={oauthClientSecret} + data-testid="oauth-client-secret-input" + className="font-mono" + /> + +
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx index 4684eb63b..c1f395921 100644 --- a/client/src/components/__tests__/Sidebar.test.tsx +++ b/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: {}, diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts index 37073e9b7..8639feebc 100644 --- a/client/src/lib/hooks/useConnection.ts +++ b/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) => [