From 5432ac35ee9fe15214e0c368921c72f4180e617d Mon Sep 17 00:00:00 2001
From: Rui Figueira <rui.figueira@gmail.com>
Date: Tue, 1 Jul 2025 15:32:15 +0100
Subject: [PATCH] Fixes oauth/callback route

- changed OAuthCallbackPage according to https://github.com/modelcontextprotocol/use-mcp?tab=readme-ov-file#with-react-router
- configure app as an SPA (https://developers.cloudflare.com/workers/static-assets/routing/single-page-application/#configuration)
---
 playground/ai/src/OAuthCallbackPage.tsx | 51 +++++++------------------
 playground/ai/wrangler.jsonc            |  8 +++-
 2 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/playground/ai/src/OAuthCallbackPage.tsx b/playground/ai/src/OAuthCallbackPage.tsx
index b03684a5c..9bd84e5b3 100644
--- a/playground/ai/src/OAuthCallbackPage.tsx
+++ b/playground/ai/src/OAuthCallbackPage.tsx
@@ -1,41 +1,18 @@
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
-import { onMcpAuthorization } from "use-mcp";
+import { useEffect } from 'react'
+import { onMcpAuthorization } from 'use-mcp'
 
 export default function OAuthCallbackPage() {
-	const [searchParams] = useSearchParams();
-	const [result, setResult] = useState<{
-		status: "processing" | "success" | "error";
-		message?: string;
-	}>({ status: "processing" });
+  useEffect(() => {
+    onMcpAuthorization()
+  }, [])
 
-	useEffect(() => {
-		const query: Record<string, string> = {};
-		searchParams.forEach((value, key) => {
-			query[key] = value;
-		});
-
-		// @ts-expect-error need to fix this
-		onMcpAuthorization(query)
-			.then((res) =>
-				setResult({
-					// @ts-expect-error need to fix this
-					message: res.error,
-					// @ts-expect-error need to fix this
-					status: res.success ? "success" : "error",
-				}),
-			)
-			.catch((err: Error) => setResult({ message: err.message, status: "error" }));
-	}, [searchParams]);
-
-	return (
-		<div>
-			<h1>Authentication {result.status}</h1>
-			{result.status === "processing" && <p>Processing authentication...</p>}
-			{result.status === "success" && (
-				<p>Authentication successful! You can close this window.</p>
-			)}
-			{result.status === "error" && <p>Authentication error: {result.message}</p>}
-		</div>
-	);
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-gray-900 mb-4">Authenticating...</h1>
+        <p className="text-gray-600 mb-2">Please wait while we complete your authentication.</p>
+        <p className="text-sm text-gray-500">This window should close automatically.</p>
+      </div>
+    </div>
+  )
 }
diff --git a/playground/ai/wrangler.jsonc b/playground/ai/wrangler.jsonc
index 2449a3e06..2e3916e8f 100644
--- a/playground/ai/wrangler.jsonc
+++ b/playground/ai/wrangler.jsonc
@@ -8,7 +8,13 @@
   "ai": {
     "binding": "AI",
   },
+  "assets": {
+    "directory": "./dist/",
+    "not_found_handling": "single-page-application",
+    "binding": "ASSETS",
+    "run_worker_first": ["/api/*"]
+  },
   "routes": [
     { "pattern": "playground.ai.cloudflare.com", "custom_domain": true },
-  ],
+  ]
 }