React hooks - Hookfish

Build user-facing React screens against Hookfish’s authenticated application API. Your configured auth provider verifies the user and current tenant. The browser receives connection metadata, never a broker credential.

Install dependencies

pnpm add @hookfish/hooks @tanstack/react-query react

Create the application client

Create the Hookfish hooks. The default base URL is /api/client and requests include application cookies.

import { createHookfishHooks } from '@hookfish/hooks'

export const hookfish = createHookfishHooks()

If your application uses bearer sessions, add the application session token to this client. Never add a Hookfish broker credential.

Query connections

Use the tenant-safe query hook.

import { hookfish } from './hookfish'

function GitHubConnections() {
  const connections = hookfish.useConnections()

  if (connections.isPending) return <p>Loading connections…</p>
  if (connections.isError) return <p>{connections.error.message}</p>

  return (
    <ul>
      {connections.data.connections.map((connection) => (
        <li key={connection.path}>{connection.path}</li>
      ))}
    </ul>
  )
}

@hookfish/hooks targets provider metadata, connection metadata, and disconnect operations. Call the explicit safe authorize and secret endpoints for connection setup. There is no browser access operation.