🛡️ az-access-control

A lightweight and flexible bitmask-based role access control library for React.js apps.
Control both component visibility and route-level access using a simple 2ⁿ permission model — without the hassle of writing complex permission logic.

2ⁿ = {1,2,4,8,16,32,64,128,...,n} ......................................................................

🔧 Example Given Below:

import {
  PermissionProvider,
  ProtectedComponent,
  ProtectedRoute,
} from "az-access-control";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AddProduct from "./pages/AddProduct";
import EditProduct from "./pages/EditProduct";
import Dashboard from "./pages/Dashboard";
import Unauthorized from "./pages/Unauthorized";

const userPermission = 5; // 1 + 4 (Add + Delete)

function App() {
  return (
    <PermissionProvider permissionSum={userPermission}>
      <Router>
        <Routes>
          <Route path="/" element={<Dashboard />} />

          <Route
            path="/add-product"
            element={
              <ProtectedRoute code={1}>
                <AddProduct />
              </ProtectedRoute>
            }
          />

          <Route
            path="/edit-product"
            element={
              <ProtectedRoute code={2}>
                <EditProduct />
              </ProtectedRoute>
            }
          />

          <Route path="/unauthorized" element={<Unauthorized />} />
        </Routes>

        {/* Optional UI-based control */}
        <ProtectedComponent code={1}>
          <button>Add Product</button>
        </ProtectedComponent>
      </Router>
    </PermissionProvider>
  );
}

...

ProtectedRoute

It navigates to "/unauthorized" by default in case if user is not authorized. You can explicitly provide your desired route. For example:

<ProtectedRoute code={2} redirectTo={"/notAllowed"}>
  <EditProduct />
</ProtectedRoute>

📃 License

MIT – Free to use, modify, and distribute.