useApiKeysCommands() — supabase Function Reference

Architecture documentation for the useApiKeysCommands() function in ApiKeys.tsx from the supabase codebase.

Function tsx ContentManagement AccessControl called by 1

Entity Profile

ContentManagement→ AccessControl→ useApiKeysCommands() — supabase Function Reference

Dependency Diagram

graph TD
  f2f18bd7_7eb5_c968_b16a_ee126487d30b["useApiKeysCommands()"]
  7902296a_39c1_2b01_0b22_d5c1b0ad688b["StudioCommandMenu()"]
  7902296a_39c1_2b01_0b22_d5c1b0ad688b -->|calls| f2f18bd7_7eb5_c968_b16a_ee126487d30b
  style f2f18bd7_7eb5_c968_b16a_ee126487d30b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/App/CommandMenu/ApiKeys.tsx lines 24–166

export function useApiKeysCommands() {
  const setIsOpen = useSetCommandMenuOpen()
  const resetCommandMenu = useResetCommandMenu()
  const setPage = useSetPage()

  const { data: project } = useSelectedProjectQuery()
  const ref = project?.ref || '_'

  const { can: canReadAPIKeys, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
    PermissionAction.SECRETS_READ,
    '*'
  )

  const { data: apiKeys } = useAPIKeysQuery(
    { projectRef: project?.ref, reveal: true },
    { enabled: canReadAPIKeys }
  )
  const commands = useMemo(() => {
    const { anonKey, serviceKey, publishableKey, allSecretKeys } = canReadAPIKeys
      ? getKeys(apiKeys)
      : {}

    return [
      project &&
        publishableKey && {
          id: 'publishable-key',
          name: `Copy publishable key`,
          action: () => {
            copyToClipboard(publishableKey.api_key ?? '', () => {
              toast.success('Publishable key copied to clipboard')
            })
            setIsOpen(false)
            resetCommandMenu()
          },
          badge: () => (
            <span className="flex items-center gap-x-1">
              <Badge>Project: {project?.name}</Badge>
              <Badge>{publishableKey.type}</Badge>
            </span>
          ),
          icon: () => <Key />,
        },
      ...(project && allSecretKeys
        ? allSecretKeys.map((key) => ({
            id: key.id,
            name: `Copy secret key (${key.name})`,
            action: () => {
              copyToClipboard(key.api_key ?? '', () => {
                toast.success('Secret key copied to clipboard')
              })
              setIsOpen(false)
              resetCommandMenu()
            },
            badge: () => (
              <span className="flex items-center gap-x-1">
                <Badge>Project: {project?.name}</Badge>
                <Badge>{key.type}</Badge>
              </span>
            ),
            icon: () => <Key />,
          }))
        : []),
      project &&
        anonKey && {
          id: 'anon-key',
          name: `Copy anonymous API key`,
          action: () => {
            copyToClipboard(anonKey.api_key ?? '', () => {
              toast.success('Anonymous API key copied to clipboard')
            })
            setIsOpen(false)
            resetCommandMenu()
          },
          badge: () => (
            <span className="flex items-center gap-x-1">
              <Badge>Project: {project?.name}</Badge>
              <Badge>Public</Badge>
              <Badge>{anonKey.type}</Badge>
            </span>
          ),
          icon: () => <Key />,
        },
      project &&
        serviceKey && {
          id: 'service-key',
          name: `Copy service API key`,
          action: () => {
            copyToClipboard(serviceKey.api_key ?? '', () => {
              toast.success('Service key copied to clipboard')
            })
            setIsOpen(false)
            resetCommandMenu()
          },
          badge: () => (
            <span className="flex items-center gap-x-1">
              <Badge>Project: {project?.name}</Badge>
              <Badge variant="destructive">Secret</Badge>
              <Badge>{serviceKey.type}</Badge>
            </span>
          ),
          icon: () => <Key />,
        },
      !(anonKey || serviceKey) && {
        id: 'api-keys-project-settings',
        name: 'See API keys in Project Settings',
        route: `/project/${ref}/settings/api-keys`,
        icon: () => <Key />,
      },
    ].filter(Boolean) as ICommand[]
  }, [apiKeys, canReadAPIKeys, project, ref, resetCommandMenu, setIsOpen])

  useRegisterPage(
    API_KEYS_PAGE_NAME,
    {
      type: PageType.Commands,
      sections: [
        {
          id: 'api-keys',
          name: 'API keys',
          commands,
        },
      ],
    },
    { deps: [commands], enabled: !!project && commands.length > 0 }
  )

  useRegisterCommands(
    COMMAND_MENU_SECTIONS.ACTIONS,
    [
      {
        id: 'api-keys',
        name: 'Get API keys...',
        action: () => setPage(API_KEYS_PAGE_NAME),
        icon: () => <Key />,
      },
    ],
    {
      enabled: !!project && commands.length > 0,
      orderSection: orderCommandSectionsByPriority,
      sectionMeta: { priority: 3 },
    }
  )
}