Yes, Permit.io provides the ​*permit-fe-sdk*​ specifically designed for React frontend applications to control UI elements and buttons based on permissions (1) (2) (3) (4) . Frontend SDK for React The permit-fe-sdk enables you to integrate permission-based feature toggling in your React app (1) . To get started, install the necessary packages:

npm install @casl/ability @casl/react permit-fe-sdk permitio

Setting Up Permission Checks First, create an API endpoint to handle bulk permission checks :

import { Permit } from "permitio";

const permit = new Permit({
 token: "YOUR_PERMIT_API_KEY",
 pdp: "<http://localhost:7766>",
}) ;

export default async function handler(req, res) {
 try {
 const { resourcesAndActions } = req.body;
 const { user: userId } = req.query;

 if (!userId) {
 return res.status(400) .json({ error: "No userId provided." }) ;
 }

 const checkPermissions = async (resourceAndAction) => {
 const { resource, action, userAttributes, resourceAttributes } = resourceAndAction;

 const allowed = permit.check(
 {
 key: userId,
 attributes: userAttributes,
 },
 action,
 {
 type: resource,
 attributes: resourceAttributes,
 tenant: "default",
 }
 ) ;

 return allowed;
 };

 const permittedList = await Promise.all(resourcesAndActions.map(checkPermissions) ) ;

 console.log(permittedList) ; // Printing the result of the checks

 return res.status(200) .json({ permittedList }) ;
 } catch (error) {
 console.error(error) ;
 return res.status(500) .json({ error: "Internal Server Error" }) ;
 }
}

Creating the AbilityLoader Component Create an AbilityLoader component to manage permissions (1) (2) :

import React, { createContext, useEffect, useState } from "react";
import { useUser } from "@clerk/nextjs";
import { Ability } from "@casl/ability";
import { Permit, permitState } from "permit-fe-sdk";

// Create Context
export const AbilityContext = createContext() ;

export const AbilityLoader = ({ children }) => {
const { isSignedIn, user } = useUser() ;
 const [ability, setAbility] = useState(undefined) ;

 useEffect(() => {
 const getAbility = async (loggedInUser) => {
 const permit = Permit({
 loggedInUser: loggedInUser,
 backendUrl: "/api/something",
 }) ;

 await permit.loadLocalStateBulk([
 { action: "view", resource: "Products" },
 { action: "view", resource: "document" },
 { action: "view", resource: "file" },
 { action: "view", resource: "component" },
 ]) ;

 const caslConfig = permitState.getCaslJson() ;

 return caslConfig && caslConfig.length ? new Ability(caslConfig) : undefined;
 };

 if (isSignedIn) {
 getAbility(user.id) .then((caslAbility) => {
 setAbility(caslAbility) ;
 }) ;
 }
 }, [isSignedIn, user]) ;

 return <AbilityContext.Provider value={ability}>{children}</AbilityContext.Provider>;
};

(1) Conditionally Rendering UI Elements Once set up, you can conditionally render buttons and UI components using

permitState

(1) (2) :

import { permitState } from "permit-fe-sdk";

(1) For basic RBAC checks :

<div>
 {permitState?.check("view", "document") && (
 <div className="bg-white m-4 p-4 h-full">Document</div>
 ) }
</div>

For ABA

Feel free to tag me with additional questions. I also appreciate feedback, it helps me improve. 👍 button 👎 button