React Role Auth

A lightweight, type-safe role-based access control provider for React applications.

Features

• 👥 Role-based access control
• 🛡️ Protected route/component wrapper
• ⚛️ Modern React hooks API
• 📦 Zero dependencies (except React)

Installation

npm i react-role-auth-msh

Usage

1. Wrap your app with AuthProvider:

import { AuthProvider } from "react-role-auth-msh";

const user = {
  id: "1",
  email: "[email protected]",
  roles: ["admin", "user"],
};

function App() {
  return (
    <AuthProvider user={user}>
      <YourApp />
    </AuthProvider>
  );
}

2. Protect content with RequireAuth:

import { RequireAuth } from "react-role-auth-msh";

function AdminPanel() {
  return (
    <RequireAuth roles="admin" fallback={<p>Access denied</p>}>
      <h1>Admin Panel</h1>
    </RequireAuth>
  );
}

API Reference

AuthProvider

The main provider component that manages role-based access control.

<AuthProvider user={userObject}>
  <App />
</AuthProvider>

useAuth Hook

const {
  user, // Current user object or null
  hasRole, // Function to check user roles
} = useAuth();

RequireAuth Component

<RequireAuth
  roles: Role | Role[]     // Required roles
  fallback?: ReactNode     // Content to show if unauthorized
>
  {children}
</RequireAuth>

Types

type Role = "admin" | "user" | "guest";

interface User {
  id: string;
  email: string;
  roles: Role[];
}

License

MIT