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!
Thanks alot. Really appreciate your support. Was pretty occupied last month. You guys really motivate me. Will bring new videos soon. Thanks for watching 🔥🔥
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
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
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()
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
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
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
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.
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
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
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!
Glad it helped. Thanks for watching
wow, that was really simplified and still functional, i think that this logic will fit my project, thanks a lot 🙏
Glad you liked it. Thanks for watching
This is gold!! Thanks for sharing the knowledge. Thumbs up and subscribed!
Thankyou for subscribing..
Its time you start making videos weekly I am your fan. Very simple and well explained, we owe you Monetization as your fan
Thanks alot. Really appreciate your support. Was pretty occupied last month. You guys really motivate me. Will bring new videos soon. Thanks for watching 🔥🔥
Yes 😍
Thank you ☺️
The way you explain the thing is great 👍👍👍👍
Thank you
Hmm... You stood true to your channel name. Its definitely easy to follow what you have done.👌
Glad you liked it. Thanks for watching 🔥
One of the few tutorials that actually helped, thanks
Glad it helped. Thanks for watching
Thank you. A lot! Saving the user state is what I have been looking for!
Glad it helped. Thanks for watching
Thank you for the effort making this tutorial. Really helpful 👍
Thanks for watching. Glad you liked it
Bahut badhiya super!
Thanks for watching
Brilliant short videos but detailed and quick just what we need
Thanks for watching 🔥
This video is so usefully, thanks my friend :D
Thanks for watching
wow so cool, this problem was confused me for a long time,but you explain so easy to understand!!!
Glad you liked it!
wonderful explanation.
Glad it helped. Thanks for watching 🔥
Very useful ! Thanks for sharing.
Glad it helped. Thanks for watching
You are the best and deserve more
Thanks alot. Really appreciate your support 🔥🔥
Great explanation again. 😇
Thank you
Helpful to all IT students.Nice video
Thank you
thank you very much!! amazing video !!!!🙂🙂
Thanks for watching!!
Great job, very clear and concise. Sub'd!
Such an amazing video ✨
Thank you 🔥
Nice Explanation bro, you make it easy 👌👌
Very helpful
Glad it helped
Exactly what i wanted
Thanks man
Thanks for watching
thanks I implemented this in my hobbie project, works perfect!
Glad it helped. Thanks for watching
Great vdo ✨
Thanks for watching 🔥
You are amazing, you saved me from heart attack 🥰🤞🏾😋
Glad you liked it!! Thanks for watching 🔥🔥
bro that cool, thx fo this video
Glad you liked it. Thanks for watching
How about user role if admin or normal user. Because if I store in local storage it can be edited. How to make secure
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
Nice to watch everything u explained ❤️
Thanks for watching 🔥
Strait to the point !! Thank you :-)
Thanks for watching
Thanks brother this helps me a lot. 👍
Thanks for watching 🔥
Great video
Thanks for watching
Thank you!!!
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 ? :/
You can do something like this
Thank you so much so how can we use this for admin and user
You can define two roles within your state and render routes conditionally specific to your user's role
Thanks, i didnt know i can wrap code using &&. i was always doing { user ? : ... ) nice
Glad it helped. Thanks for watching
Really well explained!!
Thank you
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
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()
Can you share your code snippet?
I am able to access the page like dashboard and profile using URL even after logout. how can I protect it ?
when you logout you shoud remove the user entry from localstorage
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
While reloading a dashboard page it's redirects me to profile page. Will you help me 😊
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
@@FullstackSimplified ya got it thanks a lot love from india ❤️
thank you :)
Thanks for watching
Subscribed.
Thanks. Really appreciate your support 🔥
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
Make sure you use the Link component from react router dom and not tag.
@@FullstackSimplified okay I'll get back to you
thank you very much
Thanks for watching
What's the background music? Can you please share the name. That's beautiful. And Obviously, your videos are super helpful
Nana Kwabena | Timpani Beat - th-cam.com/video/tycUC95voac/w-d-xo.html
Isn't verifying through a boolean value stored in localStorage really insecure as anyone can modify it?
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
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.
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
i have 3 roles , public , student , admin .
for each i want to have different routes and sidebar .
what should be the flow ?
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
@@FullstackSimplified
If isAdmin or isMode do this.
{ isAdmin || isMode && something }
I am trying to do this . Can you please tell me what's my mistake in this ?
❤️❤️❤️❤️❤️❤️❤️
👍
Thank you
Nice tutorial, but why the background music though?
Thanks for the feedback. Will fix this in the coming videos.
I got an infinite loop after doing this keeps saying I can't call a setstate inside use Effect hook
Please check if you have added an empty dependency array.
useEffect(() => ....your code, [])
What about showing and not showing Navbar?
You can do the similar thing, use ternary to show/hide navbar based on auth state
note for me operator dan akan tampil jika semuanya bernilai true
there is a problem in this code it is navigating us to the "/profile" on reloading
If you are storing the logged in state to 'true' in the local storage then it will load the profile page.
Great video! Contact me
Thank you so much