Flexible Authorization Component in React Using Functions

David Barral
Oct 19 · 3 min read
Image for post
Image for post
Photo by iMattSmart on Unsplash

Authorization, frontend-wise, is just showing or hidding stuff. In React apps the usual way to handle authorization is having a component that conditionally renders its children based on some authorization condition (having a specific login or having some role, for example).

Props, props, props

Using this Hook we can create a Visible component that receives a prop for each condition we want to check.

And we can use it in our code:

Simple and clean but it’s not flexible.

  • Each time we add a new flavour of authorization info to the user, we have to add new props to match.
  • Semantics aren’t clear. In the last example we expected the user to meet both conditions but our check passes when one condition is met. To fix it, we need to add an additional boolean prop requireAll or nest Visible components. Meh.

Use functions to have a flexible component

We can change the component to use a prop when that receives a function (user) => boolean that specifies the authorization policy:

This version fixes both problems mentioned earlier. Semantics are cristal clear now, and adding a new authorization trait to the user works seamlessly.

Added benefits

With the props based version we have to deal with two code branches, one to deal with the ownership and another to deal with the role:

Functions deal with it without breaking a sweat:

Nice.

Making the API friendlier

So, is it possible to have a middle ground between flexibility and readability? Yes, it is. Just use more functions.

Extending the User

It’s nicer but still a bit verbose. And, we also need to change userWrapper to deal with new authorization traits.

Using just functions

We provide a function for each condition and a way to compose them. Enterlogin, inRole, any and all.

Nice.

You can reuse the basic checks between different projects and define your custom checks for each project, make combinations, etc.

Summing up

The most flexible way to change how something behaves in JavaScript is using functions. By using simple functions and composition we can create flexible, readable and reusable APIs with ease.

Trabe

We are a development studio.

Thanks to Ceci García García

David Barral

Written by

Co-founder @Trabe. Developer drowning in a sea of pointless code.

Trabe

Trabe

We are a development studio. We use Java, Rails, and JavaScript. This is where we write about the technologies we use at Trabe.

David Barral

Written by

Co-founder @Trabe. Developer drowning in a sea of pointless code.

Trabe

Trabe

We are a development studio. We use Java, Rails, and JavaScript. This is where we write about the technologies we use at Trabe.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store