lots of improvements

kentcdodds · kentcdodds · commit cca96e76e255 · 2025-08-25T16:31:34.000-06:00
diff --git a/epicshop/epic-me/app/routes.ts b/epicshop/epic-me/app/routes.ts
@@ -5,6 +5,6 @@ export default [
 	route('/authorize', 'routes/authorize.tsx'),
 	route('/healthcheck', 'routes/healthcheck.tsx'),
 	route('/db-api', 'routes/db-api.tsx'),
-	route('/introspect', 'routes/introspect.tsx'),
+	route('/introspect', 'routes/introspect.ts'),
 	route('/test-auth', 'routes/test-auth.tsx'),
 ] satisfies RouteConfig
diff --git a/epicshop/epic-me/app/routes/authorize.tsx b/epicshop/epic-me/app/routes/authorize.tsx
@@ -22,7 +22,10 @@ const requestParamsSchema = z
 		code_challenge: z.string(),
 		code_challenge_method: z.string(),
 		redirect_uri: z.string(),
-		scope: z.string().array().optional().default([]),
+		scope: z
+			.string()
+			.default('')
+			.transform((s) => s.split(' ')),
 		state: z.string().optional().default(''),
 	})
 	.passthrough()
diff --git a/epicshop/epic-me/app/routes/introspect.ts b/epicshop/epic-me/app/routes/introspect.ts
@@ -1,25 +1,26 @@
+import { invariantResponse } from '@epic-web/invariant'
 import { type Token } from '#types/helpers'
 import { type Route } from './+types/introspect'
 
-export async function loader({ request, context }: Route.LoaderArgs) {
-	const tokenInfo = await getTokenInfo(request, context.cloudflare.env)
-	if (!tokenInfo) return new Response('Unauthorized', { status: 401 })
-
-	return Response.json({
-		userId: tokenInfo.userId,
-		clientId: tokenInfo.grant.clientId,
-		scopes: tokenInfo.grant.scope,
-		expiresAt: tokenInfo.expiresAt,
-	})
-}
-
-async function getTokenInfo(
-	request: Request,
-	env: Env,
-): Promise<Token | undefined> {
-	const token = request.headers.get('authorization')?.slice('Bearer '.length)
-	if (!token) return undefined
-	return resolveTokenInfo(token, env)
+export async function introspectLoader({ request, context }: Route.LoaderArgs) {
+	const token = (await request.formData()).get('token')?.toString()
+	console.log({ token })
+	invariantResponse(token, 'invalid_request')
+
+	const info = await resolveTokenInfo(token, context.cloudflare.env).catch(
+		() => undefined,
+	)
+
+	if (!info) return { active: false }
+
+	return {
+		active: true,
+		client_id: info.grant.clientId,
+		scope: info.grant.scope.join(' '),
+		sub: info.userId,
+		exp: Math.floor(info.expiresAt / 1000), // if you store ms
+		// aud, iss, token_type, iat ... add as useful
+	}
 }
 
 async function resolveTokenInfo(
diff --git a/epicshop/epic-me/package-lock.json b/epicshop/epic-me/package-lock.json
diff --git a/epicshop/epic-me/package.json b/epicshop/epic-me/package.json
@@ -21,11 +21,12 @@
   },
   "dependencies": {
     "@cloudflare/workers-oauth-provider": "^0.0.6",
-    "zod": "^3.25.67",
+    "@epic-web/invariant": "^1.0.0",
     "isbot": "^5.1.29",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.8.0"
+    "react-router": "^7.8.0",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.11.2",
diff --git a/epicshop/epic-me/workers/app.ts b/epicshop/epic-me/workers/app.ts
@@ -27,6 +27,7 @@ const oauthProvider = new OAuthProvider({
 	authorizeEndpoint: '/authorize',
 	tokenEndpoint: '/token',
 	clientRegistrationEndpoint: '/register',
+	scopesSupported: ['read', 'write'],
 })
 
 export default {
@@ -36,6 +37,7 @@ export default {
 				return {
 					'Access-Control-Allow-Origin': '*',
 					'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+					'Access-Control-Allow-Headers': 'mcp-protocol-version',
 					'Cross-Origin-Resource-Policy': 'cross-origin',
 				}
 			}
diff --git a/epicshop/epic-me/workers/utils.ts b/epicshop/epic-me/workers/utils.ts
@@ -15,12 +15,11 @@ export function withCors({
 
 		// Handle CORS preflight requests
 		if (request.method === 'OPTIONS') {
-			return new Response(null, {
-				status: 200,
-				headers: mergeHeaders(corsHeaders, {
-					'Access-Control-Max-Age': '86400',
-				}),
+			const headers = mergeHeaders(corsHeaders, {
+				'Access-Control-Max-Age': '86400',
 			})
+
+			return new Response(null, { status: 204, headers })
 		}
 
 		// Call the original handler
diff --git a/exercises/03.initialize-flow/01.problem/src/utils.ts b/exercises/03.initialize-flow/01.problem/src/utils.ts
@@ -16,7 +16,7 @@ export function withCors({
 		// Handle CORS preflight requests
 		if (request.method === 'OPTIONS') {
 			return new Response(null, {
-				status: 200,
+				status: 204,
 				headers: mergeHeaders(corsHeaders, {
 					'Access-Control-Max-Age': '86400',
 				}),
diff --git a/exercises/04.auth-requests/01.problem/src/auth.ts b/exercises/04.auth-requests/01.problem/src/auth.ts
@@ -2,11 +2,11 @@ import { z } from 'zod'
 import { EPIC_ME_SERVER_URL } from './client.ts'
 
 export type AuthInfo = Exclude<
-	Awaited<ReturnType<typeof getAuthInfoFromOAuthFromRequest>>,
+	Awaited<ReturnType<typeof getAuthInfo>>,
 	undefined
 >
 
-export async function getAuthInfoFromOAuthFromRequest(request: Request) {
+export async function getAuthInfo(request: Request) {
 	const authHeader = request.headers.get('authorization')
 	if (!authHeader?.startsWith('Bearer ')) return undefined
 
diff --git a/exercises/04.auth-requests/01.problem/src/index.ts b/exercises/04.auth-requests/01.problem/src/index.ts
@@ -8,7 +8,7 @@ import {
 import { McpAgent } from 'agents/mcp'
 import {
 	type AuthInfo,
-	getAuthInfoFromOAuthFromRequest,
+	getAuthInfo,
 	handleOAuthAuthorizationServerRequest,
 	handleOAuthProtectedResourceRequest,
 	initiateOAuthFlow,
@@ -87,7 +87,7 @@ export default {
 				return handleOAuthProtectedResourceRequest(request)
 			}
 
-			const authInfo = await getAuthInfoFromOAuthFromRequest(request)
+			const authInfo = await getAuthInfo(request)
 
 			if (!authInfo) return initiateOAuthFlow(request)
 
diff --git a/exercises/04.auth-requests/01.problem/src/utils.ts b/exercises/04.auth-requests/01.problem/src/utils.ts
@@ -16,7 +16,7 @@ export function withCors({
 		// Handle CORS preflight requests
 		if (request.method === 'OPTIONS') {
 			return new Response(null, {
-				status: 200,
+				status: 204,
 				headers: mergeHeaders(corsHeaders, {
 					'Access-Control-Max-Age': '86400',
 				}),
diff --git a/exercises/99.finished/99.solution/src/auth.ts b/exercises/99.finished/99.solution/src/auth.ts
@@ -1,100 +1,97 @@
 import { z } from 'zod'
-import { EPIC_ME_SERVER_URL } from './client.ts'
+import { EPIC_ME_AUTH_SERVER_URL } from './client.ts'
 
-export type AuthInfo = Exclude<
-	Awaited<ReturnType<typeof getAuthInfoFromOAuthFromRequest>>,
-	undefined
->
+export type AuthInfo = NonNullable<Awaited<ReturnType<typeof getAuthInfo>>>
 
-export async function getAuthInfoFromOAuthFromRequest(request: Request) {
-	const authHeader = request.headers.get('authorization')
-	if (!authHeader?.startsWith('Bearer ')) return undefined
+export async function getAuthInfo(request: Request) {
+	const token = request.headers.get('authorization')?.replace(/^Bearer\s+/i, '')
+	if (!token) return undefined
 
-	const token = authHeader.slice('Bearer '.length)
-
-	const validateUrl = new URL('/introspect', EPIC_ME_SERVER_URL).toString()
+	const validateUrl = new URL('/introspect', EPIC_ME_AUTH_SERVER_URL).toString()
 	const resp = await fetch(validateUrl, {
-		headers: { authorization: authHeader },
+		method: 'POST',
+		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+		body: new URLSearchParams({ token }),
 	})
 	if (!resp.ok) return undefined
 
+	const rawData = await resp.json()
+
 	const data = z
 		.object({
-			userId: z.string(),
-			clientId: z.string().default(''),
-			scopes: z.array(z.string()).default([]),
-			expiresAt: z.number().optional(),
+			active: z.boolean(),
+			client_id: z.string(),
+			scope: z.string(),
+			sub: z.string(),
+			exp: z.number(),
 		})
-		.parse(await resp.json())
+		.parse(rawData)
 
-	const { userId, clientId, scopes, expiresAt } = data
+	const { sub, client_id, scope, exp } = data
 
 	return {
 		token,
-		clientId,
-		scopes,
-		expiresAt,
-		extra: { userId },
+		clientId: client_id,
+		scopes: scope.split(' '),
+		expiresAtMs: exp * 1000,
+		extra: { userId: sub },
 	}
 }
 
-export function initiateOAuthFlow(request: Request) {
-	const url = new URL(request.url)
-	const currentUrl = url.toString()
-
-	// Create the OAuth authorization URL
-	const authUrl = new URL('/authorize', EPIC_ME_SERVER_URL)
+const requiredScopes = ['read', 'write']
 
-	// Add the current URL as the redirect target
-	authUrl.searchParams.set('redirect_uri', currentUrl)
+export function validateScopes(authInfo: AuthInfo) {
+	return requiredScopes.every((scope) => authInfo.scopes.includes(scope))
+}
 
-	// Add OAuth request info as a parameter
-	const oauthReqInfo = {
-		client_id: 'epicme-mcp',
-		redirect_uri: currentUrl,
-		response_type: 'code',
-		scope: ['read', 'write'],
-		state: crypto.randomUUID(),
-	}
-	authUrl.searchParams.set('oauth_req_info', JSON.stringify(oauthReqInfo))
+export function handleUnauthorized(request: Request) {
+	const hasAuthHeader = request.headers.has('authorization')
 
+	const url = new URL(request.url)
+	url.pathname = '/.well-known/oauth-protected-resource/mcp'
 	return new Response('Unauthorized', {
 		status: 401,
 		headers: {
-			'WWW-Authenticate': 'OAuth realm="EpicMe"',
-			Location: authUrl.toString(),
+			'WWW-Authenticate': [
+				`Bearer realm="EpicMe"`,
+				hasAuthHeader ? `error="invalid_token"` : null,
+				`resource_metadata=${url.toString()}`,
+				`scope=${requiredScopes.join(' ')}`,
+			]
+				.filter(Boolean)
+				.join(', '),
 		},
 	})
 }
 
-export async function handleOAuthAuthorizationServerRequest() {
-	const authUrl = new URL(
-		'/.well-known/oauth-authorization-server',
-		EPIC_ME_SERVER_URL,
-	)
-	return Response.redirect(authUrl.toString(), 302)
+export function handleInsufficientScope(request: Request) {
+	const url = new URL(request.url)
+	url.pathname = '/.well-known/oauth-protected-resource/mcp'
+	return new Response('Forbidden', {
+		status: 403,
+		headers: {
+			'WWW-Authenticate': [
+				`Bearer realm="EpicMe"`,
+				`error="insufficient_scope"`,
+				`scope=${requiredScopes.join(' ')}`,
+				`resource_metadata=${url.toString()}`,
+			].join(', '),
+		},
+	})
 }
 
+/**
+ * This retrieves the protected resource configuration from the EpicMe server.
+ * This is how the client knows where to request authorization from.
+ */
 export async function handleOAuthProtectedResourceRequest(request: Request) {
 	// This server is the protected resource server, so we return our own configuration
 	const resourceServerUrl = new URL(request.url)
 	resourceServerUrl.pathname = '/mcp' // Point to the MCP endpoint
 
 	return Response.json({
 		resource: resourceServerUrl.toString(),
-		scopes: ['read', 'write'],
-		resource_owner: 'epicme',
-		resource_server: {
-			name: 'EpicMe MCP Server',
-			version: '1.0.0',
-		},
-		authorization_servers: [
-			{
-				issuer: EPIC_ME_SERVER_URL,
-				authorization_endpoint: `${EPIC_ME_SERVER_URL}/authorize`,
-				token_endpoint: `${EPIC_ME_SERVER_URL}/token`,
-				introspection_endpoint: `${EPIC_ME_SERVER_URL}/introspect`,
-			},
-		],
+		authorization_servers: [EPIC_ME_AUTH_SERVER_URL],
+		scopes_supported: ['read', 'write'],
 	})
 }
diff --git a/exercises/99.finished/99.solution/src/client.ts b/exercises/99.finished/99.solution/src/client.ts
@@ -1,7 +1,7 @@
 import { DBClient } from '@epic-web/epicme-db-client'
 
-export const EPIC_ME_SERVER_URL = 'http://localhost:7788'
+export const EPIC_ME_AUTH_SERVER_URL = 'http://localhost:7788'
 
 export function getClient(oauthToken: string) {
-	return new DBClient(EPIC_ME_SERVER_URL, oauthToken)
+	return new DBClient(EPIC_ME_AUTH_SERVER_URL, oauthToken)
 }
diff --git a/exercises/99.finished/99.solution/src/index.ts b/exercises/99.finished/99.solution/src/index.ts
diff --git a/exercises/99.finished/99.solution/src/utils.ts b/exercises/99.finished/99.solution/src/utils.ts
diff --git a/exercises/99.finished/99.solution/test/index.test.ts b/exercises/99.finished/99.solution/test/index.test.ts

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ const oauthProvider = new OAuthProvider({`
`27`	`27`	`authorizeEndpoint: '/authorize',`
`28`	`28`	`tokenEndpoint: '/token',`
`29`	`29`	`clientRegistrationEndpoint: '/register',`
	`30`	`+ scopesSupported: ['read', 'write'],`
`30`	`31`	`})`
`31`	`32`
`32`	`33`	`export default {`
`@@ -36,6 +37,7 @@ export default {`
`36`	`37`	`return {`
`37`	`38`	`'Access-Control-Allow-Origin': '*',`
`38`	`39`	`'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',`
	`40`	`+ 'Access-Control-Allow-Headers': 'mcp-protocol-version',`
`39`	`41`	`'Cross-Origin-Resource-Policy': 'cross-origin',`
`40`	`42`	`}`
`41`	`43`	`}`