DEV Community

Cover image for Reactjs Protected Route

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...
Collapse
 
mounisbhat profile image
Mounis Bhat

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.

Collapse
 
collins87mbathi profile image
Collins Mbathi

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

Collapse
 
arjun259194 profile image
Arjun259194

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

Collapse
 
snehasishkonger profile image
Snehasish Konger • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
collins87mbathi profile image
Collins Mbathi

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

Collapse
 
madza profile image
Madza

Awesome share, thanks a lot 👍💯✨

Collapse
 
everbliss7 profile image
Blessing Tayedzerwa

Can you do one without Redux?

Collapse
 
collins87mbathi profile image
Collins Mbathi

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

Collapse
 
hassanzohdy profile image
Hasan Zohdy

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(); 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

Thanks for the article though, it would be helpful for those who are not familiar with Redux.

Collapse
 
collins87mbathi profile image
Collins Mbathi

I will make one .with usecontext

Collapse
 
ashok_pateliya_a065307ccb profile image
Ashok Pateliya

thanks

Collapse
 
hassanzohdy profile image
Hasan Zohdy
Collapse
 
layan_sms profile image
Layan

Grate method, ever, I haven't seen a simple method like this, i suggest use it with Context .

Collapse
 
ilaroy611 profile image
ILA Saxena

Thank you! i was looking for the same thing and found it here, your article helped me a lot!

Collapse
 
collins87mbathi profile image
Collins Mbathi

You are welcome

Collapse
 
imsuvesh profile image
Suvesh K

State is lost when we refresh app, user needs to login again. LS and SS are better options.

Collapse
 
collins87mbathi profile image
Collins Mbathi

Nope. Redux has persist feature

Collapse
 
athulchandroth profile image
athulchandroth

state will be lost when you do a browser page refresh

Thread Thread
 
mozi47 profile image
Muzakir Shah

use redux-persist, then it wont be lost.

Collapse
 
scriptneutron profile image
script-neutron

Naa , it’s persist .. local storage

Collapse
 
athulchandroth profile image
athulchandroth

As you said redux state is not persistent between refreshes, u need LS or SS to store something to make a route protected.

Collapse
 
mozi47 profile image
Muzakir Shah • Edited

Now it is. Use redux-persist.

Collapse
 
sudarshansb143 profile image
sudarshan • Edited

Can you explain from where you have imported ?
<Navigate />

Collapse
 
collins87mbathi profile image
Collins Mbathi

Imported wat ?

Collapse
 
sudarshansb143 profile image
sudarshan

updated original comment ?