Last updated

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.


Prerequisites

@frontegg/vue@3.0.17


Configuring Entitlements on Vue.js

app.use(Frontegg, {
    contextOptions: {
        baseUrl: //... , 
        clientId: // ... },
        entitlementsOptions: {enabled: true}
    }
});

Entitlements functions

An exception will be thrown if you don’t enable entitlements and try to use the functions.

Vue.js 3

The SDK exposes three functions:


  • useFeatureEntitlements - to check if the user is entitled to a feature
  • usePermissionEntitlements - to check if the user is entitled to permission
  • useEntitlements - to check if the user is entitled to a feature or permission

Usage example:

<template>
    <section v-if="authState.user">
        <div v-if="feature1.isEntitled">A cool section</div>
        <div v-if="permission1.isEntitled">An awesome section</div>
        <div v-if="feature2.isEntitled">A mind-blowing section</div>
        <div v-if="permission2.isEntitled">Another section</div>
    </section>
</template>

<script>

    import {
      useFrontegg,
      useFeatureEntitlements,
      usePermissionEntitlements,
      useEntitlements,
    } from '@frontegg/vue';

    export default {
      setup() {
    		// ...
        const { authState } = useFrontegg();

        const feature1 = useFeatureEntitlements('feature1');
        const permission1 = usePermissionEntitlements('permission1');
        const feature2 = useEntitlements({ featureKey: 'feature2' });
        const permission2 = useEntitlements({ permissionKey: 'permission2' });

        return {
          authState,
          feature1,
          permission1,
          feature2,
          permission2
        };
      },
    };
</script>

Load on demand

You can also load entitlements on demand by using loadEntitlements function:


<template>
    <section v-if="authState.user">
        // ...
        <div class="entitlements-button-container">
            <button v-on:click="onLoadEntitlementsClicked">
                Load entitlements
            </button>
        </div>

        <div class="entitlements-button-container">
            <button v-on:click="onLoadEntitlementsWithCallbackClicked">
                Load entitlements with callback
            </button>
        </div>
    </section>
</template>

<script>

    import {
      useFrontegg,
    } from '@frontegg/vue';

    export default {
      setup() {
        const { authState, loadEntitlements } = useFrontegg();

        function onLoadEntitlementsClicked() {
          loadEntitlements();
        }

        return {
          // ...
          onLoadEntitlementsClicked,
        };
      },
    };
</script>

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


function onLoadEntitlementsWithCallbackClicked() { loadEntitlements(
(isSucceeded) => console.log('load entitlements', isSucceeded ? 'succeeded' :
'failed') ); }

Custom attributes

Frontegg allows you to create custom attributes for users (learn more about creating custom attributes). Attributes can be used for Feature Flagging 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:


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

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

useFeatureEntitlements(key: string, customAttributes?:CustomAttributes): Entitlement
usePermissionEntitlements(key: string, customAttributes?:CustomAttributes): Entitlement
useEntitlements(entitledToOptions: EntitledToOptions, customAttributes?:CustomAttributes): Entitlement

Vue.js 2

The SDK exposes three functions:


  • getFeatureEntitlements - to check if the user is entitled to a feature
  • getPermissionEntitlements - to check if the user is entitled to permission
  • getEntitlements - to check if the user is entitled to a feature or permission
<template>
  <section v-if="authState.user">
    <div v-if="feature1.isEntitled">A cool section</div>
    <div v-if="permission1.isEntitled">An awesome section</div>
    <div v-if="feature2.isEntitled">A mind-blowing section</div>
    <div v-if="permission2.isEntitled">Another section</div>

    <div class="entitlements-button-container">
      <button v-on:click="onLoadEntitlementsClicked">Load entitlements</button>
    </div>

    <div class="entitlements-button-container">
      <button v-on:click="onLoadEntitlementsWithCallbackClicked">Load entitlements with callback</button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  //...
  data() {
    return {
      ...this.mapAuthState(),
    };
  },
  methods: {
    // ...
  },
  computed: {
    feature1() {
      const result = this.getFeatureEntitlements(this.authState.user.entitlements, 'feature1');
      return result;
    },
    permission1() {
      const result = this.getPermissionEntitlements(this.authState.user.entitlements, 'permission1');
      return result;
    },
    feature2() {
      const result = this.getEntitlements(this.authState.user.entitlements, { featureKey: 'feature2' });
      return result;
    },
    permission2() {
      const result = this.getEntitlements(this.authState.user.entitlements, { permissionKey: 'permission1' });
      return result;
    },
  },
});
</script>

Load on demand

You can also load entitlements on demand by using loadEntitlements function:

<template>
  <section v-if="authState.user">
    <div class="entitlements-button-container">
      <button v-on:click="onLoadEntitlementsClicked">Load entitlements</button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  //...
  data() {
    return {
      ...this.mapAuthState(),
      //...
    };
  },
  methods: {
    onLoadEntitlementsClicked() {
      this.loadEntitlements();
    },
  },
  computed: {
    //...
  },
});
</script>

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

onLoadEntitlementsWithCallbackClicked() {
  this.loadEntitlements((isSucceeded) =>
    console.log('load entitlements', isSucceeded ? 'succeeded' : 'failed')
  );
}

Custom attributes

Frontegg allows you to create custom attributes for users (learn more about creating [custom attributes] Attributes can be used for [Feature Flagging] 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:

getFeatureEntitlements(_user, 'feature-x', { attr1: 'val1', attr2: 'val2' })

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

getFeatureEntitlements(_user: User, key: string, customAttributes?:CustomAttributes) => Entitlement
getPermissionEntitlements(_user: User, key: string, customAttributes?:CustomAttributes) => Entitlement
getEntitlements(_user: User, entitledToOptions: EntitledToOptions, customAttributes?:CustomAttributes) => Entitlement