> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useunitpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UnitPayProvider

> Provider component that configures the SDK for your React app

The `UnitPayProvider` wraps your application and provides the UnitPay client to every hook and component. It manages the [TanStack Query](https://tanstack.com/query) cache and the portal-session token lifecycle (automatic refresh).

## Usage

Mint a portal token on your server, then pass it — along with the `customerId` — to the provider:

```tsx theme={null}
// app/providers.tsx
import { UnitPayProvider } from '@unitpay/react';

export function Providers({
  children,
  customerId,
  portalToken,
}: {
  children: React.ReactNode;
  customerId: string;
  portalToken: string;
}) {
  return (
    <UnitPayProvider
      config={{
        apiBaseUrl: 'https://api.useunitpay.com/v1',
        customerId,
        portalToken,
        onSessionExpired: () => {
          window.location.href = '/login';
        },
      }}
    >
      {children}
    </UnitPayProvider>
  );
}
```

<Note>
  The `portalToken` is a short-lived JWT minted server-side with `@unitpay/node`
  (`unitpay.portalSessions.create({ customerId })`). The SDK refreshes it automatically — you
  do nothing after the initial mint. `onSessionExpired` fires only when refresh fails for good.
</Note>

## Props

<ParamField body="config" type="UnitPayConfig" required>
  Configuration object (see below).
</ParamField>

<ParamField body="queryClient" type="QueryClient">
  Your own TanStack Query client. The provider creates a default one if omitted.
</ParamField>

## `config` (UnitPayConfig)

<ParamField body="customerId" type="string">
  The customer this provider acts for. Required for customer-scoped hooks.
</ParamField>

<ParamField body="portalToken" type="string">
  Portal-session JWT minted server-side by your backend. Refreshed automatically by the SDK.
</ParamField>

<ParamField body="apiBaseUrl" type="string">
  UnitPay API base URL. Defaults to `https://api.useunitpay.com/v1`.
</ParamField>

<ParamField body="proxyBaseUrl" type="string">
  Route calls through a same-origin proxy (see the [Next.js adapter](/react/next-adapter)). Takes precedence over `apiBaseUrl`.
</ParamField>

<ParamField body="productId" type="string">
  Pin a product for multi-product orgs. Hooks like `usePricing()` prefer this; single-product orgs can omit it (the SDK auto-resolves the only product).
</ParamField>

<ParamField body="fetch" type="typeof fetch">
  Custom `fetch` implementation (SSR, instrumentation).
</ParamField>

<ParamField body="onSessionExpired" type="() => void">
  Fires once when token refresh fails terminally (revoked, expired beyond max TTL, customer archived). Flip your UI to a "session expired" screen.
</ParamField>