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.
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.
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.
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.
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.
Bread and butter of frontend authorization handling
Now, let’s create a useHasPermission custom hook that will protect our view layer from unauthorized access
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.
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.
Authorization in Node.js and React.js
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.
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.
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.
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.
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.
Bread and butter of frontend authorization handling Now, let’s create a useHasPermission custom hook that will protect our view layer from unauthorized access
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.
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.