From ef3efcff21d761b9c5ead44bb804e3052e5bc416 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 11 Mar 2026 08:14:43 -0700
Subject: [PATCH] fix(ui): remove duplicate extractErrorMessage,
 sessionStorage-only in admin OAuth hook, call delete API on disconnect

---
 .../src/components/chat/MCPAppsPanel.tsx         |  9 +++++++--
 .../src/hooks/useMcpOAuthFlow.tsx                | 16 +++-------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
index 9a3bc84d5f4..a80468edfb8 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Spin, Input, Button, Skeleton } from "antd";
 import { SearchOutlined, ArrowLeftOutlined, RightOutlined, ToolOutlined, CheckCircleOutlined } from "@ant-design/icons";
-import { fetchMCPServers, getMCPOAuthUserCredentialStatus, listMCPTools } from "../networking";
+import { deleteMCPOAuthUserCredential, fetchMCPServers, getMCPOAuthUserCredentialStatus, listMCPTools } from "../networking";
 import { AUTH_TYPE, MCPServer, MCPTool, handleTransport } from "../mcp_tools/types";
 import { message } from "antd";
 import { useUserMcpOAuthFlow } from "@/hooks/useUserMcpOAuthFlow";
@@ -276,7 +276,12 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
               <Button
                 type="default"
                 danger
-                onClick={() => {
+                onClick={async () => {
+                  try {
+                    await deleteMCPOAuthUserCredential(accessToken, detailServer.server_id);
+                  } catch (_) {
+                    // Ignore — credential may already be gone; update UI regardless.
+                  }
                   setOauthConnected((prev) => { const n = new Set(prev); n.delete(detailServer.server_id); return n; });
                 }}
                 style={{ borderRadius: 8, fontWeight: 600, height: 38, minWidth: 110 }}
diff --git a/ui/litellm-dashboard/src/hooks/useMcpOAuthFlow.tsx b/ui/litellm-dashboard/src/hooks/useMcpOAuthFlow.tsx
index 40912d24fef..67ace5db405 100644
--- a/ui/litellm-dashboard/src/hooks/useMcpOAuthFlow.tsx
+++ b/ui/litellm-dashboard/src/hooks/useMcpOAuthFlow.tsx
@@ -14,17 +14,6 @@ import { extractErrorMessage } from "@/utils/errorUtils";
 
 export type McpOAuthStatus = "idle" | "authorizing" | "exchanging" | "success" | "error";
 
-function extractErrorMessage(err: unknown): string {
-  if (err instanceof Error) return err.message;
-  if (err && typeof err === "object") {
-    const e = err as Record<string, unknown>;
-    if (typeof e.detail === "string") return e.detail;
-    if (typeof e.message === "string") return e.message;
-    return JSON.stringify(err);
-  }
-  return String(err);
-}
-
 interface UseMcpOAuthFlowOptions {
   accessToken: string | null;
   getCredentials: () => {
@@ -91,9 +80,10 @@ export const useMcpOAuthFlow = ({
   const setStorageItem = (key: string, value: string) => {
     if (typeof window === "undefined") return;
     try {
-      // Store in both sessionStorage and localStorage for redundancy
+      // Use sessionStorage only — the flow state may contain client credentials;
+      // writing them to localStorage would persist across browser sessions and
+      // make them readable by any injected script (XSS).
       window.sessionStorage.setItem(key, value);
-      window.localStorage.setItem(key, value);
     } catch (err) {
       console.warn(`Failed to set storage item ${key}`, err);
     }