Roles and Permissions based Authorization for Frontend App

ROLES AND PERMISSIONS BASED AUTHORIZATION FOR FRONTEND APP WITH @IMPELSYSINC/REACT-RBAC
...by Abhisek Pattnaik, CE Services

Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights
Reserved. 1. Pre-requisites 2. Authorization 3. Existing Authorization in Frontend Apps 4. Introduction to React RBAC 5. Permissions 6. Usage 7. Available API 8. Custom Component 9. Demo 10. Relevant Resources 11. The End Agenda

Reserved. I'm an expert. Please don't try to teach me. Don't say to me "You Don't Know JS" and Kend C. Dodds can help you. Basic understanding about • Javascript (optionally Typescript) and • ReactJS Prerequisites

Reserved. • Authorization is the method of specifying access rights/privileges to resources. • Resource is defined as the entity viz. a component, a page, menu, etc. that is output in the application. • Action is defined as the type of operation (e.g. VIEW, GET, UPDATE, DELETE) that the user want to perform on the given resource. Authorization

Existing Authorization in Apps

Reserved. • Hard-coded roles checking. • Cluttered if statements for each role. Existing Authorization in Frontend Apps

Reserved. • Hard-coded permissions checking. • Lacks granular control. • Lacks standardization. • Difficult to extend. • Lacks flexibility. Existing Authorization in Frontend Apps

Introducing React RBAC

Reserved. React-RBAC React RBAC is an open-source library with which you get more granular control of resources and actions and has easy to use API for defining the permissions and controlling the visibility of the application components. React RBAC

Reserved. React-RBAC • Make permissions JSON for any role. • Statically define in Frontend or Dynamically fetch from Backend. The Permissions

React-RBAC Usage in Front-end

Reserved. • Import and use the useRBAC hook to get the rbac context value. • Pass the rbac context value to the imported RBACProvider. Where do we fetch or define the permissions for the React RBAC library? The App Component

Reserved. The Layout Component • You may fetch or define your permissions in a wrapper layout component.

Reserved. React-RBAC Available APIs

Reserved. React-RBAC Custom Permission Component

https://to.absk.im/react-rbac-demo Demo

Reserved. React RBAC • Repository: https://github.com/ImpelsysInc/react-rbac • NPM: https://npm.im/@impelsysinc/react-rbac • Blog Article: https://to.absk.im/react-rbac-article Relevant Resources

QUESTIONS? React out via [email protected] https://about.me/abhisekp

Roles and Permissions based Authorization for Frontend App

Roles and Permissions based Authorization for Frontend App

Abhisek Pattnaik

More Decks by Abhisek Pattnaik

Other Decks in Programming

Featured

Transcript