How I Prevent unauthorized user to access restricted routes

#react #frontend #javascript #webdev

In my last post, I talked about how I simplified managing all my components. After building all the components for my backend project, I assembled them into the home page and created a flow between them to navigate from one feature to another.

But, I didn’t run the frontend for testing. Consequently, I did that, and obviously, I had many errors on the screen.

Firstly, I solved all the errors I had and checked whether all the components were working properly or not. After checking all components, suddenly I found one security issue in my application.

When I wanted to switch from one feature to another feature, I tried some kind of shortcut in the URL, and it worked. How, I don’t know.

As a result, it rendered my component that was restricted for the user I logged in. This was a problem for me due to data security and the exposure of protected routes.

I needed a solution. As a result, I searched about the problem and found out this is not only my problem but also a problem that all developers face.

They have a centralized solution for that, in addition to using a Protected component. The main idea of the protected component is to check given conditions.

If the conditions are true, then render the protected component, else navigate them to the login or register page. The component is also used to boost user experience.

Due to redirecting the user to the login or register page, this creates a smooth path for the user to use your application.

Now let’s understand the working of the protected component. The component generally takes two parameters.

The first one is children, which is the component we want to protect from unauthorized users. The second one is whether the user is logged in or not.

Now in the component, we need access to the state that shows whether the user is logged in or not. Now we have two variables that decide whether the user is authenticated or not.

Now one question may come to your mind: why do we give the second parameter when we already have access to the state that represents whether the user is logged in or not?

The reason is that if you want optional control over the controller, as a result, you have special control over this component. Now we check the condition.

For checking conditions, we use useEffect to track all variable or state changes. Now if the condition is fulfilled, then render the protected component, else navigate.

In the code section, I have done the same thing I mentioned.


export default function Protected({ children, authenticated = true }) {
  const navigate = useNavigate();
  const authstatus = useSelector((state) => state.auth.authstatus);

  useEffect(() => {
    if (authenticated && authstatus !== authenticated) {
      navigate("/login");
    } else if (!authenticated && authstatus !== authenticated) {
      navigate("/home");
    }
  }, [authenticated, navigate, authstatus]);

  return children ? children : <h1>Loading...</h1>;
}

I am still learning frontend development, so if you find anything wrong or have suggestions, feel free to share your thoughts in the comments.

Thanks for reading!