Guard components

Each of these wraps a hook you could call yourself - use them when you just need to show/hide UI, reach for the hook directly when you need the loading/error state too.

Auth guards

import { Authenticated, Unauthenticated, AuthLoading } from '@kerne/react';

<AuthLoading><Spinner /></AuthLoading>
<Authenticated fallback={<LoginPrompt />}><Dashboard /></Authenticated>
<Unauthenticated><LoginPrompt /></Unauthenticated>

Billing guards

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

<HasSubscription fallback={<Upgrade />}>
  <PremiumArea />
</HasSubscription>

<Access featureKey="export_pdf" fallback={<Upgrade />}>
  <ExportButton />
</Access>

Pass requested to check a quantity before it’s consumed, not just whether the feature is on. A QUOTA feature with 3 units left still passes a plain <Access> (something remains), but fails requested={5} up front - useful to block a batch action before the user commits to it instead of after a partial consume() fails mid-way:

<Access featureKey="ai_credits" requested={5} fallback={<Upgrade />}>
  <BatchProcessButton count={5} />
</Access>

There’s no plan-slug guard on purpose - matching on a plan name breaks silently the moment you rename a plan, or a customer ends up on an equivalent plan under a different slug. Access always checks the actual entitlement instead, so the check keeps working no matter how the plan behind it is restructured.

<Access> (via useAccess) is a live per-feature check and is what you gate on. useEntitlements() is a cached list for display - it has no per-feature allowed field, so a QUOTA verdict read from it can be stale. Render meters and “what’s included” from useEntitlements(); decide whether an action may run with useAccess / <Access>.

Combined guard

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

<Protected auth featureKey="export_pdf" authFallback={<Login />} billingFallback={<Upgrade />}>
  <ProFeature />
</Protected>

Error boundary

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

<KerneErrorBoundary
  fallback={(error, reset) => (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <App />
</KerneErrorBoundary>

error.code is available when the thrown error came from an API call (a KerneError from @kerne/server) - not guaranteed for arbitrary React errors caught by the boundary.

Server SDK

Frontend SDKs

Guard components

Auth guards

Billing guards

Combined guard

Error boundary

​Auth guards

​Billing guards

​Combined guard

​Error boundary

Auth guards

Billing guards

Combined guard

Error boundary