1.0.2 • Published 4 months ago

react-rbac-simplified v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
4 months ago

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

GitHub Profile

Contributions

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