Role Based Access Control (RBAC) in React.js — Admin/User System

Role Based Access Control (RBAC) হল একটি Security Technique যেখানে User কি দেখতে পারবে এবং কি করতে পারবে, তা তার Role অনুযায়ী নির্ধারিত হয়। React.js অ্যাপ্লিকেশনে সাধারণত সবচেয়ে ব্যবহৃত রোল হলো:

• Admin → সব ধরনের কাজ করার অনুমতি থাকে
• User → শুধুমাত্র বেসিক কাজ করতে পারে

RBAC ব্যবহার করলে আপনার অ্যাপ আরও নিরাপদ হয় এবং Unauthorized user যেন ভুলবশত বা ইচ্ছাকৃতভাবে sensitive data অ্যাক্সেস না করতে পারে তা নিশ্চিত করা যায়।

🔎 কেন Role Based Access Control প্রয়োজন?

• Sensitive page / dashboard protect করতে
• Admin-only features control করতে
• User অভিজ্ঞতা উন্নত করতে: যে data user-এর নয় তা লুকিয়ে রাখা
• Security breach প্রতিরোধ করতে
• Scalable permission system তৈরি করতে

🧠 RBAC Core Concept

RBAC তিনটি মূল অংশ নিয়ে গঠিত:

1. User → অ্যাপ ব্যবহারকারী
2. Role → তাদের অনুমতি (Admin, User, Editor ইত্যাদি)
3. Permission → প্রতিটি Role কী করতে পারবে তার সংজ্ঞা

⚙️ Backend থেকে Role কে পাঠানো হয়

সাধারণত user login করলে JWT Token এর ভেতরে user role পাঠানো হয়:

// JWT Payload example
{
  "id": 1,
  "email": "user@gmail.com",
  "role": "admin"
}

⚛ React এ Role Store করার Best Options

React অ্যাপ্লিকেশনে user role সাধারণত যেভাবে store করা হয়:

• Context API
• Redux Toolkit
• React Query + Local Storage

Recommended: Context API বা Redux Toolkit

🧪 Example: Auth Context with Role

import { createContext, useState, useContext } from "react";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null); 
  // user = { name: "John", role: "admin" }

  const login = (data) => {
    setUser(data);
    localStorage.setItem("user", JSON.stringify(data));
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem("user");
  };

  return (
    
      {children}
    
  );
};

export const useAuth = () => useContext(AuthContext);

🛡 Protected Route (Based on Role)

এই component user role অনুযায়ী page allow বা deny করবে:

import { Navigate } from "react-router-dom";
import { useAuth } from "./AuthContext";

const RoleRoute = ({ children, allowedRoles }) => {
  const { user } = useAuth();

  if (!user) return ;

  if (!allowedRoles.includes(user.role)) {
    return 
Access Denied — You are not authorized!
;
  }

  return children;
};

export default RoleRoute;

📌 Usage Example (Admin Protected Page)

<Route 
  path="/admin" 
  element={
    <RoleRoute allowedRoles={["admin"]}>
      <AdminDashboard />
    </RoleRoute>
  }
/>

📌 User-Only Page Example

<Route 
  path="/profile" 
  element={
    <RoleRoute allowedRoles={["user", "admin"]}>
      <UserProfile />
    </RoleRoute>
  }
/>

💡 Conditional Rendering Based on Role

React এর ভিতরে UI Hide/Show করতে পারেন:

const { user } = useAuth();

return (
  <div>
    <h1>Welcome, {user.name}</h1>

    {user.role === "admin" && (
      <button>Delete User</button> 
    )}
  </div>
);

🔒 Best Security Practices

• Role verification শুধু React এ নয় → Backend এ Must
• User role কে localStorage এ expose না করা ভালো
• Protected API এ role validation অবশ্যই backend এ করতে হবে
• Admin panel এ Double Protection (Frontend + Backend)
• Token tampering প্রতিরোধের জন্য JWT signature required

🧭 Backend Role Validation (Must)

const isAdmin = (req, res, next) => {
  if (req.user.role !== "admin") {
    return res.status(403).json({ message: "Access Denied" });
  }
  next();
};

🎯 Final Summary

• RBAC অ্যাপ্লিকেশনকে আরও নিরাপদ করে
• Admin/User permissions আলাদা রাখা যায়
• React এ Role Control করতে Context বা Redux ব্যবহার করুন
• Backend এ অবশ্যই final security check থাকা উচিত
• UI তেও conditional rendering প্রয়োগ করুন

📌 Conclusion

React.js এ Role Based Access Control (RBAC) ব্যবহার করলে আপনি একটি Secure, Professional এবং Scalable Web Application তৈরি করতে পারবেন। এই system ব্যবহার করে আপনি সহজেই Admin Panel, User Dashboard, Restricted Pages, Permission Based Actions তৈরি করতে পারবেন।