DEV Community

Reactjs Protected Route

Collins Mbathi on November 17, 2022

Introduction React Router provides a convenient way to define protected routes that require authentication in order to access. By defaul...

Read full post

Mounis Bhat • Nov 19 '22

I feel adding global state management for authentication is an overkill, it will be better/simpler to use context, even local storage will do the job for you if you’re using jwt auth.

Collins Mbathi • Nov 19 '22

Its an option but ,remember leta say in a scenario you are building a complex web application.you will need a state management

Arjun259194 • Jan 30 '23

but Localstorage a risk for XSS and it's not a good practice

Snehasish Konger • Nov 20 '22 • Edited

I was recently stuck in the same problem, protecting the routes. I was using Auth0 in my project. And I was facing the problem in this section-

<ProtectedRoute>
 <Home/>
</ProtectedRoute>

The error was coming from react-router-dom, cause the version 6 doesn't support this format.
So, if anyone is using Reactjs +Auth0 only then try to do like this instead:

<Route element={<ProtectedRoute/>}>
    <Route path="/" element={<Home />} />
</Route>

Although your article is great, I'm saving it for future.

Collins Mbathi • Nov 21 '22

Nice really appreciate .this is helpful i have also learnt.thanks manh

Madza • Nov 24 '22

Awesome share, thanks a lot 👍💯✨

Blessing Tayedzerwa • Nov 18 '22

Can you do one without Redux?

Collins Mbathi • Nov 18 '22

yes, sure its possibe very possible
i used redux assuming maybe you will be building maybe a large application.
but you can use without redux and instead use useContext and useReducer

Hasan Zohdy • Nov 19 '22

What about building an app with a very simpler way instead of using Redux, works with small to very large scaled projects

yarn add @mongez/router

This will add Mongez Router in your project.

Now in your main/index file clean it up and add the following code

// src/index.ts
import router from "@mongez/react-router";
import HomePage from "./Home";
import LoginPage from "./Login";
import Guarded from './middleware/Guarded';

router.add("/", HomePage, [Guarded]);
router.add("/login", LoginPage);

// Start scanning for all of registered routes
router.scan();

Now implement the Guarded middleware

// src/middleware/Guarded.ts
import { navigateTo } from '@mongez/react-router';
import user from 'some-where';

export default function Guarded() {
    if (!user.isLoggedIn()) {
        navigateTo('/login');

        return true; // to stop the execution of the route
    }

    return null;
}