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
Prerequisites
@frontegg/vue@3.0.17
Configuring Entitlements on Vue.js
app.use(Frontegg, { contextOptions: { baseUrl: //... , clientId: // ... }, entitlementsOptions: {enabled: true} } });
Entitlements functions
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 featureusePermissionEntitlements
- to check if the user is entitled to permissionuseEntitlements
- 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 featuregetPermissionEntitlements
- to check if the user is entitled to permissiongetEntitlements
- 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