Engineering - Role Based Access Control in React

Date: 31.12.2021
Building features where parts of the website are visible only to user or admin quickly turns into a huge amount of variants for your website. Some examples,
  1. Private activities - 404 but show to user
  1. Public activities - most components are visible, but things like heart rate are visible only to the owner
  1. Public activities, the "Make Private" button is visible only to the owner and hidden for other users/not-logged in users
  1. Admin can view everything
To tame this complexity properly, you need a lot of tests and a lot of CI time and maybe even a QA team.
I wanted to make it very easy for me to visually see the access level of various components, so there is a less chance of making a mistake. To achieve that, I made a couple of components on React side
  • ShowToAdmin
  • ShowToOwner
And only to admin, they show borders and make it easier to just "see" the access levels of various components. Here is what I mean
notion image
Note that this is only a layer on the front end to aid the development, and proper access control has to be implemented on the backend to complete the security for these features.
Logo of trackfootball.app
Made for players looking to improve their games
Compatible with Strava logo