Roles and Permissions Based Authorization for Frontend App​ With @ImpelsysInc/React-RBAC​

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

2. Copyright © 2022 : (HeartBangalore) 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

3. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights 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

4. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights 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

5. Existing Authorization in Apps

6. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
• Hard-coded roles
checking.
• Cluttered if statements for
each role.
Existing Authorization in Frontend Apps

7. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
• Hard-coded permissions checking.
• Lacks granular control.
• Lacks standardization.
• Difficult to extend.
• Lacks flexibility.
Existing Authorization in Frontend Apps

8. Introducing React RBAC

9. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights 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

10. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
React-RBAC
• Make permissions JSON for any role.
• Statically define in Frontend or Dynamically fetch from
Backend.
The Permissions

11. React-RBAC Usage in Front-end

12. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights 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

13. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
The Layout Component
• You may fetch or define your permissions in a wrapper layout component.

14. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
React-RBAC
Available APIs

15. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights Reserved.
React-RBAC
Custom Permission Component

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

17. Copyright © 2022 : (HeartBangalore) Impelsys Inc.All Rights 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

18. QUESTIONS?
React out via
abhisek.pattnaik@impelsys.com
https://about.me/abhisekp