react-rbac-simplified

• A lightweight and flexible React component for client-side Role-Based Access Control (RBAC).Easily manage user permissions and restrict access to components based on roles like Admin, Maintainer, and Super Admin (optional).

Installation

npm install react-rbac-simplified

Usage

• react-rbac-simplified provides a simple component that wraps your React components and handles access control based on user roles and routes.

• Props

  type RBAC_PROPS = {
    WrapperElem: React.FC,
    LoadingElem?: React.FC,
    authData: {
      hasToken: boolean,
      roles: {
        isAdmin: boolean,
        isMaintainer: boolean,
        isSuperAdmin?: boolean,
      },
      onUnauthorizedPageRequest: () => void,
      routes: {
        ADMIN_ROUTES: string[],
        PROTECTED_ROUTES: string[],
        SUPER_ADMIN_ROUTES?: string[],
        AUTH_ROUTES: string[],
      },
      redirects: {
        auth: string,
        default: string,
        superAdmin?: string,
      },
    },
  };

• WrapperElem (Required):

  • The React component that you want to protect with RBAC.
  • Example : const MyProtectedComponent = () => <div>Protected Content</div>

• LoadingElem (Required):

  • A React component to display while RBAC performs its checks and redirects.
  • This prevents unnecessary API calls from temporarily rendered components.
  • If not provided, a default loader will be used.

• authData (Required):

  • An object containing authentication and authorization information :

    • hasToken (boolean) : Indicates whether the user has an authentication token. You are responsible for verifying this.

    • roles (object) : Specifies the user's roles

      • isAdmin (boolean) : Indicates if the user is an admin.
      • isMaintainer (boolean) : Indicates if the user is a maintainer.
      • isSuperAdmin (boolean, optional) : Indicates if the user is a super admin. If your application doesn't have super admins, you can omit this.

    • onUnauthorizedPageRequest (function) : A function to handle unauthorized access attempts (e.g., logout, reset auth state).

    • routes (object) : Defines route access rules

      • ADMIN_ROUTES (string[]) : An array of routes accessible to admins (e.g., ["/admin", "/reports"]).
      • PROTECTED_ROUTES (string[]) : An array of routes accessible to authenticated users (e.g., ["/profile", "/dashboard"]).
      • SUPER_ADMIN_ROUTES (string[], optional) : An array of routes accessible to super admins (e.g., ["/super-admin"]).
      • AUTH_ROUTES (string[]) : An array of authentication-related routes (e.g., ["/sign-in", "/sign-up"]).

    • redirects (object) : Defines redirection rules

      • auth (string) : The route to redirect to when authentication is required (e.g., "/sign-in").
      • default (string): The default route to redirect to after successful authentication (e.g., "/dashboard").
      • superAdmin (string, optional) : The route to redirect to for super admins (e.g. "/super-admin-dashboard").

Example

import React from "react";
import RBAC from "react-rbac-simplified";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

// Mock auth configuration (you should manage this dynamically)
const authConfig = {
  authData: {
    hasToken: false,
    roles: {
      isAdmin: false,
      isMaintainer: false,
      isSuperAdmin: false, // Optional
    },
    onUnauthorizedPageRequest: () => console.log("Unauthorized access!"),
    routes: {
      ADMIN_ROUTES: ["/admin", "/reports"],
      PROTECTED_ROUTES: ["/dashboard", "/profile"],
      SUPER_ADMIN_ROUTES: ["/super-admin"], // Optional
      AUTH_ROUTES: ["/sign-in", "/sign-up"],
    },
    redirects: {
      auth: "/sign-in",
      default: "/dashboard",
      superAdmin: "/super-admin-dashboard", // Optional
    },
  },
};

const Dashboard = () => <div>Dashboard Content</div>;
const AdminPanel = () => <div>Admin Panel Content</div>;
const SignIn = () => <div>Sign In Page</div>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
          <li>
            <Link to="/admin">Admin</Link>
          </li>
          <li>
            <Link to="/sign-in">Sign In</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route
          path="/dashboard"
          element={RBAC({
            WrapperElem: Dashboard,
            authData: authConfig.authData,
          })}
        />
        <Route
          path="/admin"
          element={RBAC({
            WrapperElem: AdminPanel,
            authData: authConfig.authData,
          })}
        />
        <Route
          path="/sign-in"
          element={RBAC({ WrapperElem: SignIn, authData: authConfig.authData })}
        />
      </Routes>
    </Router>
  );
}

export default App;

Important Notes

• You are responsible for managing the authData object and ensuring it's kept up-to-date with the user's authentication and authorization state using context APIs, Redux, or other state management solutions.
• Only components wrapped by the RBAC component will be protected. Components outside the wrapper will function normally.
• The Super Admin role is optional, and can be omitted.
• Ensure to update your auth config on route changes, or auth state changes.

Author

Contributions

• Contributions are welcome! Please feel free to submit issues and pull requests.