## Entitlements quickstart

Harness the power of Frontegg's robust Entitlements Engine directly into the heart of your React application, allowing you to effortlessly implement sophisticated, role-based, and attribute-based access controls with just a few lines of code.

br
Prerequisites
@frontegg/react@6.0.25

### Configuring entitlements with React SDK

See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) for more information.


```typescript
import { FronteggProvider } from "@frontegg/react";

ReactDOM.render(
  <FronteggProvider
    contextOptions={contextOptions}
    entitlementsOptions={{ enabled: true }}
  >
    {" "}
    <Page />
  </FronteggProvider>,
  document.getElementById("root"),
);
```

See [`entitlementsOptions`](/ciam/sdks/components/fronteggappoptions#entitlementsOptions) for more information.

### React hooks

The following hooks can be used after enabling entitlements.

- `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 a feature or permission.


### Custom attributes

Frontegg allows you to create **custom attributes** for users (learn more about creating [custom attributes](/ciam/guides/authorization/entitlements/feature-based/feature-flags#attributes-for-targeting)). Attributes can be used for [Feature Flagging](/ciam/guides/authorization/entitlements/feature-based/feature-flags) purposes and in Entitlement API calls within a `customAttributes` object. The `customAttributes` object is optional and comprised of key-value pairs with possible values of  `string | number | boolean | Date`, like so:



```typescript
useFeatureEntitlements('feature-x', { attr1: 'val1', attr2: 'val2' })
```

br

```typescript
import { Entitlement, CustomAttributes } from '@frontegg/types';

useFeatureEntitlements(key: string, customAttributes?:CustomAttributes) => Entitlement
usePermissionEntitlements(key: string, customAttributes?:CustomAttributes) => Entitlement
useEntitlements(options: EntitledToOptions, customAttributes?:CustomAttributes) => Entitlement
```

br
### Creating hooks

Hooks Usage
Hooks should be called for authenticated users only. An exception will be thrown if entitlements are not enabled before using hooks.

br

```typescript
import {
  useFeatureEntitlements,
  usePermissionEntitlements,
  useEntitlements,
  useIsAuthenticated,
} from "@frontegg/react";

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>}
    </>
  );
};
```

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



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

### Load on demand

Entitlements can be loaded on demand using the `loadEntitlements` saga:

br

```typescript
const { loadEntitlements } = useAuthActions();

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

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

br

```typescript
const { loadEntitlements } = useAuthActions();

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

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