use-api-keys.mdx

title	`useAPIKeys()`
description	Access and manage API keys in your React application with Clerk's useAPIKeys() hook.
sdk	nextjs, react

The useAPIKeys() hook provides access to the API keys associated with a user or organization. It returns a paginated list of APIKeyResource objects and includes methods for managing pagination.

Parameters

useAPIKeys() accepts a single optional object with the following properties:

- `subject` - `string`

The ID of the user or Organization to fetch API keys for. If not provided, defaults to the Active Organization if available, otherwise defaults to the current user.

---

• query
• string

A search query to filter API keys by name.

---

• enabled
• boolean

If true, a request will be triggered when the hook is mounted. Defaults to true.

---

• infinite
• boolean

If true, newly fetched data will be appended to the existing list rather than replacing it. Useful for implementing infinite scroll functionality. Defaults to false.

---

• initialPage
• number

A number that specifies which page to fetch. For example, if initialPage is set to 10, it will skip the first 9 pages and fetch the 10th page. Defaults to 1.

---

• pageSize
• number

A number that specifies the maximum number of results to return per page. Defaults to 10.

---

• keepPreviousData
• boolean

If true, the previous data will be kept in the cache until new data is fetched. Defaults to false.

Returns

Examples

Basic usage

The following example demonstrates how to fetch and display a user's API keys.

```tsx {{ filename: 'app/api-keys/page.tsx' }} 'use client'

import { useAPIKeys } from '@clerk/nextjs'

export default function APIKeysList() { const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({ pageSize: 10, })

if (isLoading) {
  return <div>Loading...</div>
}

if (!data || data.length === 0) {
  return <div>No API keys found.</div>
}

return (
  <div>
    <ul>
      {data.map((apiKey) => (
        <li key={apiKey.id}>
          <strong>{apiKey.name}</strong>
          <br />
          Subject: {apiKey.subject}
          <br />
          Revoked: {apiKey.revoked ? 'Yes' : 'No'}
          <br />
          Created: {apiKey.createdAt.toLocaleDateString()}
        </li>
      ))}
    </ul>

    <div>
      Page {page} of {pageCount}
    </div>
    <button onClick={() => fetchPrevious()}>Previous</button>
    <button onClick={() => fetchNext()}>Next</button>
  </div>
)

}

</If>

<If sdk="react">
```tsx {{ filename: 'src/pages/api-keys/APIKeysList.tsx' }}
import { useAPIKeys } from '@clerk/react'

export default function APIKeysList() {
  const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({
    pageSize: 10,
  })

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!data || data.length === 0) {
    return <div>No API keys found.</div>
  }

  return (
    <div>
      <ul>
        {data.map((apiKey) => (
          <li key={apiKey.id}>
            <strong>{apiKey.name}</strong>
            <br />
            Subject: {apiKey.subject}
            <br />
            Revoked: {apiKey.revoked ? 'Yes' : 'No'}
            <br />
            Created: {apiKey.createdAt.toLocaleDateString()}
          </li>
        ))}
      </ul>

      <div>
        Page {page} of {pageCount}
      </div>
      <button onClick={() => fetchPrevious()}>Previous</button>
      <button onClick={() => fetchNext()}>Next</button>
    </div>
  )
}

Infinite pagination

The following example demonstrates how to implement infinite scrolling with API keys.

```tsx {{ filename: 'app/api-keys/infinite/page.tsx' }} 'use client'

import { useAPIKeys } from '@clerk/nextjs'

export default function InfiniteAPIKeys() { const { data, isLoading, hasNextPage, fetchNext } = useAPIKeys({ infinite: true, pageSize: 20, })

if (isLoading) {
  return <div>Loading...</div>
}

if (!data || data.length === 0) {
  return <div>No API keys found.</div>
}

return (
  <div>
    <ul>
      {data.map((apiKey) => (
        <li key={apiKey.id}>
          <strong>{apiKey.name}</strong>
          <br />
          Subject: {apiKey.subject}
          <br />
          Revoked: {apiKey.revoked ? 'Yes' : 'No'}
        </li>
      ))}
    </ul>

    {hasNextPage && <button onClick={() => fetchNext()}>Load more API keys</button>}
  </div>
)

}

</If>

<If sdk="react">
```tsx {{ filename: 'src/pages/api-keys/InfiniteAPIKeys.tsx' }}
import { useAPIKeys } from '@clerk/react'

export default function InfiniteAPIKeys() {
  const { data, isLoading, hasNextPage, fetchNext } = useAPIKeys({
    infinite: true,
    pageSize: 20,
  })

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!data || data.length === 0) {
    return <div>No API keys found.</div>
  }

  return (
    <div>
      <ul>
        {data.map((apiKey) => (
          <li key={apiKey.id}>
            <strong>{apiKey.name}</strong>
            <br />
            Subject: {apiKey.subject}
            <br />
            Revoked: {apiKey.revoked ? 'Yes' : 'No'}
          </li>
        ))}
      </ul>

      {hasNextPage && <button onClick={() => fetchNext()}>Load more API keys</button>}
    </div>
  )
}

With search query

The following example demonstrates how to use the query parameter to search API keys by name.

```tsx {{ filename: 'app/api-keys/search/page.tsx' }} 'use client'

import { useAPIKeys } from '@clerk/nextjs' import { useState } from 'react'

export default function SearchAPIKeys() { const [search, setSearch] = useState('')

// Consider debouncing `search` in production to avoid firing a request on every keystroke
const { data, isLoading } = useAPIKeys({
  query: search,
  pageSize: 10,
})

return (
  <div>
    <input
      type="text"
      placeholder="Search API keys..."
      value={search}
      onChange={(e) => setSearch(e.target.value)}
    />

    {isLoading ? (
      <div>Loading...</div>
    ) : !data || data.length === 0 ? (
      <div>No API keys found.</div>
    ) : (
      <ul>
        {data.map((apiKey) => (
          <li key={apiKey.id}>
            <strong>{apiKey.name}</strong> - {apiKey.subject}
          </li>
        ))}
      </ul>
    )}
  </div>
)

}

</If>

<If sdk="react">
```tsx {{ filename: 'src/pages/api-keys/SearchAPIKeys.tsx' }}
import { useAPIKeys } from '@clerk/react'
import { useState } from 'react'

export default function SearchAPIKeys() {
  const [search, setSearch] = useState('')

  // Consider debouncing `search` in production to avoid firing a request on every keystroke
  const { data, isLoading } = useAPIKeys({
    query: search,
    pageSize: 10,
  })

  return (
    <div>
      <input
        type="text"
        placeholder="Search API keys..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {isLoading ? (
        <div>Loading...</div>
      ) : !data || data.length === 0 ? (
        <div>No API keys found.</div>
      ) : (
        <ul>
          {data.map((apiKey) => (
            <li key={apiKey.id}>
              <strong>{apiKey.name}</strong> - {apiKey.subject}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}