Routing & Role-Based Access
How It Works
After login, the API returns a JWT containing the user's role. The SPA decodes this, stores the role in context, and uses it to:
- Determine which navigation items to render
- Guard routes — unauthenticated or unauthorized users are redirected
- Show or hide UI elements within shared pages
Route Guards
React Router <Route> elements are wrapped with a ProtectedRoute component (in src/components/) that checks:
- Is the user authenticated? (valid token present)
- Does the user's role match the allowed roles for this route?
If either check fails, the user is redirected to /account/login.
Layout System
Two root layouts exist:
| Layout | Used by |
|---|---|
DashboardLayout | All authenticated pages — sidebar nav, top bar, notifications |
BrandBoxLayout | Public pages (login, register, referral form) — centered card with org branding |
Layouts live in src/components/Layouts/.
Organization Context
OrganizationContext (in src/contexts/) provides org-level data (branding, feature flags) to the entire tree. It is populated on login from the /api/organizations/me/ endpoint and used by the theme system to apply custom colors/logos.