tool oauth

web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx

@@ -5,15 +5,16 @@ import {
 import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import ApiKeyModal from './api-key-modal'
+import type { PluginPayload } from '../types'
 
 export type AddApiKeyButtonProps = {
-  provider?: string
+  pluginPayload: PluginPayload
   buttonVariant?: ButtonProps['variant']
   buttonText?: string
   disabled?: boolean
 }
 const AddApiKeyButton = ({
-  provider = '',
+  pluginPayload,
   buttonVariant = 'secondary-accent',
   buttonText = 'use api key',
   disabled,
@@ -33,7 +34,7 @@ const AddApiKeyButton = ({
       {
         isApiKeyModalOpen && (
           <ApiKeyModal
-            provider={provider}
+            pluginPayload={pluginPayload}
             onClose={() => setIsApiKeyModalOpen(false)}
           />
         )

web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx

@@ -7,8 +7,10 @@ import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import OAuthClientSettings from './oauth-client-settings'
 import cn from '@/utils/classnames'
+import type { PluginPayload } from '../types'
 
 export type AddOAuthButtonProps = {
+  pluginPayload: PluginPayload
   buttonVariant?: ButtonProps['variant']
   buttonText?: string
   className?: string

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -8,28 +8,29 @@ import { useTranslation } from 'react-i18next'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Modal from '@/app/components/base/modal/modal'
-import {
-  useAddPluginToolCredential,
-  useGetPluginToolCredentialSchema,
-  useInvalidPluginToolCredentialInfo,
-  useUpdatePluginToolCredential,
-} from '@/service/use-plugins-auth'
 import { CredentialTypeEnum } from '../types'
 import { transformFormSchemasSecretInput } from '../utils'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import type { FromRefObject } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useToastContext } from '@/app/components/base/toast'
+import type { PluginPayload } from '../types'
+import {
+  useAddPluginCredentialHook,
+  useGetPluginCredentialSchemaHook,
+  useInvalidPluginCredentialInfoHook,
+  useUpdatePluginCredentialHook,
+} from '../hooks/use-credential'
 
 export type ApiKeyModalProps = {
-  provider: string
+  pluginPayload: PluginPayload
   onClose?: () => void
   editValues?: Record<string, any>
   onRemove?: () => void
   disabled?: boolean
 }
 const ApiKeyModal = ({
-  provider,
+  pluginPayload,
   onClose,
   editValues,
   onRemove,
@@ -37,7 +38,7 @@ const ApiKeyModal = ({
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
-  const { data = [] } = useGetPluginToolCredentialSchema(provider, CredentialTypeEnum.API_KEY)
+  const { data = [] } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
   const formSchemas = useMemo(() => {
     return [
       {
@@ -49,9 +50,9 @@ const ApiKeyModal = ({
       ...data,
     ]
   }, [data])
-  const { mutateAsync: addPluginToolCredential } = useAddPluginToolCredential(provider)
-  const { mutateAsync: updatePluginToolCredential } = useUpdatePluginToolCredential(provider)
-  const invalidatePluginToolCredentialInfo = useInvalidPluginToolCredentialInfo(provider)
+  const { mutateAsync: addPluginCredential } = useAddPluginCredentialHook(pluginPayload)
+  const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
+  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const formRef = useRef<FromRefObject>(null)
   const handleConfirm = useCallback(async () => {
     const form = formRef.current?.getForm()
@@ -73,7 +74,7 @@ const ApiKeyModal = ({
     const transformedValues = transformFormSchemasSecretInput(isPristineSecretInputNames, values)
 
     if (editValues) {
-      await updatePluginToolCredential({
+      await updatePluginCredential({
         credentials: transformedValues,
         credential_id: __credential_id__,
         type: CredentialTypeEnum.API_KEY,
@@ -81,7 +82,7 @@ const ApiKeyModal = ({
       })
     }
     else {
-      await addPluginToolCredential({
+      await addPluginCredential({
         credentials: transformedValues,
         type: CredentialTypeEnum.API_KEY,
         name: __name__ || '',
@@ -93,8 +94,8 @@ const ApiKeyModal = ({
     })
 
     onClose?.()
-    invalidatePluginToolCredentialInfo()
-  }, [addPluginToolCredential, onClose, invalidatePluginToolCredentialInfo, updatePluginToolCredential, notify, t, editValues, formSchemas])
+    invalidatePluginCredentialInfo()
+  }, [addPluginCredential, onClose, invalidatePluginCredentialInfo, updatePluginCredential, notify, t, editValues, formSchemas])
 
   return (
     <Modal

web/app/components/plugins/plugin-auth/authorize/index.tsx

@@ -6,9 +6,10 @@ import AddOAuthButton from './add-oauth-button'
 import type { AddOAuthButtonProps } from './add-oauth-button'
 import AddApiKeyButton from './add-api-key-button'
 import type { AddApiKeyButtonProps } from './add-api-key-button'
+import type { PluginPayload } from '../types'
 
 type AuthorizeProps = {
-  provider?: string
+  pluginPayload: PluginPayload
   theme?: 'primary' | 'secondary'
   showDivider?: boolean
   canOAuth?: boolean
@@ -16,7 +17,7 @@ type AuthorizeProps = {
   disabled?: boolean
 }
 const Authorize = ({
-  provider = '',
+  pluginPayload,
   theme = 'primary',
   showDivider = true,
   canOAuth,
@@ -32,28 +33,30 @@ const Authorize = ({
         buttonLeftClassName: 'hover:bg-components-button-secondary-bg-hover',
         buttonRightClassName: 'hover:bg-components-button-secondary-bg-hover',
         dividerClassName: 'bg-divider-regular opacity-100',
+        pluginPayload,
       }
     }
 
     return {
       buttonText: !canApiKey ? 'Use OAuth Authorization' : 'Use OAuth',
+      pluginPayload,
     }
-  }, [canApiKey, theme])
+  }, [canApiKey, theme, pluginPayload])
 
   const apiKeyButtonProps: AddApiKeyButtonProps = useMemo(() => {
     if (theme === 'secondary') {
       return {
-        provider,
+        pluginPayload,
         buttonVariant: 'secondary',
         buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Add API Key',
       }
     }
     return {
-      provider,
+      pluginPayload,
       buttonText: !canOAuth ? 'API Key Authorization Configuration' : 'Use API Key',
       buttonVariant: !canOAuth ? 'primary' : 'secondary-accent',
     }
-  }, [canOAuth, theme, provider])
+  }, [canOAuth, theme, pluginPayload])
 
   return (
     <>

web/app/components/plugins/plugin-auth/authorized-in-node.tsx

@@ -1,26 +1,28 @@
 import {
   memo,
   useCallback,
-  useMemo,
   useState,
 } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import cn from '@/utils/classnames'
-import type { Credential } from './types'
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
 import {
   Authorized,
   usePluginAuth,
 } from '.'
 
 type AuthorizedInNodeProps = {
-  provider: string
+  pluginPayload: PluginPayload
   onAuthorizationItemClick: (id: string) => void
   credentialId?: string
 }
 const AuthorizedInNode = ({
-  provider = '',
+  pluginPayload,
   onAuthorizationItemClick,
   credentialId,
 }: AuthorizedInNodeProps) => {
@@ -30,29 +32,40 @@ const AuthorizedInNode = ({
     canOAuth,
     credentials,
     disabled,
-  } = usePluginAuth(provider, isOpen)
-  const label = useMemo(() => {
-    if (!credentialId)
-      return 'Workspace default'
-    const credential = credentials.find(c => c.id === credentialId)
-
-    if (!credential)
-      return 'Auth removed'
-
-    return credential.name
-  }, [credentials, credentialId])
+  } = usePluginAuth(pluginPayload, isOpen || !!credentialId)
   const renderTrigger = useCallback((open?: boolean) => {
+    let label = ''
+    let removed = false
+    if (!credentialId) {
+      label = 'Workspace default'
+    }
+    else {
+      const credential = credentials.find(c => c.id === credentialId)
+      label = credential ? credential.name : 'Auth removed'
+      removed = !credential
+    }
     return (
       <Button
         size='small'
-        className={cn(open && 'bg-components-button-ghost-bg-hover')}
+        className={cn(
+          open && !removed && 'bg-components-button-ghost-bg-hover',
+          removed && 'bg-transparent text-text-destructive',
+        )}
       >
-        <Indicator className='mr-1.5' />
+        <Indicator
+          className='mr-1.5'
+          color={removed ? 'red' : 'green'}
+        />
         {label}
-        <RiArrowDownSLine className='h-3.5 w-3.5 text-components-button-ghost-text' />
+        <RiArrowDownSLine
+          className={cn(
+            'h-3.5 w-3.5 text-components-button-ghost-text',
+            removed && 'text-text-destructive',
+          )}
+        />
       </Button>
     )
-  }, [label])
+  }, [credentialId, credentials])
   const extraAuthorizationItems: Credential[] = [
     {
       id: '__workspace_default__',
@@ -72,7 +85,7 @@ const AuthorizedInNode = ({
 
   return (
     <Authorized
-      provider={provider}
+      pluginPayload={pluginPayload}
       credentials={credentials}
       canOAuth={canOAuth}
       canApiKey={canApiKey}

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -25,15 +25,16 @@ import type { Credential } from '../types'
 import { CredentialTypeEnum } from '../types'
 import ApiKeyModal from '../authorize/api-key-modal'
 import Item from './item'
-import {
-  useDeletePluginToolCredential,
-  useInvalidPluginToolCredentialInfo,
-  useSetPluginToolDefaultCredential,
-} from '@/service/use-plugins-auth'
 import { useToastContext } from '@/app/components/base/toast'
+import type { PluginPayload } from '../types'
+import {
+  useDeletePluginCredentialHook,
+  useInvalidPluginCredentialInfoHook,
+  useSetPluginDefaultCredentialHook,
+} from '../hooks/use-credential'
 
 type AuthorizedProps = {
-  provider: string
+  pluginPayload: PluginPayload
   credentials: Credential[]
   canOAuth?: boolean
   canApiKey?: boolean
@@ -50,7 +51,7 @@ type AuthorizedProps = {
   extraAuthorizationItems?: Credential[]
 }
 const Authorized = ({
-  provider,
+  pluginPayload,
   credentials,
   canOAuth,
   canApiKey,
@@ -80,8 +81,8 @@ const Authorized = ({
   const apiKeyCredentials = credentials.filter(credential => credential.credential_type === CredentialTypeEnum.API_KEY)
   const pendingOperationCredentialId = useRef<string | null>(null)
   const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
-  const { mutateAsync: deletePluginToolCredential } = useDeletePluginToolCredential(provider)
-  const invalidatePluginToolCredentialInfo = useInvalidPluginToolCredentialInfo(provider)
+  const { mutateAsync: deletePluginCredential } = useDeletePluginCredentialHook(pluginPayload)
+  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const openConfirm = useCallback((credentialId?: string) => {
     if (credentialId)
       pendingOperationCredentialId.current = credentialId
@@ -98,15 +99,15 @@ const Authorized = ({
       return
     }
 
-    await deletePluginToolCredential({ credential_id: pendingOperationCredentialId.current })
+    await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
     notify({
       type: 'success',
       message: t('common.api.actionSuccess'),
     })
-    invalidatePluginToolCredentialInfo()
+    invalidatePluginCredentialInfo()
     setDeleteCredentialId(null)
     pendingOperationCredentialId.current = null
-  }, [deletePluginToolCredential, invalidatePluginToolCredentialInfo, notify, t])
+  }, [deletePluginCredential, invalidatePluginCredentialInfo, notify, t])
   const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
   const handleEdit = useCallback((id: string, values: Record<string, any>) => {
     pendingOperationCredentialId.current = id
@@ -115,15 +116,15 @@ const Authorized = ({
   const handleRemove = useCallback(() => {
     setDeleteCredentialId(pendingOperationCredentialId.current)
   }, [])
-  const { mutateAsync: setPluginToolDefaultCredential } = useSetPluginToolDefaultCredential(provider)
+  const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
   const handleSetDefault = useCallback(async (id: string) => {
-    await setPluginToolDefaultCredential(id)
+    await setPluginDefaultCredential(id)
     notify({
       type: 'success',
       message: t('common.api.actionSuccess'),
     })
-    invalidatePluginToolCredentialInfo()
-  }, [setPluginToolDefaultCredential, invalidatePluginToolCredentialInfo, notify, t])
+    invalidatePluginCredentialInfo()
+  }, [setPluginDefaultCredential, invalidatePluginCredentialInfo, notify, t])
 
   return (
     <>
@@ -224,7 +225,7 @@ const Authorized = ({
             <div className='h-[1px] bg-divider-subtle'></div>
             <div className='p-2'>
               <Authorize
-                provider={provider}
+                pluginPayload={pluginPayload}
                 theme='secondary'
                 showDivider={false}
                 canOAuth={canOAuth}
@@ -249,7 +250,7 @@ const Authorized = ({
       {
         !!editValues && (
           <ApiKeyModal
-            provider={provider}
+            pluginPayload={pluginPayload}
             editValues={editValues}
             onClose={() => {
               setEditValues(null)

web/app/components/plugins/plugin-auth/hooks/use-credential.ts

@@ -0,0 +1,53 @@
+import {
+  useAddPluginCredential,
+  useDeletePluginCredential,
+  useGetPluginCredentialInfo,
+  useGetPluginCredentialSchema,
+  useInvalidPluginCredentialInfo,
+  useSetPluginDefaultCredential,
+  useUpdatePluginCredential,
+} from '@/service/use-plugins-auth'
+import { useGetApi } from './use-get-api'
+import type { PluginPayload } from '../types'
+import type { CredentialTypeEnum } from '../types'
+
+export const useGetPluginCredentialInfoHook = (pluginPayload: PluginPayload, enable?: boolean) => {
+  const apiMap = useGetApi(pluginPayload)
+  return useGetPluginCredentialInfo(enable ? apiMap.getCredentialInfo : '')
+}
+
+export const useDeletePluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useDeletePluginCredential(apiMap.deleteCredential)
+}
+
+export const useInvalidPluginCredentialInfoHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useInvalidPluginCredentialInfo(apiMap.getCredentialInfo)
+}
+
+export const useSetPluginDefaultCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useSetPluginDefaultCredential(apiMap.setDefaultCredential)
+}
+
+export const useGetPluginCredentialSchemaHook = (pluginPayload: PluginPayload, credentialType: CredentialTypeEnum) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useGetPluginCredentialSchema(apiMap.getCredentialSchema(credentialType))
+}
+
+export const useAddPluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useAddPluginCredential(apiMap.addCredential)
+}
+
+export const useUpdatePluginCredentialHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useUpdatePluginCredential(apiMap.updateCredential)
+}

web/app/components/plugins/plugin-auth/hooks/use-get-api.ts

@@ -0,0 +1,39 @@
+import {
+  AuthCategory,
+} from '../types'
+import type {
+  CredentialTypeEnum,
+  PluginPayload,
+} from '../types'
+
+export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayload) => {
+  if (category === AuthCategory.tool) {
+    return {
+      getCredentialInfo: `/workspaces/current/tool-provider/builtin/${provider}/credential/info`,
+      setDefaultCredential: `/workspaces/current/tool-provider/builtin/${provider}/default-credential`,
+      getCredentials: `/workspaces/current/tool-provider/builtin/${provider}/credentials`,
+      addCredential: `/workspaces/current/tool-provider/builtin/${provider}/add`,
+      updateCredential: `/workspaces/current/tool-provider/builtin/${provider}/update`,
+      deleteCredential: `/workspaces/current/tool-provider/builtin/${provider}/delete`,
+      getCredentialSchema: (credential_type: CredentialTypeEnum) => `/workspaces/current/tool-provider/builtin/${provider}/credential/schema/${credential_type}`,
+      getOauthUrl: `/oauth/plugin/${provider}/tool/authorization-url`,
+      getOauthClientSchema: `/workspaces/current/tool-provider/builtin/${provider}/oauth/client-schema`,
+      setCustomOauthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+      getCustomOAuthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+    }
+  }
+
+  return {
+    getCredentialInfo: '',
+    setDefaultCredential: '',
+    getCredentials: '',
+    addCredential: '',
+    updateCredential: '',
+    deleteCredential: '',
+    getCredentialSchema: () => '',
+    getOauthUrl: '',
+    getOauthClientSchema: '',
+    setCustomOauthClient: '',
+    getCustomOAuthClient: '',
+  }
+}

web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts

@@ -1,9 +1,10 @@
 import { useAppContext } from '@/context/app-context'
-import { useGetPluginToolCredentialInfo } from '@/service/use-plugins-auth'
-import { CredentialTypeEnum } from './types'
+import { useGetPluginCredentialInfoHook } from './use-credential'
+import { CredentialTypeEnum } from '../types'
+import type { PluginPayload } from '../types'
 
-export const usePluginAuth = (provider: string, enable?: boolean) => {
-  const { data } = useGetPluginToolCredentialInfo(enable ? provider : '')
+export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) => {
+  const { data } = useGetPluginCredentialInfoHook(pluginPayload, enable)
   const { isCurrentWorkspaceManager } = useAppContext()
   const isAuthorized = !!data?.credentials.length
   const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
@@ -14,7 +15,6 @@ export const usePluginAuth = (provider: string, enable?: boolean) => {
     canOAuth,
     canApiKey,
     credentials: data?.credentials || [],
-    provider,
     disabled: !isCurrentWorkspaceManager,
   }
 }

web/app/components/plugins/plugin-auth/index.tsx

@@ -1,4 +1,5 @@
 export { default as PluginAuth } from './plugin-auth'
 export { default as Authorized } from './authorized'
 export { default as AuthorizedInNode } from './authorized-in-node'
-export { usePluginAuth } from './hooks'
+export { usePluginAuth } from './hooks/use-plugin-auth'
+export * from './types'

web/app/components/plugins/plugin-auth/plugin-auth.tsx

@@ -1,44 +1,45 @@
 import { memo } from 'react'
 import Authorize from './authorize'
 import Authorized from './authorized'
-import { useAppContext } from '@/context/app-context'
-import { useGetPluginToolCredentialInfo } from '@/service/use-plugins-auth'
-import { CredentialTypeEnum } from './types'
+import type { PluginPayload } from './types'
+import { usePluginAuth } from './hooks/use-plugin-auth'
 
 type PluginAuthProps = {
-  provider?: string
+  pluginPayload: PluginPayload
   children?: React.ReactNode
 }
 const PluginAuth = ({
-  provider = '',
+  pluginPayload,
   children,
 }: PluginAuthProps) => {
-  const { data } = useGetPluginToolCredentialInfo(provider)
-  const { isCurrentWorkspaceManager } = useAppContext()
-  const isAuthorized = !!data?.credentials.length
-  const canOAuth = data?.supported_credential_types.includes(CredentialTypeEnum.OAUTH2)
-  const canApiKey = data?.supported_credential_types.includes(CredentialTypeEnum.API_KEY)
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+  } = usePluginAuth(pluginPayload, true)
 
   return (
     <>
       {
         !isAuthorized && (
           <Authorize
-            provider={provider}
+            pluginPayload={pluginPayload}
             canOAuth={canOAuth}
             canApiKey={canApiKey}
-            disabled={!isCurrentWorkspaceManager}
+            disabled={disabled}
           />
         )
       }
       {
         isAuthorized && !children && (
           <Authorized
-            provider={provider}
-            credentials={data?.credentials}
+            pluginPayload={pluginPayload}
+            credentials={credentials}
             canOAuth={canOAuth}
             canApiKey={canApiKey}
-            disabled={!isCurrentWorkspaceManager}
+            disabled={disabled}
           />
         )
       }

web/app/components/plugins/plugin-auth/types.ts

@@ -1,3 +1,14 @@
+export enum AuthCategory {
+  tool = 'tool',
+  datasource = 'datasource',
+  model = 'model',
+}
+
+export type PluginPayload = {
+  category: AuthCategory
+  provider: string
+}
+
 export enum CredentialTypeEnum {
   OAUTH2 = 'oauth2',
   API_KEY = 'api-key',

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -37,6 +37,7 @@ import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { PluginAuth } from '@/app/components/plugins/plugin-auth'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
 import { useAllToolProviders } from '@/service/use-tools'
 
 const i18nPrefix = 'plugin.action'
@@ -275,7 +276,10 @@ const DetailHeader = ({
       {
         category === PluginType.tool && (
           <PluginAuth
-            provider={provider?.name}
+            pluginPayload={{
+              provider: provider?.name || '',
+              category: AuthCategory.tool,
+            }}
           />
         )
       }

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -63,6 +63,7 @@ import {
   AuthorizedInNode,
   PluginAuth,
 } from '@/app/components/plugins/plugin-auth'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
 import { canFindTool } from '@/utils'
 
 type BasePanelProps = {
@@ -227,14 +228,14 @@ const BasePanel: FC<BasePanelProps> = ({
   const showPluginAuth = useMemo(() => {
     return data.type === BlockEnum.Tool && currCollection?.allow_delete && !currCollection.is_team_authorization
   }, [currCollection, data.type])
-  const handleAuthorizationItemClick = useCallback((id: string) => {
+  const handleAuthorizationItemClick = useCallback((credential_id: string) => {
     handleNodeDataUpdate({
       id,
       data: {
-        credential_id: id === '__workspace_default__' ? undefined : id,
+        credential_id: credential_id === '__workspace_default__' ? undefined : credential_id,
       },
     })
-  }, [handleNodeDataUpdate])
+  }, [handleNodeDataUpdate, id])
 
   if(logParams.showSpecialResultPanel) {
     return (
@@ -371,7 +372,10 @@ const BasePanel: FC<BasePanelProps> = ({
           {
             showPluginAuth && (
               <PluginAuth
-                provider={currCollection?.name}
+                pluginPayload={{
+                  provider: currCollection?.name || '',
+                  category: AuthCategory.tool,
+                }}
               >
                 <div className='pl-4'>
                   <Tab
@@ -392,7 +396,10 @@ const BasePanel: FC<BasePanelProps> = ({
                 {
                   currCollection?.allow_delete && (
                     <AuthorizedInNode
-                      provider={currCollection?.name}
+                      pluginPayload={{
+                        provider: currCollection?.name || '',
+                        category: AuthCategory.tool,
+                      }}
                       onAuthorizationItemClick={handleAuthorizationItemClick}
                       credentialId={data.credential_id}
                     />

web/service/use-plugins-auth.ts

@@ -12,48 +12,48 @@ import type { FormSchema } from '@/app/components/base/form/types'
 
 const NAME_SPACE = 'plugins-auth'
 
-export const useGetPluginToolCredentialInfo = (
-  provider: string,
+export const useGetPluginCredentialInfo = (
+  url: string,
 ) => {
   return useQuery({
-    enabled: !!provider,
-    queryKey: [NAME_SPACE, 'credential-info', provider],
+    enabled: !!url,
+    queryKey: [NAME_SPACE, 'credential-info', url],
     queryFn: () => get<{
         supported_credential_types: string[]
         credentials: Credential[]
         is_oauth_custom_client_enabled: boolean
-      }>(`/workspaces/current/tool-provider/builtin/${provider}/credential/info`),
+      }>(url),
     staleTime: 0,
   })
 }
 
-export const useInvalidPluginToolCredentialInfo = (
-  provider: string,
+export const useInvalidPluginCredentialInfo = (
+  url: string,
 ) => {
-  return useInvalid([NAME_SPACE, 'credential-info', provider])
+  return useInvalid([NAME_SPACE, 'credential-info', url])
 }
 
-export const useSetPluginToolDefaultCredential = (
-  provider: string,
+export const useSetPluginDefaultCredential = (
+  url: string,
 ) => {
   return useMutation({
     mutationFn: (id: string) => {
-      return post(`/workspaces/current/tool-provider/builtin/${provider}/default-credential`, { body: { id } })
+      return post(url, { body: { id } })
     },
   })
 }
 
-export const useGetPluginToolCredentialList = (
-  provider: string,
+export const useGetPluginCredentialList = (
+  url: string,
 ) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'credential-list', provider],
-    queryFn: () => get(`/workspaces/current/tool-provider/builtin/${provider}/credentials`),
+    queryKey: [NAME_SPACE, 'credential-list', url],
+    queryFn: () => get(url),
   })
 }
 
-export const useAddPluginToolCredential = (
-  provider: string,
+export const useAddPluginCredential = (
+  url: string,
 ) => {
   return useMutation({
     mutationFn: (params: {
@@ -61,13 +61,13 @@ export const useAddPluginToolCredential = (
       type: CredentialTypeEnum
       name?: string
     }) => {
-      return post(`/workspaces/current/tool-provider/builtin/${provider}/add`, { body: params })
+      return post(url, { body: params })
     },
   })
 }
 
-export const useUpdatePluginToolCredential = (
-  provider: string,
+export const useUpdatePluginCredential = (
+  url: string,
 ) => {
   return useMutation({
     mutationFn: (params: {
@@ -76,64 +76,63 @@ export const useUpdatePluginToolCredential = (
       type: CredentialTypeEnum
       name?: string
     }) => {
-      return post(`/workspaces/current/tool-provider/builtin/${provider}/update`, { body: params })
+      return post(url, { body: params })
     },
   })
 }
 
-export const useDeletePluginToolCredential = (
-  provider: string,
+export const useDeletePluginCredential = (
+  url: string,
 ) => {
   return useMutation({
     mutationFn: (params: { credential_id: string }) => {
-      return post(`/workspaces/current/tool-provider/builtin/${provider}/delete`, { body: params })
+      return post(url, { body: params })
     },
   })
 }
 
-export const useGetPluginToolCredentialSchema = (
-  provider: string,
-  credential_type: CredentialTypeEnum,
+export const useGetPluginCredentialSchema = (
+  url: string,
 ) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'credential-schema', provider, credential_type],
-    queryFn: () => get<FormSchema[]>(`/workspaces/current/tool-provider/builtin/${provider}/credential/schema/${credential_type}`),
+    queryKey: [NAME_SPACE, 'credential-schema', url],
+    queryFn: () => get<FormSchema[]>(url),
   })
 }
 
-export const useGetPluginToolOAuthUrl = (
-  provider: string,
+export const useGetPluginOAuthUrl = (
+  url: string,
 ) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'oauth-url', provider],
-    queryFn: () => get(`oauth/plugin/${provider}/tool/authorization-url`),
+    queryKey: [NAME_SPACE, 'oauth-url', url],
+    queryFn: () => get(url),
   })
 }
 
-export const useGetPluginToolOAuthClientSchema = (
-  provider: string,
+export const useGetPluginOAuthClientSchema = (
+  url: string,
 ) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'oauth-client-schema', provider],
-    queryFn: () => get(`/workspaces/current/tool-provider/builtin/${provider}/oauth/client-schema`),
+    queryKey: [NAME_SPACE, 'oauth-client-schema', url],
+    queryFn: () => get(url),
   })
 }
 
-export const useSetPluginToolOAuthCustomClient = (
-  provider: string,
+export const useSetPluginOAuthCustomClient = (
+  url: string,
 ) => {
   return useMutation({
     mutationFn: (params) => {
-      return post(`/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`, { body: params })
+      return post(url, { body: params })
     },
   })
 }
 
-export const useGetPluginToolOAuthCustomClientSchema = (
-  provider: string,
+export const useGetPluginOAuthCustomClientSchema = (
+  url: string,
 ) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'oauth-custom-client-schema', provider],
-    queryFn: () => get(`/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`),
+    queryKey: [NAME_SPACE, 'oauth-custom-client-schema', url],
+    queryFn: () => get(url),
   })
 }