My react routing structure

How I setup authentication checks in react

Osita Chibuike

Published in

Legobox

3 min readMay 25, 2018

Background

I build frontend applications and APIs often, usually I use a variety of tools, but react has been something I find interesting, enabling me to build fast and quick, although I could argue that vue matches it word for word, but that’s not the argument of the day, enough of the react vs Vue bullshit, so I do both. They are both amazing and I’m glad there are alternatives of frameworks to choose from. In the process of developing and creating applications using react, I came up with a general structure and routing pattern for my applications.

I consider this something I’d love to share and hopefully improve with directives from the community.

Pre-requisites

To this article, there are only two pre-requisites, (last time I wrote a pre-requisite it spread like wildfire, hope it wouldn’t be asking too much for it to happen again 🙃 )

You know to react, the one facebook created.
You’ve heard of redux

You got this down, then you are good to roll.

The Problem

The problem entails navigating between pages using the react router library, while also keeping track of authentication status, its already a common understanding of this problem with respect to authentication navigation, and usually its known that you can solve this with a simple setup of react router and redux, But there are many patterns to this very setup, in this article I’m going to explain mine.

The Solution

In order to navigate properly in the app, I set up with react router and implement a 3 component auth check flow, one component check for the visitors only pages, another component checks for the protected routes, and the third component encompasses all and does a general check for the application’s auth status, I know it sounds ambiguous now, but we are going to review the code struct and get into the nitty-gritty of things.

This was drawn directly from the codebase, as you can see, the idea is clearly presented. The three components in the case are AppCheck, EnsureVisitorOnlyContainer, EnsureLoggedInContainer.

Let’s have a look at the inner structure of these components.

AppCheck Component.

As we can see, this component checks the prop on update and confirms the state of the previous isLoggedIn status, to note if a user is logging in or logging out, depending on this, it redirects to another url specified in the redux setup, or it proceeds to logout if it's trying to log out. else it continues. with the rendering of the props children.

EnsureVisitorsOnlyContainer

This component set simply checks if the current route is amongst the visitors routes, if it is, then it checks the logged in status, if the app is logged in, it redirects the user to the /home route, any route listed in this component set would be redirected to the Home route if their path is found in the visitors list.

EnsureLoggedInContainer

This container checks if the current state of the app is not loggedin, it redirects to the / path, therefore all pages get to be managed via this structure.

AppCheck handling the process of logging out when the prevProp changes its status, while EnsureVisitorsOnlyContainer and EnsureLoggedInContainer handle redirects on different instances depending on the route and within which container it’s listed.

Conclusion

I am open to suggestions as to how this can be improved and to hear from you how you achieve yours, over time I hope to share other tricks and techniques I use in development with react and vue and help others learn how you can take huge advantage of the frameworks in building quicker than quick.