feat(inspector): implement OAuth callback handling and improve redirect logic

- Add a custom Vite plugin to manage OAuth callback redirects in development mode
- Update InspectorDashboard and McpContext to dynamically set the redirect URL based on the current environment
- Enhance server middleware to redirect OAuth callbacks to the correct inspector path
- Modify the MCP authorization callback to determine the base path for redirection after authentication

Author: tonxxd

packages/inspector/src/client/components/InspectorDashboard.tsx

@@ -33,7 +33,11 @@ export function InspectorDashboard() {
 
   // OAuth fields
   const [clientId, setClientId] = useState('')
-  const [redirectUrl, setRedirectUrl] = useState('http://localhost:6274/oauth/callback')
+  const [redirectUrl, setRedirectUrl] = useState(
+    typeof window !== 'undefined'
+      ? new URL('/oauth/callback', window.location.origin).toString()
+      : 'http://localhost:3000/oauth/callback',
+  )
   const [scope, setScope] = useState('')
 
   // UI state

packages/inspector/src/client/context/McpContext.tsx

@@ -39,7 +39,14 @@ function McpConnectionWrapper({ url, name, onUpdate, onRemove: _onRemove }: {
   onUpdate: (connection: MCPConnection) => void
   onRemove: () => void
 }) {
-  const mcpHook = useMcp({ url })
+  // Configure OAuth callback URL
+  // Use /oauth/callback (which redirects to /inspector/oauth/callback) for compatibility
+  // with existing OAuth app configurations
+  const callbackUrl = typeof window !== 'undefined'
+    ? new URL('/oauth/callback', window.location.origin).toString()
+    : '/oauth/callback'
+
+  const mcpHook = useMcp({ url, callbackUrl })
   const onUpdateRef = useRef(onUpdate)
   const prevConnectionRef = useRef<MCPConnection | null>(null)
 

packages/inspector/src/server/middleware.ts

@@ -1,4 +1,5 @@
 import type { Express, Request, Response } from 'express'
+import { Buffer } from 'node:buffer'
 import { existsSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -129,6 +130,18 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     res.redirect(301, basePath)
   })
 
+  // Handle OAuth callback redirects - redirect /oauth/callback to /inspector/oauth/callback
+  // This helps when OAuth providers are configured with the wrong redirect URL
+  if (basePath !== '') {
+    app.get('/oauth/callback', (req: Request, res: Response) => {
+      const queryString = req.url.split('?')[1] || ''
+      const redirectUrl = queryString
+        ? `${basePath}/oauth/callback?${queryString}`
+        : `${basePath}/oauth/callback`
+      res.redirect(302, redirectUrl)
+    })
+  }
+
   // Serve the main HTML file for all inspector routes
   app.get(`${basePath}*`, (_req: Request, res: Response) => {
     const indexPath = join(clientDistPath, 'index.html')
@@ -141,6 +154,4 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     // Serve the HTML file (Vite built with base: '/inspector')
     res.sendFile(indexPath)
   })
-
-  console.log(`MCP Inspector mounted at ${basePath}`)
 }

packages/inspector/vite.config.ts

@@ -9,7 +9,26 @@ const packageJson = JSON.parse(readFileSync(path.resolve(__dirname, 'package.jso
 
 export default defineConfig({
   base: '/inspector',
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    // Custom plugin to handle OAuth callback redirects in dev mode
+    {
+      name: 'oauth-callback-redirect',
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          if (req.url?.startsWith('/oauth/callback')) {
+            const url = new URL(req.url, 'http://localhost')
+            const queryString = url.search
+            res.writeHead(302, { Location: `/inspector/oauth/callback${queryString}` })
+            res.end()
+            return
+          }
+          next()
+        })
+      },
+    },
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

packages/mcp-use/src/auth/callback.ts

@@ -77,7 +77,13 @@ export async function onMcpAuthorization() {
         window.close()
       } else {
         console.warn(`${logPrefix} No opener window detected. Redirecting to root.`)
-        window.location.href = '/' // Or a configured post-auth destination
+        // Try to determine the base path from the current URL
+        // e.g., if we're at /inspector/oauth/callback, redirect to /inspector
+        const pathParts = window.location.pathname.split('/').filter(Boolean)
+        const basePath = pathParts.length > 0 && pathParts[pathParts.length - 1] === 'callback'
+          ? '/' + pathParts.slice(0, -2).join('/')
+          : '/'
+        window.location.href = basePath || '/'
       }
       // Clean up state ONLY on success and after notifying opener
       localStorage.removeItem(stateKey)