How to handle permissions with Styled Components

I’ve searched the web for a robust way to handle permissions in the UI level in a React app, but I haven’t found any proper way to inject the permissions the component needs without messing the jsx. In this article, I’ll share my way of thinking step by step until we will reach to the final solution. This solution will keep your components as clean and semantic as possible.

NOTE: This article will not discuss routes with permissions.

The requirements were quite straight forward:

1. Each user has a list of permissions.
2. User can or can’t see some components considering his permissions.
3. Adding permissions to any react component and any dom element.

I will now show you the way I’ve gone through to the desired result.

TLDR: The final result is at the end

First Attempt — The Wrapper Approach

My first idea was using a HOC combined with a Wrapper because HOC it’s a popular way to achieve a component enhancement in React and the Wrapper can help me add logic to DOM elements.

Step 1 — HOC

Let’s create our logic:

• Create a new file — HOC — withPermission.js
• Connect the store
• Compare the list of permissions of the user against the required permission of the component.

This is how it looks:

NOTE: The default of user permission is empty list and the default of required permissions is visible to all (marked by *).

NOTE 2: I’ve used useSelector hook. You can use the connect function as well.

Step 2 — Create A Permission Component

Now we’ll create a component (Permission.js) which uses the HOC from the first step:

Step 3 — How To Use

In every place we would like to use permission we will wrap the component with the Permission component we’ve created in step 2:

Conclusion Of First Attempt

Well, it is working, but the component becomes unreadable. We can’t now see the big picture (in other words- can’t understand what the component is telling us just by looking).

I’ve realized that this is not the solution I was hoping for, so here is my second attempt.

Second Attempt — HOC + Wrapper Approach

Step 1 — HOC

We use the same HOC from the first attempt.

Step 2 — Wrap shared components

Now we’ll use the HOC all over our shared components (the components we use in all our app: Button, CheckBox, Select…).

For example, this is how the Button.js component looks like:

Step 3 — Create A Permission Component

We use the same Permission.js component from the first attempt.

Step 4 — How To Use

Now, we can use the permission property in all shared components, and use the wrapper component in all other places:

Conclusion Of Second Attempt

Now You can see that the component looks much thinner and understandable but one thing is still missing. Using the Permission component in every place still looks bad and your eyes try to ignore it when briefing the code but it’s still much harder.

So here comes the third and final approach.

Third Attempt — The Styled Component Approach

Step 1 — HOC

We use the same HOC from the first attempt.

Step 2 — Wrap shared components

The idea is still good so we’ll keep it and wrap the shared components with the HOC.

Step 3 — Styled with permissions

Let’s create the file styledWithPermissions.js which use styled-components:

Here is where all the magic happens. After studying the styled-components library I’ve found how they export their ‘styled’ function and how can I override it.

Each use of ‘styled’ we are wrapping the component in the HOC we wrote, which let us use it with the logic of the permission.

Step 4 — How To Use

Now, let’s use our new styled components:

Conclusion Of Third Attempt

Now that’s the way I like it ;)

The shared components are clean and only received the permission property and the styled components also. No ugly wrappers, only clean and semantic code.

Some of you may not like the idea of combining styling with logic. As I see it, the styled-components library helps us not only writing css-in-js but also start writing more semantic code. When styling a button, I’m giving it a meaningful name like EditButton and avoiding names like StyledButton. With this ideology, adding logic attributes to a styled component just makes sense.

And as I promised:

Final Code

• HOC — withPermission.js

• Wrap all shared components with the HOC. For example:

• styledWithPermissions.js

• Using it:

Still not sure how is it working? here is CodeSandbox

Thanks for reading :)