Simplify Remote MCP example Hono app (#27)

The goal of this demo app is to serve as a simplified example that's easy to follow.

The code for the example was largely generated by Claude and spread the app code across a bunch of files and interleaved static html content with the authentication logic. It was pretty hard to follow.

This puts all of the logic for the Hono app into one file, makes it clear where you would add your own user / password validation logic, and hides away all of the incidental HTML generation in the utils.ts file.

Author: jmorrell-cloudflare

demos/remote-mcp-server/README.md

@@ -69,7 +69,7 @@ When you open Claude a browser window should open and allow you to login. You sh
 
 ## Deploy to Cloudflare
 
-1. `npx wrangler@latest kv namespace create remote-mcp-server-oauth-kv`
+1. `npx wrangler kv namespace create OAUTH_KV`
 2. Follow the guidance to add the kv namespace ID to `wrangler.jsonc`
 3. `npm run deploy`
 

demos/remote-mcp-server/src/app.ts

@@ -0,0 +1,107 @@
+import { Hono } from "hono";
+import {
+	layout,
+	homeContent,
+	parseApproveFormBody,
+	renderAuthorizationRejectedContent,
+	renderAuthorizationApprovedContent,
+	renderLoggedInAuthorizeScreen,
+	renderLoggedOutAuthorizeScreen,
+} from "./utils";
+import type { OAuthHelpers } from "@cloudflare/workers-oauth-provider";
+
+export type Bindings = Env & {
+	OAUTH_PROVIDER: OAuthHelpers;
+};
+
+const app = new Hono<{
+	Bindings: Bindings;
+}>();
+
+// Render a basic homepage placeholder to make sure the app is up
+app.get("/", async (c) => {
+	const content = await homeContent(c.req.raw);
+	return c.html(layout(content, "MCP Remote Auth Demo - Home"));
+});
+
+// Render an authorization page
+// If the user is logged in, we'll show a form to approve the appropriate scopes
+// If the user is not logged in, we'll show a form to both login and approve the scopes
+app.get("/authorize", async (c) => {
+	// We don't have an actual auth system, so to demonstrate both paths, you can
+	// hard-code whether the user is logged in or not. We'll default to true
+	// const isLoggedIn = false;
+	const isLoggedIn = true;
+
+	const oauthReqInfo = await c.env.OAUTH_PROVIDER.parseAuthRequest(c.req.raw);
+
+	const oauthScopes = [
+		{
+			name: "read_profile",
+			description: "Read your basic profile information",
+		},
+		{ name: "read_data", description: "Access your stored data" },
+		{ name: "write_data", description: "Create and modify your data" },
+	];
+
+	if (isLoggedIn) {
+		const content = await renderLoggedInAuthorizeScreen(oauthScopes, oauthReqInfo);
+		return c.html(layout(content, "MCP Remote Auth Demo - Authorization"));
+	}
+
+	const content = await renderLoggedOutAuthorizeScreen(oauthScopes, oauthReqInfo);
+	return c.html(layout(content, "MCP Remote Auth Demo - Authorization"));
+});
+
+// The /authorize page has a form that will POST to /approve
+// This endpoint is responsible for validating any login information and
+// then completing the authorization request with the OAUTH_PROVIDER
+app.post("/approve", async (c) => {
+	const { action, oauthReqInfo, email, password } = await parseApproveFormBody(
+		await c.req.parseBody(),
+	);
+
+	if (!oauthReqInfo) {
+		return c.html("INVALID LOGIN", 401);
+	}
+
+	// If the user needs to both login and approve, we should validate the login first
+	if (action === "login_approve") {
+		// We'll allow any values for email and password for this demo
+		// but you could validate them here
+		// Ex:
+		// if (email !== "[email protected]" || password !== "password") {
+		// biome-ignore lint/correctness/noConstantCondition: This is a demo
+		if (false) {
+			return c.html(
+				layout(
+					await renderAuthorizationRejectedContent("/"),
+					"MCP Remote Auth Demo - Authorization Status",
+				),
+			);
+		}
+	}
+
+	// The user must be successfully logged in and have approved the scopes, so we
+	// can complete the authorization request
+	const { redirectTo } = await c.env.OAUTH_PROVIDER.completeAuthorization({
+		request: oauthReqInfo,
+		userId: email,
+		metadata: {
+			label: "Test User",
+		},
+		scope: oauthReqInfo.scope,
+		props: {
+			userEmail: email,
+		},
+	});
+
+	return c.html(
+		layout(
+			await renderAuthorizationApprovedContent(redirectTo),
+			"MCP Remote Auth Demo - Authorization Status",
+		),
+	);
+});
+
+export default app;

demos/remote-mcp-server/src/index.ts

@@ -1,4 +1,4 @@
-import app from "./routes";
+import app from "./app";
 import { DurableMCP } from "workers-mcp";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";