Add mcp auth client sample #17

sahandilshan · 2025-10-18T13:01:46Z

Purpose

Add AI agent that can be contact with mcp server with Auth enabled

Copilot

Pull Request Overview

This PR adds a comprehensive MCP (Model Context Protocol) AI agent client with OAuth authentication support. The client provides a web interface for connecting to MCP servers and chatting with AI assistants using WSO2's design system.

Key changes:

Complete MCP AI agent client with Next.js, React 19, and TypeScript
Full OAuth 2.0 PKCE flow implementation with discovery mechanisms
WSO2-branded UI components and design system integration

Reviewed Changes

Copilot reviewed 31 out of 38 changed files in this pull request and generated 1 comment.

File	Description
mcp-auth/python/main.py	Updated comment to clarify this client's URL in auth settings
mcp-auth/python/jwt_validator.py	Updated comment to specify authorization client instead of server
mcp-auth/client/	Complete Next.js client application with OAuth support and WSO2 branding
hotel-booking-agent-autogen-agent-iam/	Updated OpenAPI specs and auth manager comments for consistency

Files not reviewed (1)

mcp-auth/client/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

mcp-auth/python/main.py

Copilot

Pull Request Overview

Copilot reviewed 24 out of 31 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

mcp-auth/client/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

mcp-auth/client/app/lib/oauth-utils.ts:1

There's a malformed Unicode character on line 130. The character '�' should be '🔍' to match the pattern.

/**

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-18T13:12:07Z

mcp-auth/client/app/components/settings-modal.tsx

+    setDiscoveryInProgress(serverId);
+    console.log('🔍 ========================================');
+    console.log('🔍 Starting OAuth discovery for:', server.url);
+    console.log('� ========================================');


Same malformed Unicode character issue as in oauth-utils.ts. Line 129 contains '�' instead of '🔍'.

Suggested change

console.log('� ========================================');

console.log('🔍 ========================================');

Copilot · 2025-10-18T13:12:08Z

mcp-auth/client/app/page.tsx

+  // Helper function to resolve JSON Schema $ref references
+  const resolveSchemaRefs = (schema: any): any => {
+    if (!schema || typeof schema !== 'object') {
+      return schema;
+    }
+
+    // If this object has a $ref, resolve it
+    if (schema.$ref && typeof schema.$ref === 'string') {
+      const refPath = schema.$ref.split('/');
+      if (refPath[0] === '#' && refPath[1] === '$defs') {
+        const defName = refPath[2];
+        if (schema.$defs && schema.$defs[defName]) {
+          // Resolve the reference
+          const resolved = resolveSchemaRefs(schema.$defs[defName]);
+          // Remove $ref and $defs, keep other properties
+          const { $ref, $defs, ...rest } = schema;
+          return { ...resolved, ...rest };
+        }
+      }
+    }
+
+    // Recursively resolve refs in the schema
+    const result: any = Array.isArray(schema) ? [] : {};
+    for (const key in schema) {
+      if (key === '$defs') {
+        // Skip $defs in the output, but keep for resolution
+        continue;
+      }
+      result[key] = resolveSchemaRefs(schema[key]);
+    }
+
+    // If we have $defs at root level, resolve references in properties
+    if (schema.$defs && schema.properties) {
+      for (const propKey in result.properties) {
+        const prop = result.properties[propKey];
+        if (prop.$ref && typeof prop.$ref === 'string') {
+          const refPath = prop.$ref.split('/');
+          if (refPath[0] === '#' && refPath[1] === '$defs') {
+            const defName = refPath[2];
+            if (schema.$defs[defName]) {
+              result.properties[propKey] = resolveSchemaRefs(schema.$defs[defName]);
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  };


The resolveSchemaRefs function is defined inline within the component, making it recreated on every render. Consider moving it outside the component or using useCallback to optimize performance.

Suggested change

// Helper function to resolve JSON Schema $ref references

const resolveSchemaRefs = (schema: any): any => {

if (!schema || typeof schema !== 'object') {

return schema;

}

// If this object has a $ref, resolve it

if (schema.$ref && typeof schema.$ref === 'string') {

const refPath = schema.$ref.split('/');

if (refPath[0] === '#' && refPath[1] === '$defs') {

const defName = refPath[2];

if (schema.$defs && schema.$defs[defName]) {

// Resolve the reference

const resolved = resolveSchemaRefs(schema.$defs[defName]);

// Remove $ref and $defs, keep other properties

const { $ref, $defs, ...rest } = schema;

return { ...resolved, ...rest };

}

}

}

// Recursively resolve refs in the schema

const result: any = Array.isArray(schema) ? [] : {};

for (const key in schema) {

if (key === '$defs') {

// Skip $defs in the output, but keep for resolution

continue;

}

result[key] = resolveSchemaRefs(schema[key]);

}

// If we have $defs at root level, resolve references in properties

if (schema.$defs && schema.properties) {

for (const propKey in result.properties) {

const prop = result.properties[propKey];

if (prop.$ref && typeof prop.$ref === 'string') {

const refPath = prop.$ref.split('/');

if (refPath[0] === '#' && refPath[1] === '$defs') {

const defName = refPath[2];

if (schema.$defs[defName]) {

result.properties[propKey] = resolveSchemaRefs(schema.$defs[defName]);

}

}

}

}

}

return result;

};

// Helper function to resolve JSON Schema $ref references

const resolveSchemaRefs = (schema: any): any => {

if (!schema || typeof schema !== 'object') {

return schema;

}

// If this object has a $ref, resolve it

if (schema.$ref && typeof schema.$ref === 'string') {

const refPath = schema.$ref.split('/');

if (refPath[0] === '#' && refPath[1] === '$defs') {

const defName = refPath[2];

if (schema.$defs && schema.$defs[defName]) {

// Resolve the reference

const resolved = resolveSchemaRefs(schema.$defs[defName]);

// Remove $ref and $defs, keep other properties

const { $ref, $defs, ...rest } = schema;

return { ...resolved, ...rest };

}

}

}

// Recursively resolve refs in the schema

const result: any = Array.isArray(schema) ? [] : {};

for (const key in schema) {

if (key === '$defs') {

// Skip $defs in the output, but keep for resolution

continue;

}

result[key] = resolveSchemaRefs(schema[key]);

}

// If we have $defs at root level, resolve references in properties

if (schema.$defs && schema.properties) {

for (const propKey in result.properties) {

const prop = result.properties[propKey];

if (prop.$ref && typeof prop.$ref === 'string') {

const refPath = prop.$ref.split('/');

if (refPath[0] === '#' && refPath[1] === '$defs') {

const defName = refPath[2];

if (schema.$defs[defName]) {

result.properties[propKey] = resolveSchemaRefs(schema.$defs[defName]);

}

}

}

}

}

return result;

};

Copilot · 2025-10-18T13:12:08Z

mcp-auth/client/app/lib/oauth-utils.ts

+  const randomValues = new Uint8Array(length);
+  crypto.getRandomValues(randomValues);
+  return Array.from(randomValues)
+    .map(v => charset[v % charset.length])
+    .join('');


The random string generation uses modulo bias which can lead to slightly non-uniform distribution. While not critical for OAuth state/verifier generation, consider using rejection sampling for cryptographically secure randomness.

Suggested change

const randomValues = new Uint8Array(length);

crypto.getRandomValues(randomValues);

return Array.from(randomValues)

.map(v => charset[v % charset.length])

.join('');

const charsetLength = charset.length;

const maxValidByte = Math.floor(256 / charsetLength) * charsetLength;

let result = '';

while (result.length < length) {

const randomBytes = new Uint8Array(length - result.length);

crypto.getRandomValues(randomBytes);

for (let i = 0; i < randomBytes.length && result.length < length; i++) {

const v = randomBytes[i];

if (v < maxValidByte) {

result += charset[v % charsetLength];

}

}

}

return result;

Copilot

Pull Request Overview

Copilot reviewed 24 out of 31 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

mcp-auth/client/package-lock.json: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-18T13:16:07Z

mcp-auth/client/app/page.tsx

+
+  // Connect to MCP server
+  const connectToMCP = async (server: MCPServerConfig) => {
+    const newSessionId = `session-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;


The session ID generation uses Math.random() which is not cryptographically secure. Consider using crypto.randomUUID() for better security and uniqueness guarantees.

Suggested change

const newSessionId = `session-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;

const newSessionId = `session-${Date.now()}-${crypto.randomUUID()}`;

Copilot · 2025-10-18T13:16:07Z

mcp-auth/client/app/components/settings-modal.tsx

+
+  const handleSaveAI = () => {
+    onSaveAIConfig(localAIConfig);
+    alert('AI settings saved!');


Using alert() for user feedback is not user-friendly. Consider using a toast notification system or inline feedback messages for better UX.

Copilot · 2025-10-18T13:16:08Z

mcp-auth/client/app/api/mcp/route.ts

+// Store sessions in memory (in production, use Redis or similar)
+const sessions = new Map<string, string>();
+


Storing sessions in memory will not scale and will lose data on server restarts. The comment mentions using Redis for production, but this should be implemented or documented more clearly as a production requirement.

Suggested change

// Store sessions in memory (in production, use Redis or similar)

const sessions = new Map<string, string>();

// Use Redis for session storage in production, fallback to in-memory Map for development

import Redis from 'ioredis';

// Session store abstraction

let sessionStore: {

get: (key: string) => Promise<string | undefined>;

set: (key: string, value: string) => Promise<void>;

del: (key: string) => Promise<void>;

};

// Initialize Redis client if in production and REDIS_URL is set

const isProduction = process.env.NODE_ENV === 'production';

const redisUrl = process.env.REDIS_URL;

if (isProduction) {

if (!redisUrl) {

throw new Error('REDIS_URL must be set in production for session storage.');

}

const redis = new Redis(redisUrl);

sessionStore = {

get: async (key: string) => {

const value = await redis.get(key);

return value === null ? undefined : value;

},

set: async (key: string, value: string) => {

await redis.set(key, value);

},

del: async (key: string) => {

await redis.del(key);

}

};

} else {

// In-memory fallback for development

const sessions = new Map<string, string>();

sessionStore = {

get: async (key: string) => sessions.get(key),

set: async (key: string, value: string) => { sessions.set(key, value); },

del: async (key: string) => { sessions.delete(key); }

};

}

There was an error while connecting to localhost servers while running with docker. These changes were added to fix those issue

Add mcp auth client sample

da2cc35

Copilot AI review requested due to automatic review settings October 18, 2025 13:01

Copilot AI reviewed Oct 18, 2025

View reviewed changes

mcp-auth/python/main.py Outdated Show resolved Hide resolved

sahandilshan added 2 commits October 18, 2025 18:35

Undo server -> client invalid refactoring

e5578d4

Add wso2 lisence headers

fcc0f21

sahandilshan requested a review from Copilot October 18, 2025 13:11

Copilot AI reviewed Oct 18, 2025

View reviewed changes

sahandilshan requested a review from Copilot October 18, 2025 13:15

Copilot AI reviewed Oct 18, 2025

View reviewed changes

sahandilshan added 7 commits October 19, 2025 00:18

Add a chat clear button

b4943b2

Add hybrid approach to make run with docker

f6f1b4a

There was an error while connecting to localhost servers while running with docker. These changes were added to fix those issue

Disable adding multiple mcp servers

83fe457

Let to add only one mcp server

b0f7b38

Disable openai and azure models

d34392e

Update readme file with callback URI

5c49f3c

Add more debug logs and opttimize gemini tool calling

c34ed11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add mcp auth client sample #17

Add mcp auth client sample #17

Uh oh!

sahandilshan commented Oct 18, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Copilot AI Oct 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	console.log('� ========================================');
	console.log('🔍 ========================================');

-  const randomValues = new Uint8Array(length);
-  crypto.getRandomValues(randomValues);
-  return Array.from(randomValues)
-    .map(v => charset[v % charset.length])
-    .join('');
+  const charsetLength = charset.length;
+  const maxValidByte = Math.floor(256 / charsetLength) * charsetLength;
+  let result = '';
+  while (result.length < length) {
+    const randomBytes = new Uint8Array(length - result.length);
+    crypto.getRandomValues(randomBytes);
+    for (let i = 0; i < randomBytes.length && result.length < length; i++) {
+      const v = randomBytes[i];
+      if (v < maxValidByte) {
+        result += charset[v % charsetLength];
+      }
+    }
+  }
+  return result;

	const newSessionId = `session-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
	const newSessionId = `session-${Date.now()}-${crypto.randomUUID()}`;

		// Store sessions in memory (in production, use Redis or similar)
		const sessions = new Map<string, string>();

-// Store sessions in memory (in production, use Redis or similar)
-const sessions = new Map<string, string>();
+// Use Redis for session storage in production, fallback to in-memory Map for development
+import Redis from 'ioredis';
+// Session store abstraction
+let sessionStore: {
+  get: (key: string) => Promise<string | undefined>;
+  set: (key: string, value: string) => Promise<void>;
+  del: (key: string) => Promise<void>;
+};
+// Initialize Redis client if in production and REDIS_URL is set
+const isProduction = process.env.NODE_ENV === 'production';
+const redisUrl = process.env.REDIS_URL;
+if (isProduction) {
+  if (!redisUrl) {
+    throw new Error('REDIS_URL must be set in production for session storage.');
+  }
+  const redis = new Redis(redisUrl);
+  sessionStore = {
+    get: async (key: string) => {
+      const value = await redis.get(key);
+      return value === null ? undefined : value;
+    },
+    set: async (key: string, value: string) => {
+      await redis.set(key, value);
+    },
+    del: async (key: string) => {
+      await redis.del(key);
+    }
+  };
+} else {
+  // In-memory fallback for development
+  const sessions = new Map<string, string>();
+  sessionStore = {
+    get: async (key: string) => sessions.get(key),
+    set: async (key: string, value: string) => { sessions.set(key, value); },
+    del: async (key: string) => { sessions.delete(key); }
+  };
+}

Add mcp auth client sample #17

Are you sure you want to change the base?

Add mcp auth client sample #17

Uh oh!

Conversation

sahandilshan commented Oct 18, 2025

Purpose

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant