Frontend API Client
Relevant source files
The following files were used as context for generating this wiki page:
The Frontend API Client is a centralized communication layer responsible for interfacing the React application with the backend services. It encapsulates the logic for making HTTP requests, handling authentication tokens, and defining the data structures for communication with the Express-based backend.
The client is built on top of a base fetch wrapper and provides typed methods for managing users, roles, table registries, and complex permission matrices derived from OpenFGA. Sources: PLAN.md:16-21, frontend/src/api/client.ts
Architecture and Data Flow
The API client follows a tiered structure where a low-level fetcher handles headers and base URLs, while a high-level endpoint module exports specific business logic functions.
The diagram above illustrates the request flow from the UI components through the typed endpoint definitions to the base fetch client. Sources: frontend/src/pages/UsersPage.tsx:7-14, frontend/src/api/endpoints.ts:46-50
Base Fetcher (apiFetch)
The core of the client is the apiFetch utility. It automatically injects the Authorization header when a token is provided and prepends the VITE_API_BASE_URL from the environment variables.
- Error Handling: It parses JSON responses and throws an error if the response is not OK (status code outside 200-299).
- Default Headers:
Content-Type: application/jsonis applied by default to all requests.
Sources: frontend/src/api/client.ts:1-20, PLAN.md:278
API Endpoint Categories
Authentication and User Management
The client supports a demo-focused authentication flow using username-only login and JWT tokens.
| Function | Method | Endpoint | Description |
|---|---|---|---|
login | POST | /auth/login | Issues a JWT for a provided username. |
getUsers | GET | /users | Retrieves all users with their assigned roles. |
createUser | POST | /users | Creates a new user record. |
assignRole | POST | /users/:id/roles | Assigns a specific role to a user. |
Sources: frontend/src/api/endpoints.ts:46-72, PLAN.md:95-104
Authorization and Permission Matrix
A critical part of the client is managing the relationship-based access control (ReBAC) configuration.
The sequence diagram shows the interaction for viewing and modifying the global permission matrix. Sources: frontend/src/api/endpoints.ts:101-120, frontend/src/pages/PermissionsPage.tsx:23-31
Resource Registry (Tables)
The client manages the "Table" resources which represent the objects secured within the system.
getTables: Fetches the registry of tables (e.g., clients, invoices). Sources: frontend/src/api/endpoints.ts:89getAllowedTables: Specifically fetches tables that the current authenticated user has "read" access to. Sources: frontend/src/api/endpoints.ts:123, PLAN.md:144-152getTablePermissions: Retrieves granular CRUD permissions (create, read, update, delete) for a specific table relative to the current user. Sources: frontend/src/api/endpoints.ts:126, frontend/src/pages/TablePage.tsx:28-36
Data Structures
The client uses TypeScript interfaces to ensure type safety across the frontend.
// Sources: [frontend/src/api/endpoints.ts:25-44]
export type PermissionMatrix = {
roles: string[];
tables: string[];
matrix: Record<
string,
Record<string, { create: boolean; read: boolean; update: boolean; delete: boolean }>
>;
};
export type TablePermissionsResponse = {
table: string;
canCreate: boolean;
canRead: boolean;
canUpdate: boolean;
canDelete: boolean;
};
Demo Endpoints
The client includes specialized endpoints for a "Clients" demo to show the immediate effect of permission changes. These are mapped to the /api/demo route in the backend.
demoClientsList:GET /demo/clientsdemoClientCreate:POST /demo/clientsdemoClientUpdate:PUT /demo/clients/:iddemoClientDelete:DELETE /demo/clients/:id
Sources: frontend/src/api/endpoints.ts:129-146, frontend/src/pages/TablePage.tsx:49-58
Conclusion
The Frontend API Client provides a robust, typed interface for the MuteTaxes CRM Demo. By centralizing request logic and mirroring the backend's resource-based architecture, it enables dynamic UI changes—such as hiding unauthorized sidebar items or disabling action buttons—based on real-time OpenFGA permission checks.