Class-Guard: Secure Role-Based Dashboard Access with Permit.io

A secure, role-based access control (RBAC) React + Node.js app using Permit.io, built for the Permit.io RBAC Challenge.

---

About Class-Guard

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

---

Folder Structure

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

---

Installation & Setup

1. Clone the Repository

git clone https://github.com/your-username/Class-Guard.git
cd Class-Guard

2. Backend Setup (Node.js + Permit.io)

Install Dependencies

cd backend
npm install

Start the Server

node server.js

Server runs at: http://localhost:5000

Update Permit.io Credentials

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',
});

3. Frontend Setup (React)

Install Dependencies

cd frontend
npm install

Start the Application

npm start

Frontend runs at: http://localhost:3000

---

Deployment

Frontend on Netlify

1. Push Your Code to GitHub:

   git add .
   git commit -m "Initial commit"
   git push origin main

1. Connect Your GitHub Repo to Netlify:

   • Log in to your Netlify account.
   • Click on "New site from Git" and connect your GitHub repository.

2. Set the Build Settings:

   • Build command: npm run build
   • Publish directory: build/

3. Add _redirects Inside public/ Folder:

   /*    /index.html   200

1. Netlify will automatically handle routing for your React SPA.

---

Role-Based Access Flow

1. User Logs In or Accesses a Dashboard:

   • The user attempts to log in or access a specific dashboard.

2. 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.

3. Backend Checks Permission Using Permit.io SDK:

   • The backend uses the Permit.io SDK to verify the user's permissions.

4. If Allowed, the Frontend Renders the Dashboard:

   • If the user is permitted, the frontend renders the requested dashboard.

5. If Not, the User is Shown an "Access Denied" Message:

   • If the user is not permitted, an "Access Denied" message is displayed.

---

Sample Code: /api/check-permission

server.js (Backend)

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 });
  }
});

AdminDashboard.jsx (Frontend Sample)

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 and TeacherDashboard.jsx.

---

Tech Stack

• Frontend: React, JSX, Netlify
• Backend: Node.js, Express
• RBAC: Permit.io
• Deployment: GitHub + Netlify
• Development OS: Kali Linux

---

How to Contribute

1. Fork the Repository:

   git fork https://github.com/your-username/Class-Guard.git

1. Clone Your Fork:

   git clone https://github.com/your-username/Class-Guard.git
   cd Class-Guard

1. Create a New Branch:

   git checkout -b feat/featureName

1. 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

1. Submit a Pull Request:
   • Go to the original repository and submit a pull request.

---

Challenge Team Credentials

-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.

---

License

MIT License © Collins Joel

---

Acknowledgements

• Big thanks to Permit.io for providing the RBAC SDK and challenge.
• Built with ❤️ on Kali Linux using Node.js, React, and Netlify.

---

Contact

• GitHub: @Collins
• Email: dada4ash@gmail.com

Built With

• html
• javascript