Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The frontend of the MuteTaxes project is a React-based Single Page Application (SPA) designed to demonstrate Relationship-Based Access Control (ReBAC) using OpenFGA. Its primary purpose is to provide a visual interface where users can manage roles, users, and permissions, while experiencing real-time UI adaptations (such as sidebar visibility and button state) based on the current user's authorization level.
Sources: PLAN.md:3-10, frontend/src/pages/LoginPage.tsx:18-25
Tech Stack and Configuration
The frontend is built using modern web technologies focused on speed and type safety. It utilizes Vite as the build tool and TypeScript for static typing. The UI styling is handled by Tailwind CSS, which provides a utility-first approach to design.
| Dependency | Purpose |
|---|---|
| React (18.3.1) | Core UI library |
| React Router Dom (6.26.2) | Client-side routing |
| Vite | Build tool and dev server |
| Tailwind CSS | Utility-first styling |
| TypeScript | Static typing |
Sources: frontend/package.json:11-25
Core Component Structure
The application follows a standard React component hierarchy with specialized providers for state management and layout components for consistent navigation.
Routing and Authentication Guards
The application uses react-router-dom for navigation. Access to routes is controlled through two primary higher-order components:
RequireAuth: Redirects unauthenticated users to the/loginpage.SuperAdminRoute: Restricts access to administrative pages (Users, Roles, Tables, Permissions) to users with thesuperadminrole.
Sources: frontend/src/App.tsx:12-30
Layout and Sidebar Logic
The Layout component serves as the main wrapper for authenticated routes. It dynamically renders the sidebar based on two factors:
- Readable Tables: The sidebar lists tables the user has permission to view, fetched via the
/me/allowed-tablesendpoint. - Administrative Actions: If the user is identified as a Super Admin, additional management links (Users, Roles, Tables, Permission Matrix) are displayed.
The diagram shows the component nesting and how the Layout separates navigation from the main content outlet.
Sources: frontend/src/App.tsx:32-75
Permission-Driven UI Adaptation
The hallmark of the architecture is how the UI adapts to OpenFGA permissions. This is primarily handled in the TablePage and PermissionsPage.
Dynamic Action Buttons
In TablePage.tsx, the frontend requests specific CRUD permissions for a given table slug from the backend. The state of action buttons (Create, Update, Delete) is directly tied to the boolean flags returned by the getTablePermissions API call.
| UI Element | Logic | Source |
|---|---|---|
| Sidebar Items | Rendered based on allowedTables from AppContext | frontend/src/components/Layout.tsx:55-61 |
| Action Buttons | Disabled/Enabled based on permissions.canCreate/Update/Delete | frontend/src/pages/TablePage.tsx:109-138 |
| Permissions Matrix | Toggle buttons that update FGA tuples via backend | frontend/src/pages/PermissionsPage.tsx:49-74 |
Sequence: Loading Table Permissions
This sequence demonstrates the flow of permission data from the authorization engine to the React state.
Sources: frontend/src/pages/TablePage.tsx:28-41, PLAN.md:123-132
Administrative Modules
Super Admin users have access to specific pages for managing the ReBAC system:
- UsersPage: Allows creating new users and assigning/removing roles. It interacts with
getUsers,createUser,assignRole, andremoveRoleendpoints. Sources: frontend/src/pages/UsersPage.tsx:12-80 - RolesPage: Facilitates role creation and deletion. Sources: frontend/src/pages/RolesPage.tsx:11-50
- TablesPage: A registry for new table resources that need to be governed by authorization rules. Sources: frontend/src/pages/TablesPage.tsx:12-40
- PermissionsPage (Matrix): A grid interface where administrators can toggle CRUD permissions for specific Role-Table pairs. This triggers
updatePermissionMatrixcalls to modify OpenFGA tuples on the backend. Sources: frontend/src/pages/PermissionsPage.tsx:49-115
Styling and UX
The application uses a "glassmorphism" aesthetic defined in index.css, featuring radial gradients and backdrop filters. Navigation transitions are enhanced with a page-enter animation that applies a fade and rise effect to new content.
Sources: frontend/src/index.css:30-61
The frontend architecture serves as a visualization layer for the backend's OpenFGA implementation, ensuring that the user experience is strictly aligned with the defined authorization model. Through the use of context providers and dynamic component rendering, it provides a responsive environment where permission changes are reflected immediately across the interface.
Sources: PLAN.md:162-185