Guidelines for implementing Authentication, Authorization (RBAC), and securing tokens following Bulletproof React. Use when implementing login flows, protecting routes, managing JWTs, or adding role-based access control.
When implementing or modifying authentication mechanisms, user state, and component protection in this project, you MUST adhere to the following Bulletproof React security principles.
User information must be treated as a global piece of state accessible from anywhere in the application.
isAuthenticated or a raw string token.jwt-decode) natively in the client to extract the explicit User object (ID, email, roles, etc.) and expose it through the useAuth() hook.DatelocalStorageexp claim out of the decoded JWT. The frontend must rely entirely on the exact epoch timestamp generated and signed by the backend server.Authentication (who you are) is separate from Authorization (what you are allowed to see).
Authorization component.<Authorization allowedRoles={["ADMIN"]}>
<Button variant="destructive">Delete System</Button>
</Authorization>
dangerouslySetInnerHTML to render user-supplied or remote HTML payloads unless absolutely necessary. If required, the payload MUST be scrubbed using a dedicated sanitization library like DOMPurify before being mounted.