good progress

Author: kentcdodds

epicshop/epic-me/workers/app.ts

@@ -2,6 +2,7 @@ import OAuthProvider from '@cloudflare/workers-oauth-provider'
 import { createRequestHandler } from 'react-router'
 import { type Env } from '#types/helpers'
 import { DB } from './db/index.ts'
+import { withCors } from './utils.ts'
 
 const requestHandler = createRequestHandler(
 	() => import('virtual:react-router/server-build'),
@@ -17,7 +18,7 @@ const defaultHandler = {
 	},
 } satisfies ExportedHandler<Env>
 
-export default new OAuthProvider({
+const oauthProvider = new OAuthProvider({
 	apiRoute: ['/whoami', '/db-api', '/introspect'],
 	// @ts-expect-error these types are wrong...
 	apiHandler: defaultHandler,
@@ -27,3 +28,20 @@ export default new OAuthProvider({
 	tokenEndpoint: '/token',
 	clientRegistrationEndpoint: '/register',
 })
+
+export default {
+	fetch: withCors({
+		getCorsHeaders: (request) => {
+			if (request.url.includes('/.well-known')) {
+				return {
+					'Access-Control-Allow-Origin': '*',
+					'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+					'Cross-Origin-Resource-Policy': 'cross-origin',
+				}
+			}
+		},
+		handler: (request, env, ctx) => {
+			return oauthProvider.fetch(request, env, ctx)
+		},
+	}),
+} satisfies ExportedHandler<Env>

epicshop/epic-me/workers/utils.ts

@@ -0,0 +1,54 @@
+export function withCors({
+	getCorsHeaders,
+	handler,
+}: {
+	getCorsHeaders(
+		request: Request,
+	): Record<string, string> | Headers | null | undefined
+	handler: ExportedHandlerFetchHandler<Env>
+}): ExportedHandlerFetchHandler<Env> {
+	return async (request, env, ctx) => {
+		const corsHeaders = getCorsHeaders(request)
+		if (!corsHeaders) {
+			return handler(request, env, ctx)
+		}
+
+		// Handle CORS preflight requests
+		if (request.method === 'OPTIONS') {
+			return new Response(null, {
+				status: 200,
+				headers: mergeHeaders(corsHeaders, {
+					'Access-Control-Max-Age': '86400',
+				}),
+			})
+		}
+
+		// Call the original handler
+		const response = await handler(request, env, ctx)
+
+		// Add CORS headers to ALL responses, including early returns
+		const newHeaders = mergeHeaders(response.headers, corsHeaders)
+
+		return new Response(response.body, {
+			status: response.status,
+			statusText: response.statusText,
+			headers: newHeaders,
+		})
+	}
+}
+
+/**
+ * Merge multiple headers objects into one (uses set so headers are overridden)
+ */
+export function mergeHeaders(
+	...headers: Array<ResponseInit['headers'] | null | undefined>
+) {
+	const merged = new Headers()
+	for (const header of headers) {
+		if (!header) continue
+		for (const [key, value] of new Headers(header).entries()) {
+			merged.set(key, value)
+		}
+	}
+	return merged
+}

epicshop/mcp-dev/dev.js

@@ -13,17 +13,17 @@ const { createProxyServer } = httpProxy
 const [, , ...args] = process.argv
 const [transport = 'streamable-http'] = args
 
-const proxyPort = process.env.PORT || 3000
+const proxyPort = Number(process.env.PORT || 3000)
 const inspectorServerPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 10000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 50000),
 	exclude: [process.env.PORT].filter(Boolean).map(Number),
 })
 const inspectorClientPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 9000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 51000),
 	exclude: [process.env.PORT, inspectorServerPort].filter(Boolean).map(Number),
 })
 const mcpServerPort = await getPort({
-	port: Array.from({ length: 1000 }, (_, i) => i + 11000),
+	port: Array.from({ length: 100 }, (_, i) => proxyPort + i + 52000),
 	exclude: [process.env.PORT, inspectorServerPort, inspectorClientPort]
 		.filter(Boolean)
 		.map(Number),

exercises/01.start/01.solution/src/client.ts

@@ -1,6 +1,6 @@
 import { DBClient } from '@epic-web/epicme-db-client'
 
-const EPIC_ME_SERVER_URL = 'http://localhost:7788'
+export const EPIC_ME_SERVER_URL = 'http://localhost:7788'
 
 export function getClient() {
 	return new DBClient(EPIC_ME_SERVER_URL)

exercises/01.start/01.solution/src/index.ts

@@ -11,6 +11,7 @@ import { initializeResources } from './resources.ts'
 import { initializeTools } from './tools.ts'
 
 type State = { loggingLevel: LoggingLevel }
+
 export class EpicMeMCP extends McpAgent<Env, State> {
 	db!: DBClient
 	initialState: State = { loggingLevel: 'info' }

exercises/03.initialize-flow/01.problem/README.mdx

@@ -0,0 +1 @@
+# Authenticate Header