Check an entitlement

Unlike the server SDK, there’s no customer parameter here - the client always checks the currently authenticated user’s own customer, resolved from their own session.

This is the hook to gate on. useEntitlements() returns a cached list with no per-feature allowed - use it for a “your plan” screen, not for a go/no-go decision.

The hook

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

function ExportButton() {
  const { allowed, isLoading } = useAccess('export_pdf');

  if (isLoading) return <Spinner />;
  if (!allowed) return <Upgrade />;
  return <button onClick={exportPdf}>Export</button>;
}

For a quota feature, pass requested to check “can I use N more”:

const { allowed } = useAccess('api_calls', 5);

Need more than yes/no - how much of the quota is left, for example - read details from the same hook. There is no second call to make and no flag to set: the endpoint always returns the full record, so allowed and details come from one request.

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

function ApiCallsMeter() {
  const { details, isLoading } = useAccess('api_calls');

  if (isLoading || !details) return <Spinner />;
  return (
    <p>
      {details.remaining} / {details.limit} calls left this period
    </p>
  );
}

details.limit is what the plan includes, not where access stops. On a feature that bills or tolerates its overage, remaining runs down to zero and then goes negative while allowed stays true — the user hasn’t hit a wall, they’ve started paying. Read details.overage_behavior before rendering “you have reached your limit”, and clamp remaining before showing it.

The guard component

<Access> wraps useAccess for declarative gating:

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

<Access featureKey="export_pdf" fallback={<Upgrade />}>
  <button onClick={exportPdf}>Export</button>
</Access>;

Lower-level: `useClient().allows()` / `.check()`

useAccess and <Access> call these internally on the underlying KerneClient - reach for them directly only if you need to trigger a check imperatively (e.g. on a button click, not on mount):

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

const client = useClient();
const allowed = await client.allows('export_pdf'); // boolean, throws on a real error (401/500) - it does not swallow failures into `false`
const check = await client.check('export_pdf'); // full EntitlementCheck detail

Why there’s no `consume()` here

Enforcing a quota only in the browser is trivially bypassed - commit usage from your backend with @kerne/server’s consume(), and use this SDK only to reflect the result.

Server SDK

Frontend SDKs

Check an entitlement

The hook

The guard component

Lower-level: `useClient().allows()` / `.check()`

Why there’s no `consume()` here

​The hook

​The guard component

​Lower-level: useClient().allows() / .check()

​Why there’s no consume() here

The hook

The guard component

Lower-level: `useClient().allows()` / `.check()`

Why there’s no `consume()` here