Skip to main content
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

PropTypeRequiredDefaultDescription
publicKeystring✅—Your public API key (pk_live_...)
tenantIdstring✅—The current user/workspace ID from your app
userIdstring—The logged-in user’s ID. Used to deduplicate tenant owner records across checkout sessions. Recommended.
apiUrlstringSDK defaultOverride the Crovver API base URL
portalUrlstringSDK defaultOverride the billing portal URL
pollIntervalnumber0Auto-refresh interval in ms. 0 = disabled
debugbooleanfalseLog SDK activity to the console
onUnauthenticated() => void—Called when subscription is inactive
metadata.userEmailstring—User’s email, passed to checkout/portal token requests
metadata.userNamestring—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,
    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>
  );
}