🔐 React Native (TypeScript) এ File-based Protected Screen ও Role Based Access Control

একটি প্রফেশনাল React Native অ্যাপে সব স্ক্রিন সবাই দেখতে পারবে না। যেমন – Admin Dashboard শুধুমাত্র Admin দেখবে, কিন্তু User দেখবে না। এই সমস্যার সমাধানই হলো Protected Screen এবং Role Based Access Control (RBAC)।

📁 File-based Routing কী?

File-based Routing মানে হলো ফোল্ডার ও ফাইলের নাম অনুযায়ী স্ক্রিন কন্ট্রোল করা। React Native-এ সাধারণত আমরা এই কনসেপ্টটি ব্যবহার করি:

• auth → Login / Register
• user → Normal User Screens
• admin → Admin Screens
• protected → Login ছাড়া অ্যাক্সেস নেই

🗂️ Recommended Folder Structure (TypeScript)

src/
 ├─ auth/
 │   └─ LoginScreen.tsx
 ├─ admin/
 │   └─ AdminDashboard.tsx
 ├─ user/
 │   └─ UserDashboard.tsx
 ├─ navigation/
 │   └─ ProtectedRoute.tsx
 ├─ context/
 │   └─ AuthContext.tsx
 └─ App.tsx
  

🔑 AuthContext তৈরি (User + Role Store)

প্রথমে আমরা একটি AuthContext তৈরি করবো যেখানে থাকবে: Login status এবং User Role।

import React, { createContext, useState, ReactNode } from 'react';

type UserRole = 'admin' | 'user' | null;

interface AuthContextType {
  isLoggedIn: boolean;
  role: UserRole;
  login: (role: UserRole) => void;
  logout: () => void;
}

export const AuthContext = createContext({
  isLoggedIn: false,
  role: null,
  login: () => {},
  logout: () => {},
});

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [role, setRole] = useState(null);

  const login = (userRole: UserRole) => {
    setIsLoggedIn(true);
    setRole(userRole);
  };

  const logout = () => {
    setIsLoggedIn(false);
    setRole(null);
  };

  return (
    
      {children}
    
  );
};
  

🛡️ ProtectedRoute তৈরি (Role Based)

এই কম্পোনেন্ট চেক করবে:
✔ User logged in কিনা
✔ User-এর role allowed কিনা

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { AuthContext } from '../context/AuthContext';

interface Props {
  children: JSX.Element;
  allowedRole: 'admin' | 'user';
}

const ProtectedRoute = ({ children, allowedRole }: Props) => {
  const { isLoggedIn, role } = useContext(AuthContext);

  if (!isLoggedIn) {
    return Please Login First;
  }

  if (role !== allowedRole) {
    return Access Denied;
  }

  return children;
};

export default ProtectedRoute;
  

🧑‍💼 Admin Screen Protect করা

👉 এখানে শুধুমাত্র Admin এই স্ক্রিন দেখতে পারবে।

👤 User Screen Protect করা

📱 Output Behavior (Real Life Example)

• User logged out → Please Login First
• User role = user → Admin screen → Access Denied
• User role = admin → Admin screen → Screen Visible

⭐ কেন এই প্যাটার্ন ব্যবহার করবেন?

• Clean & scalable architecture
• Large app-এর জন্য perfect
• Security improve হয়
• Future role add করা সহজ