Unauthorized Page Component
Relevant source files
The following files were used as context for generating this wiki page:
The UnauthorizedPage is a React client component designed to handle access control feedback within CellarNode dashboards. Its primary purpose is to inform users when they lack the necessary permissions or are accessing a dashboard intended for a different user type. It serves as the visual interface for authorization failures detected by systems like the validateUserType utility.
The component is "portal-aware," meaning it can distinguish between a user who is completely unauthorized and a user who is logged in but browsing the wrong portal (e.g., an "importer" trying to access a "producer" dashboard). In the latter case, it provides navigation links to the correct dashboard based on the user's authenticated type.
Sources: src/react/unauthorized.tsx:1-5, src/auth-guard.ts:3-5, README.md:21-23
Component Architecture and Logic
The component logic centers on evaluating the current user's type against the expectedRole required by the current dashboard. It uses the authenticatedUserType and a list of dashboardLinks to determine which view to render.
Conditional Rendering Logic
The component implements two primary states:
- Wrong Portal View: Triggered when the user is authenticated but their type matches a entry in the
dashboardLinksarray that differs from the current dashboard's requirement. - Access Denied View: A fallback state for generic authorization failures or when no matching dashboard link is available.
The logic relies on finding a matchingLink where the userType in the configuration matches the authenticatedUserType passed as a prop.
Sources: src/react/unauthorized.tsx:21-27, src/types.ts:63-67
Data Structures and Props
The component is driven by the UnauthorizedPageProps interface, which integrates with the broader authentication types defined in the system.
Properties Table
| Property | Type | Description |
|---|---|---|
expectedRole | string | The role/userType required to view the current page. |
onNavigateLogin | () => void | Promise<void> | Callback triggered when the user chooses to go to the login page. |
authenticatedUserType | string | null (optional) | The type of the currently logged-in user (e.g., "importer", "producer"). |
dashboardLinks | DashboardLink[] (optional) | A list of available portals to redirect the user to. |
Sources: src/react/unauthorized.tsx:6-11, src/types.ts:63-67
Supporting Types
The component utilizes the DashboardLink and UserType definitions to facilitate portal redirection.
export type UserType = "importer" | "producer" | "admin";
export interface DashboardLink {
userType: UserType;
label: string;
url: string;
}
Sources: src/types.ts:61-67
Integration with Authorization Utilities
The UnauthorizedPage is typically displayed when validateUserType returns false. This utility checks the AuthUser object against the expected UserType.
The validateUserType function simply compares user.userType === expected, and the results of this check often dictate whether this component is mounted.
Sources: src/auth-guard.ts:3-5, tests/auth-guard.test.ts:16-25
User Interface Elements
The component utilizes lucide-react icons and Tailwind CSS for styling. It provides specific visual cues based on the error state.
UI Components and Icons
- ShieldX: Displayed during a generic "Access Denied" state with a
destructive(red) theme. - ArrowLeftRight: Displayed during a "Wrong Portal" state with an
amber(warning) theme to signify a transition or mismatch. - ExternalLink: Used within buttons that redirect users to their correct dashboard portal.
Sources: src/react/unauthorized.tsx:3-33, src/react/unauthorized.tsx:55-58
Navigation Actions
- Direct Portal Link: Only available in the "Wrong Portal" view. It uses the
urlfrom theDashboardLinkthat matches the user's type. - Switch Account/Login: Uses the
onNavigateLogincallback. In the "Wrong Portal" view, this is styled as a text link ("Sign in with a different account"); in the "Access Denied" view, it is a primary button ("Back to Login").
Sources: src/react/unauthorized.tsx:42-51, src/react/unauthorized.tsx:65-70
Conclusion
The UnauthorizedPage component provides a polished, user-friendly way to handle authorization errors in the CellarNode ecosystem. By leveraging the shared UserType and DashboardLink structures, it ensures that users are not just blocked, but are actively guided toward the correct portal for their account type.