feat: Add OAuth 2.1 authentication support for remote MCP servers

[deepaknlwl]

feat: Add OAuth 2.1 authentication support for remote MCP servers

Context

Previously, when connecting to remote MCP servers that require OAuth 2.1 authentication (e.g., servers using SSE or Streamable HTTP transports with bearer tokens), KiloCode would fail with authentication errors. Users had no way to authenticate with these servers, making them unusable.

This PR implements OAuth 2.1 authentication support for remote MCP (Model Context Protocol) servers, enabling users to authenticate with MCP servers that require OAuth 2.1 bearer token authentication. This implementation is based on Cline's OAuth 2.1 implementation (PR #7376) and adapted for KiloCode's architecture.

Implementation

This PR adds complete OAuth 2.1 support following the MCP SDK's OAuthClientProvider interface:

Core Components

1. McpOAuthManager (src/services/mcp/McpOAuthManager.ts):

   • Implements OAuthClientProvider interface from @modelcontextprotocol/sdk
   • Manages OAuth state, tokens, and client information securely
   • Handles token refresh automatically via MCP SDK
   • Stores all OAuth data in VSCode's SecretStorage (encrypted)
   • Validates OAuth state parameter for CSRF protection

2. McpOAuthCallbackServer (src/services/mcp/McpOAuthCallbackServer.ts):

   • Localhost HTTP server (ports 48801-48811) for OAuth callbacks
   • Shows success page in browser without redirecting to IDE (better UX)
   • Automatically stops after handling callback or after 10 minutes of inactivity
   • Works on all platforms (VSCode, JetBrains)

3. McpHub Integration (src/services/mcp/McpHub.ts):

   • Modified connectToServer to handle UnauthorizedError and mark servers as requiring OAuth
   • Added initiateOAuth method to start OAuth flow
   • Added completeOAuth method to handle callback and reconnect
   • Integrated OAuth provider with SSE and Streamable HTTP transports

4. UI Integration (webview-ui/src/components/mcp/McpView.tsx):

   • Added "Authenticate" icon button in MCP server list when OAuth is required
   • Shows authentication status (authenticated/unauthenticated/pending)
   • Follows KiloCode's existing icon-based UI patterns

Related

• Based on Cline PR #7376: https://github.com/continuedev/cline/pull/7376

Screenshots

Before -

After -

How to Test

1. Setup an MCP server requiring OAuth:

   • Configure an MCP server that requires OAuth 2.1 authentication (e.g., using SSE or Streamable HTTP transport with bearer token)
   • Add the server to KiloCode's MCP configuration

2. Trigger OAuth flow:

   • KiloCode will attempt to connect to the server
   • Connection will fail with authentication error
   • You should see an "Authenticate" button (key icon) appear in the MCP server list

3. Authenticate:
   • Click the "Authenticate" button
   • Browser should open to the OAuth provider's authorization page
   • Complete the OAuth flow (login, grant permissions, etc.)

4. Verify callback:
   • After authentication, You should see a success page saying "Authentication Successful" with "Feel free to close this window and continue in your IDE"

5. Verify connection:
   • Return to KiloCode
   • The MCP server should automatically reconnect
   • Connection status should show as "connected"
   • The "Authenticate" button should disappear
   • You should be able to use the MCP server's tools/resources

Closes #4656

[changeset-bot]

🦋 Changeset detected

Latest commit: 2327e16

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR