4. Permission Flow

Concept Summary

1. User logs in (mocked for now).
2. Frontend sends a POST request to the backend with the dashboard type they want to view.
3. Backend uses the Permit.io SDK to check if the user is allowed.
4. Based on the result, the frontend either renders the dashboard or blocks access.

---

Flow Diagram (Text Version)

[ User ] --> (Login / Page Load)
   |
   v
[ Frontend React Component ]
   |
   |-- POST /api/check-permission { userId, resource: 'admin-dashboard' }
   |
   v
[ Backend (server.js) ]
   |
   |-- permit.check(userId, 'view', 'admin-dashboard')
   |
   v
[ Permit.io PDP ]
   |
   |-- returns true / false
   |
   v
[ Backend Response ]
   |
   v
[ Frontend ]
   |-- if permitted: render dashboard
   |-- else: redirect / show access denied

---

Example Frontend Code

Each dashboard page (e.g., AdminDashboard.jsx) has a check like:

useEffect(() => {
  fetch('/api/check-permission', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ resource: 'admin-dashboard' }),
  })
    .then(res => res.json())
    .then(data => {
      if (!data.permitted) {
        setAccessDenied(true);
      }
    });
}, []);

If access is denied, you display a fallback:

if (accessDenied) {
  return <h2>Access Denied</h2>;
}

---

Example Backend Code (server.js)

app.post('/api/check-permission', async (req, res) => {
  const { resource } = req.body;
  const userId = 'user2345'; // or grab from session

  try {
    const permitted = await permit.check(userId, 'view', resource);
    res.json({ permitted });
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

---

Current Resources Defined

• admin-dashboard
• teacher-dashboard
• student-dashboard

These are defined in Permit.io's control panel under resources → actions → view.

---

Testing Tips

• Replace userId in server.js with different mock users to simulate different roles.
• Ensure Permit.io roles and policies match your expected logic.
• Add console.log(resource, permitted) in backend for quick debugging.

---