Authorization in Node.js and React.js: Best practices and tips

Delivering complex new features can often overshadow the importance of having proper authentication and authorization in place. In this article, we are going to explore the latter and show some cool tips and tricks that will allow for more granular user access control.

Establishing roles in the system

Managing a large-scale system can be really challenging, especially if multiple people with different roles within the company have access to the same resources. The first task is to recognize all possible roles and document them. In our simple demo app, we are going to have Admin, Author, and User roles.

Create Permissions table in Database

The second step involves creating a model in the database that will store the relationship between roles and the actions that are being executed. We could write down all actions beforehand, just like roles, but I have found this approach to be more error-prone than simply creating new actions on the fly. Let’s say our first action is to create a post on our blog.

I will be using Prisma with Postgres but you can use any database of your choice.

Permission and User DB models

Creating authorization middleware

On the server side, we are focused on protecting certain routes from CRUD (Create, Read, Update, Delete) operations that lack the proper permissions to access them. On the frontend, we will implement much more granular access control, for example, by hiding buttons for certain operations, among other measures.

Before a request reaches our controller route, it must pass through our middleware pipeline. This setup allows for an early return in the case of errors or forbidden actions being performed, enhancing security and efficiency.

Authorization middleware

Using middleware in controller

Attaching middleware to a route inside the controller is crucial to perform checks before the request has a chance to reach our handler.

Ordering of middlewares

The ordering of middlewares has a huge impact. In this case, we first attach authenticationMiddleware to check for a logged-in user, then check for his access rights in authorizationMiddleware, and finally, we check whether the data provided for post creation meets our criteria, such as post length, etc. Preserving this order is crucial!

Before we jump in to frontend part…

Let’s create a permissionController that is tasked with retrieving permissions from the database based on the action provided in the request parameters. We will also implement a custom hook on the frontend that will fetch permissions before displaying action buttons, for example.

Permission controller

Frontend — Let’s start with data fetching hooks

First, we want to ensure that we call our permissions hook using the React Query library. You can fetch data however you want.

Custom hook for fetching permission for specific action

Bread and butter of frontend authorization handling

Now, let’s create a useHasPermission custom hook that will protect our view layer from unauthorized access.

Custom hook for managing user permissions

Example usage

Here is a simple demonstration of how to use our permission control within React components to have fine-grained control over which parts of the UI user can see.

Using permission hook

Conclusion

Setting up robust authentication and authorization in Node.js and React.js applications is essential for maintaining secure and controlled access to features and resources.

By defining roles clearly, creating a dynamic permissions model in the database, and implementing middleware for authorization checks, we can safeguard our applications effectively.

On the frontend, utilizing custom hooks like useHasPermission ensures that components are rendered only when users have the appropriate permissions. These best practices and tips provide a foundation for developers to build secure, scalable, and user-friendly web applications.

If you’ve learned something new or enjoyed this article, feel free to follow me on LinkedIn or Twitter. Until next time!