React Router v6 | Public and Protected Routes

[@ArisAris-fs1ip]

After literaly 1 month failling to build protected Routes, using outlet and protected component from shitty tutorials, now finally with your way works! Thank you!

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@clementlin3140]

This is gold!! Thanks for sharing the knowledge. Thumbs up and subscribed!

[@FullstackSimplified]

Thankyou for subscribing..

[@gokulap5644]

While reloading a dashboard page it's redirects me to profile page. Will you help me 😊

[@FullstackSimplified]

It reloads back to the profile page because when ever we reload we set the user in useEffect and the generic route which we have redirects us to the profile page. Instead of having the generic route with path=* outside the auth conditions we can have them separately for both the user states You can have a look at the code here - codesandbox.io/s/react-router-protected-routes-nynrfw?file=/src/App.js

[@gokulap5644]

@@FullstackSimplified ya got it thanks a lot love from india ❤️

[@garbjorn1757]

How about user role if admin or normal user. Because if I store in local storage it can be edited. How to make secure

[@FullstackSimplified]

You can store it in session. And while making any api call your backend should also check if the req is coming form the expected user or not and then you can throw unauthorised error from your backend

[@engineermaxwel6732]

Its time you start making videos weekly I am your fan. Very simple and well explained, we owe you Monetization as your fan

[@FullstackSimplified]

Thanks alot. Really appreciate your support. Was pretty occupied last month. You guys really motivate me. Will bring new videos soon. Thanks for watching 🔥🔥

[@thecareercoach231]

Yes 😍

[@FullstackSimplified]

Thank you ☺️

[@Ayoutubeaccount3]

One of the few tutorials that actually helped, thanks

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@shivaa3ps177]

Hmm... You stood true to your channel name. Its definitely easy to follow what you have done.👌

[@FullstackSimplified]

Glad you liked it. Thanks for watching 🔥

[@vaibhavshetty3781]

Thank you so much so how can we use this for admin and user

[@FullstackSimplified]

You can define two roles within your state and render routes conditionally specific to your user's role

[@feliprdev9762]

wow, that was really simplified and still functional, i think that this logic will fit my project, thanks a lot 🙏

[@FullstackSimplified]

Glad you liked it. Thanks for watching

[@darkness97439]

it's super simple and not complicated but the problem is when i want to have a 404 page you already use the "*" so how i will create my 404 page ? :/

[@FullstackSimplified]

You can do something like this

[@TheGroovySpace]

The way you explain the thing is great 👍👍👍👍

[@FullstackSimplified]

Thank you

[@willyhorizont8672]

Bahut badhiya super!

[@FullstackSimplified]

Thanks for watching

[@fluffymaverick]

Thank you for the effort making this tutorial. Really helpful 👍

[@FullstackSimplified]

Thanks for watching. Glad you liked it

[@jaym3034]

Thank you. A lot! Saving the user state is what I have been looking for!

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@ratonconcigarro8612]

This video is so usefully, thanks my friend :D

[@FullstackSimplified]

Thanks for watching

[@narayanbhagat510]

I am able to access the page like dashboard and profile using URL even after logout. how can I protect it ?

[@raho_mania]

when you logout you shoud remove the user entry from localstorage

[@FullstackSimplified]

Firebase signout function does it for you. Make sure you are setting the user state to null in onAuthChanged function when no user is found

[@蹦太君-o4d]

wow so cool, this problem was confused me for a long time,but you explain so easy to understand!!!

[@FullstackSimplified]

Glad you liked it!

[@kritigoswami7382]

Great explanation again. 😇

[@FullstackSimplified]

Thank you

[@JohnDoe-ej6vm]

wonderful explanation.

[@FullstackSimplified]

Glad it helped. Thanks for watching 🔥

[@vloggingwithMisha]

Such an amazing video ✨

[@FullstackSimplified]

Thank you 🔥

[@sujitrockstar221]

Helpful to all IT students.Nice video

[@FullstackSimplified]

Thank you

[@the_true_hier_to_the_sharingan]

Brilliant short videos but detailed and quick just what we need

[@FullstackSimplified]

Thanks for watching 🔥

[@gillesa290]

Very useful ! Thanks for sharing.

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@thecareercoach231]

Great vdo ✨

[@FullstackSimplified]

Thanks for watching 🔥

[@h__m7551]

thank you very much!! amazing video !!!!🙂🙂

[@FullstackSimplified]

Thanks for watching!!

[@tarik9563]

Hi, followed every step with same code but still ended up with losing localstorage after refreshing the page or when I go to the profile or dashboard page tried everything in my beginner power but couldn't find the issue ! can you help me with any idea ? my react router dome is 6.3.0 now

[@tarik9563]

for whome they have the same problem as me, the solution is to call document.getElementById("root") last in the reactDom.render function and to remove reportWebVitals()

[@FullstackSimplified]

Can you share your code snippet?

[@baranoden]

You are the best and deserve more

[@FullstackSimplified]

Thanks alot. Really appreciate your support 🔥🔥

[@slablife]

Great job, very clear and concise. Sub'd!

[@mohamedkalid8713]

Nice Explanation bro, you make it easy 👌👌

[@braham.prakash]

Exactly what i wanted Thanks man

[@FullstackSimplified]

Thanks for watching

[@sayyedaamerasharali7583]

Thanks brother this helps me a lot. 👍

[@FullstackSimplified]

Thanks for watching 🔥

[@mihirharshe6073]

Isn't verifying through a boolean value stored in localStorage really insecure as anyone can modify it?

[@FullstackSimplified]

Storing the Boolean value is just for showing how things work. In real scenario you'll have a proper auth system which you can use to determine if the user is authenticated or not and accordingly render the routes

[@asfnobambu]

Strait to the point !! Thank you :-)

[@FullstackSimplified]

Thanks for watching

[@rahulkrishna164]

Great video

[@FullstackSimplified]

Thanks for watching

[@akashbose3682]

Nice to watch everything u explained ❤️

[@FullstackSimplified]

Thanks for watching 🔥

[@contactdi8426]

What's the background music? Can you please share the name. That's beautiful. And Obviously, your videos are super helpful

[@FullstackSimplified]

Nana Kwabena | Timpani Beat - kzbin.info/www/bejne/qqrGhnZvatuil8U

[@techjourneyrecoded4114]

Really well explained!!

[@FullstackSimplified]

Thank you

[@ZexDev]

bro that cool, thx fo this video

[@FullstackSimplified]

Glad you liked it. Thanks for watching

[@0xredpill]

You are amazing, you saved me from heart attack 🥰🤞🏾😋

[@FullstackSimplified]

Glad you liked it!! Thanks for watching 🔥🔥

[@cecibenitez3917]

thanks I implemented this in my hobbie project, works perfect!

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@guilhermematos7448]

Very helpful

[@FullstackSimplified]

Glad it helped

[@clarkson9331]

Thanks, i didnt know i can wrap code using &&. i was always doing { user ? : ... ) nice

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@evoteck7273]

I got an infinite loop after doing this keeps saying I can't call a setstate inside use Effect hook

[@FullstackSimplified]

Please check if you have added an empty dependency array. useEffect(() => ....your code, [])

[@onyilimba]

Nice tutorial, but why the background music though?

[@FullstackSimplified]

Thanks for the feedback. Will fix this in the coming videos.

[@TuanAnh-ll1lu]

thank you very much

[@FullstackSimplified]

Thanks for watching

[@kashmirtechtv2948]

What about showing and not showing Navbar?

[@FullstackSimplified]

You can do the similar thing, use ternary to show/hide navbar based on auth state

[@maxwelochieng7658]

Probably The Best Protected Routes I have Seen. But I have a suggestion for You is something that I am struggling with. I want to create a Website with Auth but after you log in we have a dashboard that contains nav links but everytime I include Link the Browser renders an empty page or the navbar disappears but I want the Nav bar to be static . I am beginner

[@FullstackSimplified]

Make sure you use the Link component from react router dom and not tag.

[@maxwelochieng7658]

@@FullstackSimplified okay I'll get back to you

[@danieltkach2330]

Fantastic! Can you explain how to work with the token expiration, and also how to work with roles, whether the role should be saved on the token, please.

[@FullstackSimplified]

You can save the token in localstorage and retrieve it everytime when you app mounts and check if the token is alive. For roles it would be better if you fetch it everytime from your backend when the app mounts for the first time

[@JohnDoe-ej6vm]

i have 3 roles , public , student , admin . for each i want to have different routes and sidebar . what should be the flow ?

[@FullstackSimplified]

If you have three roles so instead of storing the boolean value in the logged in state., you can use object or strings as roles and render the routes accordingly

[@JohnDoe-ej6vm]

@@FullstackSimplified If isAdmin or isMode do this. { isAdmin || isMode && something }

[@JohnDoe-ej6vm]

I am trying to do this . Can you please tell me what's my mistake in this ?

[@profeskills768]

thank you :)

[@FullstackSimplified]

Thanks for watching

[@samnayakawadi]

Subscribed.

[@FullstackSimplified]

Thanks. Really appreciate your support 🔥

[@weslolo1074]

Thank you!!!

[@adilhashmi1735]

there is a problem in this code it is navigating us to the "/profile" on reloading

[@FullstackSimplified]

If you are storing the logged in state to 'true' in the local storage then it will load the profile page.

[@yotsusan_machi]

note for me operator dan akan tampil jika semuanya bernilai true

[@augischadiegils.5109]

❤️❤️❤️❤️❤️❤️❤️

[@rinkugoswami5323]

👍

[@FullstackSimplified]

Thank you

[@worldclasscode1847]

Great video! Contact me

[@soyayebhasanshafin8977]

Thank you so much