Merge pull request modelcontextprotocol#698 from KKonstantinov/feature/inspector-oauth-client-provider-state

OAuth state parameter for InspectorOAuthClientProvider via reusable generateOAuthState helper

Author: cliffhall

client/src/lib/auth.ts

@@ -8,6 +8,7 @@ import {
   OAuthMetadata,
 } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS, getServerSpecificKey } from "./constants";
+import { generateOAuthState } from "@/utils/oauthUtils";
 
 export const getClientInformationFromSessionStorage = async ({
   serverUrl,
@@ -86,6 +87,10 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
     };
   }
 
+  state(): string | Promise<string> {
+    return generateOAuthState();
+  }
+
   async clientInformation() {
     // Try to get the preregistered client information from session storage first
     const preregisteredClientInformation =

client/src/lib/oauth-state-machine.ts

@@ -12,6 +12,7 @@ import {
   OAuthMetadataSchema,
   OAuthProtectedResourceMetadata,
 } from "@modelcontextprotocol/sdk/shared/auth.js";
+import { generateOAuthState } from "@/utils/oauthUtils";
 
 export interface StateMachineContext {
   state: AuthDebuggerState;
@@ -113,21 +114,14 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
         scope = metadata.scopes_supported.join(" ");
       }
 
-      // Generate a random state
-      const array = new Uint8Array(32);
-      crypto.getRandomValues(array);
-      const state = Array.from(array, (byte) =>
-        byte.toString(16).padStart(2, "0"),
-      ).join("");
-
       const { authorizationUrl, codeVerifier } = await startAuthorization(
         context.serverUrl,
         {
           metadata,
           clientInformation,
           redirectUrl: context.provider.redirectUrl,
           scope,
-          state: state,
+          state: generateOAuthState(),
           resource: context.state.resource ?? undefined,
         },
       );

client/src/utils/__tests__/oauthUtils.ts renamed to client/src/utils/__tests__/oauthUtils.test.ts

@@ -1,6 +1,7 @@
 import {
   generateOAuthErrorDescription,
   parseOAuthCallbackParams,
+  generateOAuthState,
 } from "@/utils/oauthUtils.ts";
 
 describe("parseOAuthCallbackParams", () => {
@@ -75,4 +76,11 @@ describe("generateOAuthErrorDescription", () => {
       "Error: invalid_request.\nDetails: The request could not be completed as dialed.\nMore info: https://example.com/error-docs.",
     );
   });
+
+  describe("generateOAuthState", () => {
+    it("Returns a string", () => {
+      expect(generateOAuthState()).toBeDefined();
+      expect(generateOAuthState()).toHaveLength(64);
+    });
+  });
 });

client/src/utils/oauthUtils.ts

@@ -48,6 +48,20 @@ export const parseOAuthCallbackParams = (location: string): CallbackParams => {
   };
 };
 
+/**
+ * Generate a random state for the OAuth 2.0 flow.
+ *
+ * @returns A random state for the OAuth 2.0 flow.
+ */
+export const generateOAuthState = () => {
+  // Generate a random state
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
+    "",
+  );
+};
+
 export const generateOAuthErrorDescription = (
   params: Extract<CallbackParams, { successful: false }>,
 ): string => {