Implementing React Check Permissions: Intro

There is too much info on this so I am splitting it into a series.

Sometimes we render components conditionally in frontend applications, and sometimes these conditions are based on authenticated users having certain permissions.

It should also be noted that under no circumstances no sensible data should rely on frontend permission checks, as they are laughably easy bypassed by anyone why has a tiniest desire to do so.

So if you are hiding checkbox with admin rights behind some if statement on the frontend without checking permissions for the action on the backend, you better cease reading this article and hurry to do something about that timebomb.

Yet, I digress. So let us imagine what tools we want in our application for checking user permissions.

For the sake of simplicity I will assume the following in this series of posts:

• permissions are merely strings, they form an array of strings stored somewhere in our frontend application;
• permissions check is a process checking if required permissions are present in the permissions available to the user;
• permission check should be able to verify if all or some of the required permissions are present in the available permissions array;
• permission are set once and never change during the application lifecycle (in our case until the user leaves the page).

Permissions check is a feature, so it should be somewhat independent from other components of our system. Maybe to the extent of it being able to exist as a separate package, in case we want to reuse it in some other applications. Therefore its implementation should not be coupled with the application where it is used.

We will need:

• obviously a function to check permissions, this is the most primitive and the easiest part to test;
• a hook, as a fashionable means of delivery of our function;
• a component that can wrap other components and display them if user permissions match the required.

What we do not need is to know anything about where do permissions come from and how are the obtained.

Overall it's just glorified way of checking two string arrays, but it's quite interesting.

In the next part we'll be creating the function to check permissions and covering it with tests, since it is going to be the core of our check permissions module and we want to ensure it works as intended.