diff --git a/client/src/App.tsx b/client/src/App.tsx
index a2dc8f0ee..082a9ce61 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -128,6 +128,14 @@ const App = () => {
     return localStorage.getItem("lastHeaderName") || "";
   });
 
+  const [oauthClientId, setOauthClientId] = useState<string>(() => {
+    return localStorage.getItem("lastOauthClientId") || "";
+  });
+
+  const [oauthParams, setOauthParams] = useState<string>(() => {
+    return localStorage.getItem("lastOauthParams") || "";
+  });
+
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
       PendingRequest & {
@@ -181,6 +189,8 @@ const App = () => {
     env,
     bearerToken,
     headerName,
+    oauthClientId,
+    oauthParams,
     config,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification as ServerNotification]);
@@ -224,6 +234,14 @@ const App = () => {
     localStorage.setItem("lastHeaderName", headerName);
   }, [headerName]);
 
+  useEffect(() => {
+    localStorage.setItem("lastOauthClientId", oauthClientId);
+  }, [oauthClientId]);
+
+  useEffect(() => {
+    localStorage.setItem("lastOauthParams", oauthParams);
+  }, [oauthParams]);
+
   useEffect(() => {
     localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
   }, [config]);
@@ -502,6 +520,10 @@ const App = () => {
         setBearerToken={setBearerToken}
         headerName={headerName}
         setHeaderName={setHeaderName}
+        oauthClientId={oauthClientId}
+        setOauthClientId={setOauthClientId}
+        oauthParams={oauthParams}
+        setOauthParams={setOauthParams}
         onConnect={connectMcpServer}
         onDisconnect={disconnectMcpServer}
         stdErrNotifications={stdErrNotifications}
diff --git a/client/src/components/OAuthCallback.tsx b/client/src/components/OAuthCallback.tsx
index 6bfa8a3bc..9c19e6957 100644
--- a/client/src/components/OAuthCallback.tsx
+++ b/client/src/components/OAuthCallback.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useRef } from "react";
-import { InspectorOAuthClientProvider } from "../lib/auth";
+import {
+  InspectorOAuthClientProvider,
+  getAuthParamsFromSessionStorage,
+  getClientInformationFromSessionStorage,
+} from "../lib/auth";
 import { SESSION_KEYS } from "../lib/constants";
 import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
 import { useToast } from "@/hooks/use-toast.ts";
@@ -32,6 +36,9 @@ const OAuthCallback = ({ onConnect }: OAuthCallbackProps) => {
         });
 
       const params = parseOAuthCallbackParams(window.location.search);
+      // Extract state from query params
+      const urlParams = new URLSearchParams(window.location.search);
+      const returnedState = urlParams.get("state");
       if (!params.successful) {
         return notifyError(generateOAuthErrorDescription(params));
       }
@@ -41,10 +48,33 @@ const OAuthCallback = ({ onConnect }: OAuthCallbackProps) => {
         return notifyError("Missing Server URL");
       }
 
+      // Validate state parameter
+      const serverAuthProvider = new InspectorOAuthClientProvider(
+        serverUrl,
+        undefined,
+        undefined,
+      );
+      const expectedState = serverAuthProvider.getState();
+      serverAuthProvider.clearState(); // Always clear after checking
+      if (!returnedState || !expectedState || returnedState !== expectedState) {
+        return notifyError(
+          "Invalid or missing OAuth state parameter. Please try logging in again.",
+        );
+      }
+
+      const clientInformation =
+        await getClientInformationFromSessionStorage(serverUrl);
+
+      const authParams = getAuthParamsFromSessionStorage(serverUrl);
+
       let result;
       try {
         // Create an auth provider with the current server URL
-        const serverAuthProvider = new InspectorOAuthClientProvider(serverUrl);
+        const serverAuthProvider = new InspectorOAuthClientProvider(
+          serverUrl,
+          clientInformation,
+          authParams,
+        );
 
         result = await auth(serverAuthProvider, {
           serverUrl,
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index bc6af52f0..7a963f43f 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -36,6 +36,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip";
+import { Textarea } from "./ui/textarea";
 
 interface SidebarProps {
   connectionStatus: ConnectionStatus;
@@ -53,6 +54,10 @@ interface SidebarProps {
   setBearerToken: (token: string) => void;
   headerName?: string;
   setHeaderName?: (name: string) => void;
+  oauthClientId: string;
+  setOauthClientId: (id: string) => void;
+  oauthParams: string;
+  setOauthParams: (params: string) => void;
   onConnect: () => void;
   onDisconnect: () => void;
   stdErrNotifications: StdErrNotification[];
@@ -80,6 +85,10 @@ const Sidebar = ({
   setBearerToken,
   headerName,
   setHeaderName,
+  oauthClientId,
+  setOauthClientId,
+  oauthParams,
+  setOauthParams,
   onConnect,
   onDisconnect,
   stdErrNotifications,
@@ -95,6 +104,7 @@ const Sidebar = ({
   const [showBearerToken, setShowBearerToken] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+  const [showOauthConfig, setShowOauthConfig] = useState(false);
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -221,6 +231,52 @@ const Sidebar = ({
                   </div>
                 )}
               </div>
+              {/* OAuth Configuration */}
+              <div className="space-y-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowOauthConfig(!showOauthConfig)}
+                  className="flex items-center w-full"
+                  data-testid="oauth-config-button"
+                  aria-expanded={showOauthConfig}
+                >
+                  {showOauthConfig ? (
+                    <ChevronDown className="w-4 h-4 mr-2" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 mr-2" />
+                  )}
+                  OAuth Configuration
+                </Button>
+                {showOauthConfig && (
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Client ID</label>
+                    <Input
+                      placeholder="Client ID"
+                      onChange={(e) => setOauthClientId(e.target.value)}
+                      value={oauthClientId}
+                      data-testid="oauth-client-id-input"
+                      className="font-mono"
+                    />
+                    <label className="text-sm font-medium">
+                      Redirect URL (auto-populated)
+                    </label>
+                    <Input
+                      readOnly
+                      placeholder="Redirect URL"
+                      value={window.location.origin + "/oauth/callback"}
+                      className="font-mono"
+                    />
+                    <label className="text-sm font-medium">Auth Params</label>
+                    <Textarea
+                      placeholder="Auth Params (JSON)"
+                      onChange={(e) => setOauthParams(e.target.value)}
+                      value={oauthParams}
+                      data-testid="oauth-params-input"
+                      className="font-mono min-h-40"
+                    />
+                  </div>
+                )}
+              </div>
             </>
           )}
           {transportType === "stdio" && (
diff --git a/client/src/components/__tests__/Sidebar.test.tsx b/client/src/components/__tests__/Sidebar.test.tsx
index 980dc0120..ad7c2125b 100644
--- a/client/src/components/__tests__/Sidebar.test.tsx
+++ b/client/src/components/__tests__/Sidebar.test.tsx
@@ -27,6 +27,10 @@ describe("Sidebar Environment Variables", () => {
     setEnv: jest.fn(),
     bearerToken: "",
     setBearerToken: jest.fn(),
+    oauthClientId: "",
+    setOauthClientId: jest.fn(),
+    oauthParams: "",
+    setOauthParams: jest.fn(),
     onConnect: jest.fn(),
     onDisconnect: jest.fn(),
     stdErrNotifications: [],
diff --git a/client/src/lib/auth.authorize-url.test.ts b/client/src/lib/auth.authorize-url.test.ts
new file mode 100644
index 000000000..53c6404db
--- /dev/null
+++ b/client/src/lib/auth.authorize-url.test.ts
@@ -0,0 +1,45 @@
+import { InspectorOAuthClientProvider } from "./auth";
+
+describe("OAuth /authorize URL includes state parameter", () => {
+  const serverUrl = "https://example.com";
+  let provider: InspectorOAuthClientProvider;
+
+  // Suppress console.log for this test suite
+  beforeAll(() => {
+    jest.spyOn(console, "log").mockImplementation(() => {});
+  });
+
+  beforeEach(() => {
+    provider = new InspectorOAuthClientProvider(serverUrl);
+    sessionStorage.clear();
+  });
+
+  it("includes state parameter in the authorization URL", () => {
+    // Mock window.location.href using Object.defineProperty
+    const originalLocation = window.location;
+
+    Object.defineProperty(window, "location", {
+      value: { href: "" },
+      writable: true,
+    });
+
+    const url = new URL("https://authserver.com/authorize");
+    provider.redirectToAuthorization(url);
+
+    // Check that the URL contains the state parameter
+    expect(window.location.href).toContain("state=");
+    const stateInUrl = new URL(window.location.href).searchParams.get("state");
+    expect(stateInUrl).toBeDefined();
+    expect(stateInUrl!.length).toBeGreaterThan(0);
+
+    // Restore window.location
+    Object.defineProperty(window, "location", {
+      value: originalLocation,
+      writable: true,
+    });
+  });
+
+  afterAll(() => {
+    (console.log as jest.Mock).mockRestore();
+  });
+});
diff --git a/client/src/lib/auth.state.test.ts b/client/src/lib/auth.state.test.ts
new file mode 100644
index 000000000..6aa3fd3ae
--- /dev/null
+++ b/client/src/lib/auth.state.test.ts
@@ -0,0 +1,31 @@
+import { InspectorOAuthClientProvider } from "./auth";
+
+describe("InspectorOAuthClientProvider state parameter", () => {
+  const serverUrl = "https://example.com";
+  let provider: InspectorOAuthClientProvider;
+
+  beforeEach(() => {
+    provider = new InspectorOAuthClientProvider(serverUrl);
+    sessionStorage.clear();
+  });
+
+  it("generates, stores, and retrieves state", () => {
+    const state = provider.generateAndStoreState();
+    expect(state).toBeDefined();
+    expect(state).toEqual(provider.getState());
+    expect(state).toHaveLength(32);
+  });
+
+  it("clears state from sessionStorage", () => {
+    provider.generateAndStoreState();
+    provider.clearState();
+    expect(provider.getState()).toBeNull();
+  });
+
+  it("generates a new state each time", () => {
+    const state1 = provider.generateAndStoreState();
+    provider.clearState();
+    const state2 = provider.generateAndStoreState();
+    expect(state1).not.toEqual(state2);
+  });
+});
diff --git a/client/src/lib/auth.ts b/client/src/lib/auth.ts
index 7ef318220..a41340c28 100644
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -6,11 +6,46 @@ import {
   OAuthTokensSchema,
 } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS, getServerSpecificKey } from "./constants";
+import { generateRandomState } from "@/utils/oauthUtils";
+
+export const getClientInformationFromSessionStorage = async (
+  serverUrl: string,
+) => {
+  const key = getServerSpecificKey(SESSION_KEYS.CLIENT_INFORMATION, serverUrl);
+  const value = sessionStorage.getItem(key);
+  if (!value) {
+    return undefined;
+  }
+
+  return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
+};
+
+export const getAuthParamsFromSessionStorage = (serverUrl: string) => {
+  const key = getServerSpecificKey(SESSION_KEYS.OAUTH_PARAMS, serverUrl);
+  const value = sessionStorage.getItem(key);
+  if (!value) {
+    return undefined;
+  }
+  return JSON.parse(value);
+};
 
 export class InspectorOAuthClientProvider implements OAuthClientProvider {
-  constructor(private serverUrl: string) {
+  constructor(
+    private serverUrl: string,
+    clientInformation?: OAuthClientInformation,
+    oauthParams?: Record<string, string>,
+  ) {
     // Save the server URL to session storage
     sessionStorage.setItem(SESSION_KEYS.SERVER_URL, serverUrl);
+
+    // Save the client information to session storage if provided
+    if (clientInformation) {
+      this.saveClientInformation(clientInformation);
+    }
+
+    if (oauthParams) {
+      this.saveAuthParams(oauthParams);
+    }
   }
 
   get redirectUrl() {
@@ -29,16 +64,7 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   }
 
   async clientInformation() {
-    const key = getServerSpecificKey(
-      SESSION_KEYS.CLIENT_INFORMATION,
-      this.serverUrl,
-    );
-    const value = sessionStorage.getItem(key);
-    if (!value) {
-      return undefined;
-    }
-
-    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
+    return await getClientInformationFromSessionStorage(this.serverUrl);
   }
 
   saveClientInformation(clientInformation: OAuthClientInformation) {
@@ -49,6 +75,15 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     sessionStorage.setItem(key, JSON.stringify(clientInformation));
   }
 
+  authParams() {
+    return getAuthParamsFromSessionStorage(this.serverUrl);
+  }
+
+  saveAuthParams(authParams: Record<string, string>) {
+    const key = getServerSpecificKey(SESSION_KEYS.OAUTH_PARAMS, this.serverUrl);
+    sessionStorage.setItem(key, JSON.stringify(authParams));
+  }
+
   async tokens() {
     const key = getServerSpecificKey(SESSION_KEYS.TOKENS, this.serverUrl);
     const tokens = sessionStorage.getItem(key);
@@ -64,7 +99,43 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     sessionStorage.setItem(key, JSON.stringify(tokens));
   }
 
+  /**
+   * Generate, store, and return a new state parameter for OAuth.
+   */
+  generateAndStoreState(): string {
+    const state = generateRandomState(32);
+    const key = getServerSpecificKey(SESSION_KEYS.OAUTH_STATE, this.serverUrl);
+    sessionStorage.setItem(key, state);
+    return state;
+  }
+
+  /**
+   * Retrieve the stored state parameter for this serverUrl.
+   */
+  getState(): string | null {
+    const key = getServerSpecificKey(SESSION_KEYS.OAUTH_STATE, this.serverUrl);
+    return sessionStorage.getItem(key);
+  }
+
+  /**
+   * Remove the stored state parameter for this serverUrl.
+   */
+  clearState() {
+    const key = getServerSpecificKey(SESSION_KEYS.OAUTH_STATE, this.serverUrl);
+    sessionStorage.removeItem(key);
+  }
+
   redirectToAuthorization(authorizationUrl: URL) {
+    // Generate and store a new state parameter
+    const state = this.generateAndStoreState();
+    authorizationUrl.searchParams.set("state", state);
+    const authParams = this.authParams();
+    console.log("authParams", authParams);
+    if (authParams) {
+      Object.entries(authParams).forEach(([key, value]) => {
+        authorizationUrl.searchParams.set(key, value as string);
+      });
+    }
     window.location.href = authorizationUrl.href;
   }
 
@@ -99,5 +170,8 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     sessionStorage.removeItem(
       getServerSpecificKey(SESSION_KEYS.CODE_VERIFIER, this.serverUrl),
     );
+    sessionStorage.removeItem(
+      getServerSpecificKey(SESSION_KEYS.OAUTH_PARAMS, this.serverUrl),
+    );
   }
 }
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index a03239ae8..b574250ae 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -6,6 +6,8 @@ export const SESSION_KEYS = {
   SERVER_URL: "mcp_server_url",
   TOKENS: "mcp_tokens",
   CLIENT_INFORMATION: "mcp_client_information",
+  OAUTH_PARAMS: "mcp_oauth_params",
+  OAUTH_STATE: "oauth_state",
 } as const;
 
 // Generate server-specific session storage keys
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index abbeb7c3f..75df79ade 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -25,7 +25,7 @@ import {
   Progress,
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { z } from "zod";
 import { ConnectionStatus } from "../constants";
@@ -40,6 +40,7 @@ import {
 } from "@/utils/configUtils";
 import { getMCPServerRequestTimeout } from "@/utils/configUtils";
 import { InspectorConfig } from "../configurationTypes";
+import { OAuthClientInformation } from "@modelcontextprotocol/sdk/shared/auth.js";
 
 interface UseConnectionOptions {
   transportType: "stdio" | "sse" | "streamable-http";
@@ -49,6 +50,8 @@ interface UseConnectionOptions {
   env: Record<string, string>;
   bearerToken?: string;
   headerName?: string;
+  oauthClientId?: string;
+  oauthParams?: string;
   config: InspectorConfig;
   onNotification?: (notification: Notification) => void;
   onStdErrNotification?: (notification: Notification) => void;
@@ -66,6 +69,8 @@ export function useConnection({
   env,
   bearerToken,
   headerName,
+  oauthClientId,
+  oauthParams,
   config,
   onNotification,
   onStdErrNotification,
@@ -83,6 +88,27 @@ export function useConnection({
   >([]);
   const [completionsSupported, setCompletionsSupported] = useState(true);
 
+  const oauthClientInformation: OAuthClientInformation | undefined =
+    useMemo(() => {
+      if (!oauthClientId) {
+        return undefined;
+      }
+
+      return { client_id: oauthClientId };
+    }, [oauthClientId]);
+
+  const oauthParamsObject = useMemo(() => {
+    if (!oauthParams) {
+      return undefined;
+    }
+    try {
+      return JSON.parse(oauthParams);
+    } catch (e) {
+      console.error("Failed to parse OAuth params", e);
+      return undefined;
+    }
+  }, [oauthParams]);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -247,7 +273,11 @@ export function useConnection({
   const handleAuthError = async (error: unknown) => {
     if (error instanceof SseError && error.code === 401) {
       // Create a new auth provider with the current server URL
-      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
+      const serverAuthProvider = new InspectorOAuthClientProvider(
+        sseUrl,
+        oauthClientInformation,
+        oauthParamsObject,
+      );
 
       const result = await auth(serverAuthProvider, { serverUrl: sseUrl });
       return result === "AUTHORIZED";
@@ -294,7 +324,11 @@ export function useConnection({
       const headers: HeadersInit = {};
 
       // Create an auth provider with the current server URL
-      const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
+      const serverAuthProvider = new InspectorOAuthClientProvider(
+        sseUrl,
+        oauthClientInformation,
+        oauthParamsObject,
+      );
 
       // Use manually provided bearer token if available, otherwise use OAuth tokens
       const token =
@@ -396,7 +430,11 @@ export function useConnection({
 
   const disconnect = async () => {
     await mcpClient?.close();
-    const authProvider = new InspectorOAuthClientProvider(sseUrl);
+    const authProvider = new InspectorOAuthClientProvider(
+      sseUrl,
+      oauthClientInformation,
+      oauthParamsObject,
+    );
     authProvider.clear();
     setMcpClient(null);
     setConnectionStatus("disconnected");
diff --git a/client/src/utils/__tests__/oauthUtils.ts b/client/src/utils/__tests__/oauthUtils.ts
index cc9674cb2..22e3757fe 100644
--- a/client/src/utils/__tests__/oauthUtils.ts
+++ b/client/src/utils/__tests__/oauthUtils.ts
@@ -1,7 +1,8 @@
 import {
   generateOAuthErrorDescription,
   parseOAuthCallbackParams,
-} from "@/utils/oauthUtils.ts";
+  generateRandomState,
+} from "@/utils/oauthUtils";
 
 describe("parseOAuthCallbackParams", () => {
   it("Returns successful: true and code when present", () => {
@@ -76,3 +77,27 @@ describe("generateOAuthErrorDescription", () => {
     );
   });
 });
+
+describe("generateRandomState", () => {
+  it("generates a string of the correct length", () => {
+    const state = generateRandomState(32);
+    expect(state).toHaveLength(32);
+    const state16 = generateRandomState(16);
+    expect(state16).toHaveLength(16);
+  });
+
+  it("generates a string with only allowed characters", () => {
+    const charset =
+      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const state = generateRandomState(64);
+    for (const char of state) {
+      expect(charset.includes(char)).toBe(true);
+    }
+  });
+
+  it("generates different values on subsequent calls (randomness)", () => {
+    const state1 = generateRandomState(32);
+    const state2 = generateRandomState(32);
+    expect(state1).not.toEqual(state2);
+  });
+});
diff --git a/client/src/utils/oauthUtils.ts b/client/src/utils/oauthUtils.ts
index c971271e3..db9ba22ff 100644
--- a/client/src/utils/oauthUtils.ts
+++ b/client/src/utils/oauthUtils.ts
@@ -63,3 +63,15 @@ export const generateOAuthErrorDescription = (
     .filter(Boolean)
     .join("\n");
 };
+
+/**
+ * Generates a cryptographically secure random string for use as OAuth state or PKCE code_verifier.
+ * @param length Number of characters in the generated string (default: 32)
+ */
+export function generateRandomState(length = 32): string {
+  const charset =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const array = new Uint8Array(length);
+  window.crypto.getRandomValues(array);
+  return Array.from(array, (byte) => charset[byte % charset.length]).join("");
+}