React: Authentication best practices
Preventing a user from accessing some parts of an application is a common use case on the Web. With React and the SPA (Single Page Application) pattern, you have to deal with it twice: from the API side and from the frontend side. We’ll focus on the frontend part in this article.
There are two ways for a user to access a view: through a link or directly by entering a URL in the browser. Let’s see how we can handle both cases properly.
Prevent a link from being rendered
The first way that comes to mind when you want to prevent part of your component from rendering is to use a simple conditional logic.
If you have lots of conditions, it will quickly become a little messy. You could choose to create a wrapper component that will do the check for you.
Using a wrapping component to condition the rendering of its children is very straightforward. However, you will quickly encounter two drawbacks. First, the children get computed even if they do not get rendered. Secondly, you cannot invert the behavior. For example, you might want to render something else in case there is no user (e.g. for a signin link).
That is the moment when React RenderProps comes in handy.
Using the RenderProps pattern, you can now show or hide content based on whether the user exists or not in your records. You can also improve the< Protected /> component to make it easier to use by connecting it to redux. Once connected to Redux, the component can retrieve the user's information automatically. You can improve the conditions you use to check permissions too.
Prevent a route from being accessible
The most commonly used router for React is react-router. We have already addressed how to build protected routes for simple cases. However, we recently faced during a project a real world problem with the<Switch /> component. The particularity of <Switch>is that all its children must be a <Route /> or a <Redirect />. It makes it impossible for us to use the <Protected /> component that we previously created.
Using the example above, if a user accesses directly the /admin route without having the administration permission, he will automatically gets redirected to a forbidden page. The <Admin /> component doesn't have to handle any of that logic.
Conclusion
In this article, we saw how to create a single component which handles conditional rendering of a component based on user permissions. You can use this component to hide links or sensitive information.
We also saw that you can handle protected routes with a simple function that redirects users to a specific page when they don’t have the right permissions.
Your React app is now safe to browse and ready for further improvements such as code splitting.
If you are interested in joining MeilleursAgents, we are hiring! Take a look at our job board to see if there’s a role for you!
