React Integration (Entitlements)
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 9 months ago