Implement OAuth callback

client/src/App.tsx

@@ -18,7 +18,7 @@ import {
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, Suspense } from "react";
 
 import { StdErrNotification } from "./lib/notificationTypes";
 
@@ -49,6 +49,15 @@ const PROXY_PORT = params.get("proxyPort") ?? "3000";
 const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
 
 const App = () => {
+  // Handle OAuth callback route
+  if (window.location.pathname === '/oauth/callback') {
+    const OAuthCallback = React.lazy(() => import('./components/OAuthCallback'));
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <OAuthCallback />
+      </Suspense>
+    );
+  }
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]

client/src/components/OAuthCallback.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { handleOAuthCallback } from '../lib/auth';
+
+const OAuthCallback = () => {
+  useEffect(() => {
+    const handleCallback = async () => {
+      const params = new URLSearchParams(window.location.search);
+      const code = params.get('code');
+      const serverUrl = sessionStorage.getItem('mcp_server_url');
+
+      if (!code || !serverUrl) {
+        console.error('Missing code or server URL');
+        window.location.href = '/';
+        return;
+      }
+
+      try {
+        const accessToken = await handleOAuthCallback(serverUrl, code);
+        // Store the access token for future use
+        sessionStorage.setItem('mcp_access_token', accessToken);
+        // Redirect back to the main app
+        window.location.href = '/';
+      } catch (error) {
+        console.error('OAuth callback error:', error);
+        window.location.href = '/';
+      }
+    };
+
+    void handleCallback();
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <p className="text-lg text-gray-500">Processing OAuth callback...</p>
+    </div>
+  );
+};
+
+export default OAuthCallback;

client/src/lib/hooks/useConnection.ts

@@ -166,6 +166,8 @@ export function useConnection({
       } catch (error) {
         console.error("Failed to connect to MCP server:", error);
         if (error instanceof SseError && error.code === 401) {
+          // Store the server URL for the callback handler
+          sessionStorage.setItem('mcp_server_url', sseUrl);
           const redirectUrl = await startOAuthFlow(sseUrl);
           window.location.href = redirectUrl;
         }

client/vite.config.ts

@@ -5,6 +5,9 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    historyApiFallback: true,
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),