fix(mcp): address PR review for OAuth feature

- provider: clear `state` from DB in `invalidateCredentials` to prevent
  stale state values from matching during CSRF check
- storage: encrypt PKCE `codeVerifier` at rest to match `tokens` /
  `clientInformation` security posture
- queries: `useForceRefreshMcpTools` now writes the fetched payload
  directly into the query cache instead of invalidating, eliminating
  the duplicate network round-trip
- mcp settings: track per-server OAuth pending state so a "Connecting…"
  spinner only disables the card whose flow is in progress
- mcp settings: surface existing `oauthClientId` in edit modal so the
  Advanced section auto-expands and displays the saved value

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx

@@ -169,12 +169,14 @@ export function MCP({ initialServerId }: MCPProps) {
         url?: string
         timeout?: number
         headers?: { key: string; value: string }[]
+        oauthClientId?: string
       }
     | undefined
   >(undefined)
 
   const [searchTerm, setSearchTerm] = useState('')
   const [deletingServers, setDeletingServers] = useState<Set<string>>(() => new Set())
+  const [connectingOauthServers, setConnectingOauthServers] = useState<Set<string>>(() => new Set())
 
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [serverToDelete, setServerToDelete] = useState<{ id: string; name: string } | null>(null)
@@ -356,6 +358,7 @@ export function MCP({ initialServerId }: MCPProps) {
       url: server.url || '',
       timeout: 30000,
       headers,
+      oauthClientId: server.oauthClientId || undefined,
     })
     setShowEditModal(true)
   }, [])
@@ -460,19 +463,26 @@ export function MCP({ initialServerId }: MCPProps) {
                   <Button
                     variant='primary'
                     size='sm'
-                    disabled={startOauthMutation.isPending}
+                    disabled={connectingOauthServers.has(server.id)}
                     onClick={async () => {
+                      setConnectingOauthServers((prev) => new Set(prev).add(server.id))
                       try {
                         await startOauthMutation.mutateAsync({ serverId: server.id })
                       } catch (e) {
                         logger.error('Failed to start MCP OAuth', e)
                         toast.error(
                           e instanceof Error ? e.message : 'Failed to start authorization'
                         )
+                      } finally {
+                        setConnectingOauthServers((prev) => {
+                          const next = new Set(prev)
+                          next.delete(server.id)
+                          return next
+                        })
                       }
                     }}
                   >
-                    {startOauthMutation.isPending ? 'Connecting…' : 'Connect with OAuth'}
+                    {connectingOauthServers.has(server.id) ? 'Connecting…' : 'Connect with OAuth'}
                   </Button>
                 </div>
               </div>

apps/sim/hooks/queries/mcp.ts

@@ -116,8 +116,8 @@ export function useForceRefreshMcpTools() {
 
   return useMutation({
     mutationFn: (workspaceId: string) => fetchMcpTools(workspaceId, true),
-    onSettled: (_data, _error, workspaceId) => {
-      queryClient.invalidateQueries({ queryKey: mcpKeys.toolsList(workspaceId) })
+    onSuccess: (tools, workspaceId) => {
+      queryClient.setQueryData(mcpKeys.toolsList(workspaceId), tools)
     },
   })
 }

apps/sim/lib/mcp/oauth/provider.ts

@@ -11,6 +11,7 @@ import { decryptSecret } from '@/lib/core/security/encryption'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import {
   clearClient,
+  clearState,
   clearTokens,
   clearVerifier,
   type McpOauthRow,
@@ -135,6 +136,7 @@ export class SimMcpOauthProvider {
     }
     if (scope === 'all' || scope === 'verifier') {
       await clearVerifier(this.row.id)
+      await clearState(this.row.id)
       this.row.codeVerifier = null
       this.row.state = null
     }

apps/sim/lib/mcp/oauth/storage.ts

@@ -98,7 +98,7 @@ export async function loadOauthRow(params: {
       ? await decryptClientInformation(row.clientInformation)
       : null,
     tokens: row.tokens ? await decryptTokens(row.tokens) : null,
-    codeVerifier: row.codeVerifier,
+    codeVerifier: row.codeVerifier ? (await decryptSecret(row.codeVerifier)).decrypted : null,
     state: row.state,
   }
 }
@@ -119,7 +119,7 @@ export async function loadOauthRowByState(state: string): Promise<McpOauthRow |
       ? await decryptClientInformation(row.clientInformation)
       : null,
     tokens: row.tokens ? await decryptTokens(row.tokens) : null,
-    codeVerifier: row.codeVerifier,
+    codeVerifier: row.codeVerifier ? (await decryptSecret(row.codeVerifier)).decrypted : null,
     state: row.state,
   }
 }
@@ -144,9 +144,10 @@ export async function saveTokens(rowId: string, tokens: OAuthTokens): Promise<vo
 }
 
 export async function saveCodeVerifier(rowId: string, verifier: string): Promise<void> {
+  const { encrypted } = await encryptSecret(verifier)
   await db
     .update(mcpServerOauth)
-    .set({ codeVerifier: verifier, updatedAt: new Date() })
+    .set({ codeVerifier: encrypted, updatedAt: new Date() })
     .where(eq(mcpServerOauth.id, rowId))
 }