Overview

​

Installation

npm install @kerne/react

​

Initialization

import { KerneProvider } from '@kerne/react';

function Root() {
  return (
    <KerneProvider appId={process.env.NEXT_PUBLIC_KERNE_APP_ID!}>
      <App />
    </KerneProvider>
  );
}

​

Core hooks

• useAuth() - the logged-in user, and every auth action (login/register/logout/password/verification). Also redirectWithSession(url), for handing the session back to your app from Kerne’s hosted auth origin - see Handoff. See Login.
• useAuthConfig() - the tenant’s public auth config (enable_credentials, enable_magic_link, registration_mode, branding). The prebuilt forms read it to decide what to render; a custom auth UI must read the same thing. See Auth config.
• useAccess(featureKey) - { allowed, details, isLoading, error } for one feature, already scoped to the logged-in user (no need to pass one). allowed is the go/no-go; details carries the detail (limit/used/remaining/overage_behavior) when you want to show how much is left. One request either way. See Check an entitlement.
• useEntitlements() - the whole entitlement list for a “your plan” screen. It has no per-feature allowed field (the list is cached) - never gate on it; use useAccess for that. See List entitlements.
• useCheckout() / usePortal() - start a checkout session, or open the billing portal. Redirect flows only. See Checkout & portal.
• useSubscription() / useUser() - reactive reads of the caller’s own subscription/profile.
• useClient() - the underlying KerneClient instance, for anything not covered by the hooks above.

​

Gating a feature

import { Access } from '@kerne/react';

function ExportButton() {
  return (
    <Access featureKey="export_pdf" fallback={<p>Upgrade your plan to use this.</p>}>
      <button>Export Data</button>
    </Access>
  );
}

​

What this SDK does not do