Dynamic Permissions in React using CASL: A Guide to Secure Your App🔒

As web applications become more complex, it's important to ensure that users have the appropriate permissions to access certain features and data. In this article, we'll explore how to implement dynamic permissions in React using CASL, a powerful authorization library.

CASL, or "Class-based Authorization System for React and Node.js", provides a simple and intuitive way to define permissions and check them at runtime. With CASL, you can easily manage permissions for different roles and users, and ensure that your app is secure and compliant with data protection regulations.

Installing Packages

To get started with CASL, you'll need to install the library and its dependencies:

npm install @casl/react @casl/ability

Define Permissions

Once you've installed CASL, you can define your permissions using the defineAbility function. Here's an example of how to define permissions for a blog app:

// ability.js
import { defineAbility } from "@casl/ability";

export default defineAbility((can, cannot) => {
  can("read", "Post");
  can("add", "Post");
  cannot("update", "Post");
  cannot("delete", "Post");
});

In this example, we're defining permissions for a Post model. Users can read and create posts, but can't update and delete them.

We can use permission directly by invoking the function can or using Can component.

import ability from "./ability.js";

console.log(ability.can("read", "Post")); // true
console.log(ability.can("delete", "Post")); // false

Permission on React Component

Once you've defined your permissions, you can use the Can component from @casl/react to check if a user has permission to perform a certain action. Here's an example of how to use the Can component in a React component:

import { createContext } from "react";
import { createContextualCan } from "@casl/react";
import ability from "./ability.js";

export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);

function App() {
  const post = { title: "example-title", content: "example-content" };

  return (
    <AbilityContext.Provider value={ability}>
      <Can I="add" a="Post">
        <button>Add</button>
      </Can>
      <Can I="read" a="Post">
        <Post post={post} />
      </Can>
    </AbilityContext.Provider>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <Can I="update" a="Post">
        <button>Edit</button>
      </Can>
      <Can I="delete" a="Post">
        <button>Delete</button>
      </Can>
    </div>
  );
}

In this example, we're rendering a Post component and checking if the current user has permission to update & delete the post. If the user has permission, we're rendering the buttons.

We're providing the ability to our entire app using the AbilityContext.Provider. This allows us to check permissions in any component using the Can component or the useAbility hook from @casl/react.

Overall, CASL provides a powerful and flexible way to manage permissions in your React app. By defining permissions using the defineAbility function and checking them at runtime using the Can component or the useAbility hook, you can ensure that your app is secure and compliant with data protection regulations.

I hope this article has been helpful in getting started with dynamic permissions in React using CASL. If you have any questions or feedback, feel free to leave a comment below!

Demo

Check out the demo below where you can edit permissions and see how the feature is enabled or disabled based on changes to the permission data.

Demo URL: https://react-with-casl.vercel.app/
Source Code: https://github.com/naufalafif/react-with-casl