Building Scalable Access Control Frameworks in React
summary
Compares using CASL (declarative ABAC with createAbility and ability.can rules) versus a custom policy-as-code system (YAML policies evaluated with the CEL evaluator in the browser). Shows a working usePermission hook that combines CEL policy checks, contextual validators, and Redux Toolkit/TanStack Query conditional fetch + caching of policies, and points out a performance bug: subscribing to the entire store with useSelector causes excessive rerenders—use granular selectors instead. Recommends enforcing rules server-side for security and keeping policy definitions as a single source of truth.
AI-written summary · about
chapters (10)
- 0:00Introduction and icebreaker
- 1:49Access control challenges
- 2:55Introduction to ABAC
- 5:07Enforcement strategies
- 6:10Implementing access with CASL
- 10:35Building a custom solution
- 12:33Policy evaluation and caching
- 14:04Contextual logic and hooks
- 17:05Granular state management
- 18:36Summary and takeaways
related talks
37mCASL. Isomorphic Permission Management
25mModernizing Authorization: From Basic Roles to Decoupled ABAC
26mCan It Be Done? Building Fine-Grained Access Control for Back...
43mApplication Code of Conduct - Full-Stack Policy as Code
31mAccess Policies for Hybrid Cloud Environments
30mRedefining Access Control: Scaling Policy as Code for Humans and AI Agents
52mIAM policy power hour
20mCoordinated Access Control with @policy