Home
Help CenterSign up for Frontegg

React Integration (Entitlements)

Suggest Edits

Configuring Entitlements with React SDK

Use the following code to configure entitlements with React SDK:

import { FronteggAppOptions } from '@frontegg/types';

const fronteggOptions: FronteggAppOptions = {
  contextOptions: {
    baseUrl: //...,
    clientId: //...,
  },
  entitlementsOptions: {
    enabled: true,
  },
};

❗️

An exception will be thrown if you won't enable entitlements before trying to use the hooks

API Calls

The following API calls can be performed after configuring Entitlements with React:

  • useFeatureEntitlements - checks whether a user is entitled to feature access.
  • usePermissionEntitlements - checks whether a user is entitled to permission.
  • useEntitlements - checks whether a user is entitled to feature or permission.

🚧

Hooks should be called for authenticated users only

Utilizing Hooks

The following code sample showcases the use of the API calls mentioned in the previous section. 

import {
  useFeatureEntitlements,
  usePermissionEntitlements,
  useEntitlements,
  useIsAuthenticated,
} from '@frontegg/react-hooks';

const Page = () => {
  const isAuthenticated = useIsAuthenticated();

  return (
    <>
      { isAuthenticated && <Entitlements /> }
    </>
  );
};

const Entitlements = () => {
  const { isEntitled: isFEntitled, justification: fJust } = useFeatureEntitlements("feature-key");
  
  const { isEntitled: isPEntitled, justification: pJust } = usePermissionEntitlements("permission-key");
  
  const { isEntitled: isPEntitled2, justification: pJust2 } = useEntitlements({ permissionKey: "permission-key" });
  
  const { isEntitled: isFEntitled2, justification: fJust2 } = useEntitlements({ featureKey: "feature-key" });

  return (
    <>
      { isFEntitled && (<div>A cool section</div>) }
      { isPEntitled && (<div>An awesome section</div>) }
      { isPEntitled2 && (<div>A mind-blowing section</div>) }
      { isFEntitled2 && (<div>Another section</div>) }
    </>
  );
};

In case the user is not entitled for the feature or permission, the NotEntitledJustification when isEntitled is false will be one of the following enums:

export enum NotEntitledJustification {
  MISSING_PERMISSION = 'MISSING_PERMISSION',
  MISSING_FEATURE = 'MISSING_FEATURE',
  BUNDLE_EXPIRED = 'BUNDLE_EXPIRED',
}

Load on demand

The user can load entitlements on demand with the loadEntitlements saga:

const { loadEntitlements } = useAuthActions();

<button onClick={() => { loadEntitlements() }}>
  Load entitlements
</button>

You can pass a callback to let you know that the request was completed:

const { loadEntitlements } = useAuthActions();

const onLoadEntitlements = () => {
	loadEntitlements({
		callback: (isSucceeded) => console.log(`request ${isSucceeded ? 'succeeded' : 'failed'}`)
	});
};

<button onClick={onLoadEntitlements}>
  Load entitlements
</button>

Updated 8 months ago