Add forced approval flow for MCP intermediary (#164)

Address vulnerability where an attacker can effectively bypass
authorization once you've already approved a primary client.


modelcontextprotocol/modelcontextprotocol#265

This also takes the opportunity to bump up the oauth worker bindings,
which addresses another security vulnerability (missing verification of
redirect_uri).

Note: mcp-remote@latest is required to resolve a bug customers may
experience with the oauth change above.

Author: dcramer

.vscode/mcp.json

@@ -3,12 +3,12 @@
     "sentry-dev": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "mcp-remote", "http://localhost:5173/sse"]
+      "args": ["-y", "mcp-remote@latest", "http://localhost:5173/sse"]
     },
     "sentry": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "mcp-remote", "https://mcp.sentry.dev/sse"]
+      "args": ["-y", "mcp-remote@latest", "https://mcp.sentry.dev/sse"]
     }
   }
 }

README.md

@@ -51,31 +51,9 @@ MCP includes an [Inspector](https://modelcontextprotocol.io/docs/tools/inspector
 pnpm inspector
 ```
 
-Enter `https://[domain].workers.dev/sse` (TODO) and hit connect. Once you go through the authentication flow, you'll see the Tools working:
+Enter the MCP server URL (http://localhost:5173) and hit connect. This should trigger the authentication flow for you.
 
-<img width="640" alt="image" src="https://github.com/user-attachments/assets/7973f392-0a9d-4712-b679-6dd23f824287" />
-
-### Access the remote MCP server from Claude Desktop
-
-Open Claude Desktop and navigate to Settings, press `⌘ + ,` (comma) -> Developer -> Edit Config. This opens the configuration file that controls which MCP servers Claude can access.
-
-Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use.
-
-```json
-{
-  "mcpServers": {
-    "math": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "https://mcp-github-oauth.<your-subdomain>.workers.dev/sse"
-      ]
-    }
-  }
-}
-```
-
-Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you use the math tool to add 23 and 19?". Claude should invoke the tool and show the result generated by the MCP server.
+Note: If you have issues with your OAuth flow when accessing the inspector on `127.0.0.1`, try using `localhost` instead by visiting `http://localhost:6274`.
 
 ## Local Development
 
@@ -131,7 +109,7 @@ When using Claude to connect to your remote MCP server, you may see some error m
 
 ### Using Cursor and other MCP Clients
 
-To connect Cursor with your MCP server, choose `Type`: "Command" and in the `Command` field, combine the command and args fields into one (e.g. `npx mcp-remote https://<your-worker-name>.<your-subdomain>.workers.dev/sse`).
+To connect Cursor with your MCP server, choose `Type`: "Command" and in the `Command` field, combine the command and args fields into one (e.g. `npx mcp-remote@latest https://<your-worker-name>.<your-subdomain>.workers.dev/sse`).
 
 Note that while Cursor supports HTTP+SSE servers, it doesn't support authentication, so you still need to use `mcp-remote` (and to use a STDIO server, not an HTTP one).
 

packages/mcp-cloudflare/package.json

@@ -4,9 +4,7 @@
   "private": true,
   "type": "module",
   "license": "FSL-1.1-ALv2",
-  "files": [
-    "./dist/*"
-  ],
+  "files": ["./dist/*"],
   "exports": {
     ".": {
       "types": "./dist/index.ts",
@@ -41,7 +39,7 @@
     "wrangler": "~4.13.2"
   },
   "dependencies": {
-    "@cloudflare/workers-oauth-provider": "^0.0.3",
+    "@cloudflare/workers-oauth-provider": "^0.0.5",
     "@modelcontextprotocol/sdk": "^1.10.2",
     "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-slot": "^1.2.0",

packages/mcp-cloudflare/src/client/components/fragments/remote-setup.tsx

@@ -8,22 +8,22 @@ const mcpServerName = import.meta.env.DEV ? "sentry-dev" : "sentry";
 export default function RemoteSetup() {
   const sseUrl = new URL("/sse", window.location.href).href;
 
-  const mcpRemoteSnippet = `npx mcp-remote ${sseUrl}`;
+  const mcpRemoteSnippet = `npx mcp-remote@latest ${sseUrl}`;
 
   // https://code.visualstudio.com/docs/copilot/chat/mcp-servers
   const vsCodeHandler = `code:mcp/install?${encodeURIComponent(
     JSON.stringify({
       name: mcpServerName,
       command: "npx",
-      args: ["-y", "mcp-remote", sseUrl],
+      args: ["-y", "mcp-remote@latest", sseUrl],
     }),
   )}`;
   const zedInstructions = JSON.stringify(
     {
       context_servers: {
         [mcpServerName]: {
           command: "npx",
-          args: ["-y", "mcp-remote", sseUrl],
+          args: ["-y", "mcp-remote@latest", sseUrl],
         },
         settings: {},
       },
@@ -61,7 +61,7 @@ export default function RemoteSetup() {
                     mcpServers: {
                       sentry: {
                         command: "npx",
-                        args: ["-y", "mcp-remote", sseUrl],
+                        args: ["-y", "mcp-remote@latest", sseUrl],
                       },
                     },
                   },

packages/mcp-cloudflare/src/client/index.css

@@ -84,7 +84,11 @@
 
   body {
     @apply bg-background text-foreground;
-    background: linear-gradient(to bottom, #2d1b69, #171717, #000000);
+    background: linear-gradient(
+      oklch(0.13 0.028 261.692) 0%,
+      oklch(0.21 0.034 264.665) 50%,
+      oklch(0.13 0.028 261.692) 100%
+    );
     min-height: 100vh;
   }
 

packages/mcp-cloudflare/src/server/app.ts

@@ -1,6 +1,6 @@
 import { Hono } from "hono";
-import authHandler from "./routes/oauth";
 import type { Env } from "./types";
+import sentryOauth from "./routes/sentry-oauth";
 
 export default new Hono<{
   Bindings: Env;
@@ -20,4 +20,4 @@ export default new Hono<{
       ].join("\n"),
     );
   })
-  .route("/", authHandler);
+  .route("/oauth", sentryOauth);

packages/mcp-cloudflare/src/server/index.ts

@@ -14,6 +14,7 @@ const oAuthProvider = new OAuthProvider({
   apiHandler: SentryMCP.mount("/sse"),
   // @ts-ignore
   defaultHandler: app,
+  // must match the routes registered in `app.ts`
   authorizeEndpoint: "/oauth/authorize",
   tokenEndpoint: "/oauth/token",
   clientRegistrationEndpoint: "/oauth/register",