CrovverProvider

CrovverProvider initializes the SDK, fetches the tenant’s subscription status, and makes it available to all child components via context.

Props

<CrovverProvider config={CrovverConfig}>
  {children}
</CrovverProvider>

`config`

Prop	Type	Required	Default	Description
`publicKey`	`string`	✅	—	Your public API key (`pk_live_...`)
`tenantId`	`string`	✅	—	The current user/workspace ID from your app
`tenantName`	`string`		—	Display name of the tenant (e.g. org or workspace name). Passed to checkout/portal so Crovver can show it in the UI
`userId`	`string`		—	The logged-in user’s ID. Used to deduplicate tenant owner records across checkout sessions. Recommended.
`apiUrl`	`string`		SDK default	Override the Crovver API base URL
`portalUrl`	`string`		SDK default	Override the billing portal URL
`pollInterval`	`number`		`0`	Auto-refresh interval in ms. `0` = disabled
`debug`	`boolean`		`false`	Log SDK activity to the console
`onUnauthenticated`	`() => void`		—	Called when subscription is inactive
`metadata.userEmail`	`string`		—	User’s email, passed to checkout/portal token requests
`metadata.userName`	`string`		—	User’s display name, passed to checkout/portal token requests

Example

<CrovverProvider
  config={{
    publicKey: process.env.NEXT_PUBLIC_CROVVER_PUBLIC_KEY!,
    tenantId: session.user.workspaceId,
    tenantName: session.user.workspaceName,
    userId: session.user.id,
    pollInterval: 30000,       // Refresh every 30 seconds
    debug: process.env.NODE_ENV === 'development',
    onUnauthenticated: () => router.push('/pricing'),
  }}
>
  <App />
</CrovverProvider>

Dynamic `tenantId`

If your user can switch between workspaces, you can change tenantId dynamically. The provider will re-fetch the subscription for the new tenant when the value changes:

<CrovverProvider
  config={{
    publicKey: process.env.NEXT_PUBLIC_CROVVER_PUBLIC_KEY!,
    tenantId: activeWorkspace.id,   // Changes when user switches workspace
    userId: currentUser.id,
  }}
>

Server Components (Next.js)

CrovverProvider is a client component. If your root layout is a server component, wrap the provider in a "use client" file:

// components/CrovverClientProvider.tsx
"use client";
import { CrovverProvider } from 'crovver-react';

export function CrovverClientProvider({ tenantId, userId, children }) {
  return (
    <CrovverProvider
      config={{
        publicKey: process.env.NEXT_PUBLIC_CROVVER_PUBLIC_KEY!,
        tenantId,
        userId,
      }}
    >
      {children}
    </CrovverProvider>
  );
}

Overview

Core Concepts

Authentication

SDKs

Guides

CrovverProvider

Props

`config`

Example

Dynamic `tenantId`

Server Components (Next.js)

​Props

​config

​Example

​Dynamic tenantId

​Server Components (Next.js)

Props

`config`

Example

Dynamic `tenantId`

Server Components (Next.js)