A secure, role-based access control (RBAC) React + Node.js app using Permit.io, built for the Permit.io RBAC Challenge.
Class-Guard is a role-based dashboard application with the following features:
- Integration with Permit.io for access control (RBAC)
- A simple Node.js/Express backend to handle permission checks
- A dynamic React frontend with three dashboards:
AdminDashboard.jsx
TeacherDashboard.jsx
StudentDashboard.jsx
- Deployed to Netlify (Frontend) and localhost/Render (Backend)
- Compatible with JWT-authenticated workflows
- Ready for production, demo-ready
Class-Guard/
├── backend/
│ └── server.js # Node.js server with Permit.io integration
├── frontend/
│ ├── public/
│ │ └── _redirects # Netlify redirects for SPA
│ ├── src/
│ │ ├── pages/
│ │ │ ├── AdminDashboard.jsx
│ │ │ ├── StudentDashboard.jsx
│ │ │ └── TeacherDashboard.jsx
│ │ ├── components/
│ │ │ └── Navbar.jsx
│ │ ├── App.jsx
│ │ └── index.js
├── .gitignore
└── README.md
git clone https://github.com/your-username/Class-Guard.git
cd Class-Guard
cd backend
npm install
node server.js
Server runs at:
http://localhost:5000
You must update your Permit.io API key and PDP URL inside server.js
.
const permit = new Permit({
pdp: 'https://cloudpdp.api.permit.io',
token: 'your-permit-api-key',
});
cd frontend
npm install
npm start
Frontend runs at:
http://localhost:3000
-
Push Your Code to GitHub:
git add . git commit -m "Initial commit" git push origin main
-
Connect Your GitHub Repo to Netlify:
- Log in to your Netlify account.
- Click on "New site from Git" and connect your GitHub repository.
-
Set the Build Settings:
- Build command:
npm run build
- Publish directory:
build/
- Build command:
-
Add
_redirects
Insidepublic/
Folder:/* /index.html 200
-
Netlify will automatically handle routing for your React SPA.
-
User Logs In or Accesses a Dashboard:
- The user attempts to log in or access a specific dashboard.
-
Frontend Makes a POST Request to
/api/check-permission
on the Backend:- The frontend sends a POST request to the backend to check if the user has the necessary permissions.
-
Backend Checks Permission Using Permit.io SDK:
- The backend uses the Permit.io SDK to verify the user's permissions.
-
If Allowed, the Frontend Renders the Dashboard:
- If the user is permitted, the frontend renders the requested dashboard.
-
If Not, the User is Shown an "Access Denied" Message:
- If the user is not permitted, an "Access Denied" message is displayed.
app.post('/api/check-permission', async (req, res) => {
const resource = req.body.resource;
const action = req.body.action;
const user = req.body.user;
const permitted = await permit.check(user, action, resource);
if (permitted) {
res.json({ permitted: true });
} else {
res.json({ permitted: false });
}
});
import React, { useEffect, useState } from 'react';
function AdminDashboard() {
const [accessDenied, setAccessDenied] = useState(false);
useEffect(() => {
fetch('http://localhost:5000/api/check-permission', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ resource: 'admin-dashboard', action: 'view', user: 'user2345' }),
})
.then(res => res.json())
.then(data => {
if (!data.permitted) {
setAccessDenied(true);
}
});
}, []);
if (accessDenied) {
return <div>Access Denied</div>;
}
return (
<div>
<h1>Admin Dashboard</h1>
<p>Welcome, Admin!</p>
</div>
);
}
export default AdminDashboard;
Similar code is used in
StudentDashboard.jsx
andTeacherDashboard.jsx
.
- Frontend: React, JSX, Netlify
- Backend: Node.js, Express
- RBAC: Permit.io
- Deployment: GitHub + Netlify
- Development OS: Kali Linux
-
Fork the Repository:
git fork https://github.com/your-username/Class-Guard.git
-
Clone Your Fork:
git clone https://github.com/your-username/Class-Guard.git cd Class-Guard
-
Create a New Branch:
git checkout -b feat/featureName
-
Make Your Changes:
Commit your changes and push to your branch:
git add . git commit -m "feat: add new feature" git push origin feat/featureName
-
Submit a Pull Request:
- Go to the original repository and submit a pull request.
-Admin
Username: admin
User ID: 2025DEVChallenge
-Teacher
Username: teacher
User ID: 2025DEVChallenge
-Student
Username: Student
User ID: 2025DEVChallenge
These credentials are preconfigured in the backend for the RBAC challenge demo.
MIT License © Collins Joel
- Big thanks to Permit.io for providing the RBAC SDK and challenge.
- Built with ❤️ on Kali Linux using Node.js, React, and Netlify.
- GitHub: @Collins
- Email:
dada4ash@gmail.com