Protected Routes in ReactJS - React Router Dom
HTML-код
- Опубликовано: 3 окт 2024
- In this video I will teach you guys how to create Protected Routes in ReactJS. With protected routes, you can limit access to certain pages. This is great for an authentication system, where you only want people who are logged in to access a page.
-
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
Protected Routes
Fetch
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
Whenever i search a specific video about react. I always find Pedro's tutorial much more understandable compare to the others. :)
Trust me your channel is literally underrated.... I mean seriously man you just blew up my mind... keep posting such informative videos...god bless you
Amazing tutorial man! Clearly explained and straight to the point! I'm new to React and to React Router Dom, and I've been having troubles implementing a working authentication system. This helped me a lot. Thank you so much for making it!
Awesome! Glad I could help!
It actually works. You actually did a better job than the react router documentation itself.
Thank you!
Thanks friend. Was confused about state in another video, but that was cleared up here.
Glad it helped!
You sir, are a rising star. Your content proved useful in my case. You have my encouragements for your channel.
Wow, thanks! Really appreciate the support!
Your videos are always on point, very clear. Thank you !
Glad you like them!
Garotão, parabéns pelo conteúdo! Fera demais a ideia de criar um ProtectRoute!!
I really like your way of explaining, hope you and your channel all the best .
Thank you! I appreciate it!
Great Content Man!!
I'm always excited to see your content Keep it up ;)
Thanks a ton! I really appreciate that!
The best explanation on youtube by far
Wow, thnk you so much!
Thank you so much. This is probably the simplest and easy to understand tutorial about Protected Routes
8:06 just a tip, if you have a 'if..else...' statement which return things, you don't need to use the 'else' statement just add a 'return' after an 'if' closure
Hey man, I just wanna say that I cannot wait for my semester to be over so that I can watch all of your videos! I have a PERN stack project this semester and It's kicking my ass now because I never learnt React and Node before doing that project.
Awesome! I am excited to end my semester too to have more time to post video! I am glad you like to watch them!
Nice content, hope your channel get bigger & more subscriber!
Thank you! I appreciate it!
loved your explanation. I hope you will continue providing us more and more videos.
Thank you! I will continue!
whenever i forgot how to do protected route i always come here hahaha fourth time
Thanks for your work man 💪
My pleasure! Thank you for watching!
The most elegant way, thank you! 🚀
Glad you like it!
Great content man. Could you do a video on integrating protected routes into the UI? I'm talking about implementing react-router with nav menu bar, I'm having a hard time achieving this. Cheers:)
Sure thing!
you sir are doing the gods work , thank you so much , cant really thank you enough
Wow ♥️♥️♥️ thankyou so much
What a clear explanation thankyou so much for this video
thanks man u saved me.. I am looking for this whole day
Glad I could help!
@@PedroTechnologies i have some doubts i certain usecases please help me
Love your way of explanation brother! thanks for helping me alot!
bro, a tip would be to try to put your videos with subtitles in Brazilian Portuguese, because I am your faithful follower and with subtitles it would be better. hugs !
Thank you for being a loyal follower! É didicil fazer legenda em portugues mano kkkkkkk porque nao vai automaticamente, eu teria que botar eu mesmo. Mas se tiver qualquer duvida é so perguntar.
thank you very much, perfect video i was searching all day
the world needs u
hahaha appreciate the support
Great Content keep up the good work
Appreciate it! Thank you!
This video saved a lot of time for me, thx!
Glad it helped!
Thank you so much!!! The best explanation 🔥🚀
Glad you liked it!
Great Video! Very Helpful
Glad it was helpful!
Great explanation. Thanks man.
Glad it was helpful!
i appreciate this my guy
Thank you!
In Germany we call you "Ehrenmann"!
Hahaha just looked at what this means and I appreciate it!
Very nice video man, thanks for your amazing work, please keep continue on react... 👌👌👌
Thank you, I love react!
Sending the state(from), while redirecting, is something most people don't cover. Thank you so much. Jumping to 1 url, every time I reloaded the page... Was really bothering me. Again. Thanks!
Glad it was helpful!
Thanks bro. I was looking for it. Your instruction skill is amazing. Just make a specific video on withRouter.
Thank you! Yeah I agree i didn't explain withRouter very well lmao
Thank you for this video!
Glad it was helpful!
i appreciate this my guy and it is very intelignes man
Thank you!
Thanks, man, for an amazing explanation!
Thanks man, great and useful content, subscribing :)
Awesome, thank you!
Great! Thank you so much!
Very helpful. Thank you.
Glad it was helpful!
Thank you man, you made it very clear :D
Woohoo awesome!
letss gooo 🔥
Great video professor you safe some souls. Thank you very much but please do a video in the case someone has different navigation menu from different users.
Great content. Very helpfull Thanks
please do again for functional based components
Thank you for this video
nice video man .. keep it up
Appreciate it! Thank you
Thankyouu!! this is amazing tutorial!! could you tell us which react and react router dom version is being used in this tutorial ?
Thank you! This video was made a while ago so I would say it was react router V5 and below.
thank you, so good guide
Glad it was helpful!
Hey PedroTech, I'm curious about how you do the line cleanup. Is there a keyboard shortcut youre using to stack your code like that? thanks for all the good work! You've been helping me out a lot with my PERN personal project.
Glad to hear! This is an extension called Prettier!
@@PedroTechnologies pretty haha. Thanks a lot
withRouter is not a hook.. its a higher order component.. Greate video btw
Thanks! You are right!
What the f**k is Google doing with hindering our boy Pedro in moneitzing his great content? Wtf?
Lmaoo im monetized now!
@@PedroTechnologies Thank god! Otherwise Wojcicki would have received a very angry letter on her desk 😄 But I'm glad we resolved it civilly. Keep up the amazing content! 😎👌 #pedrotech
Thank you!
You're welcome!
Thsnk you !!
Thank you!!
You're welcome! Glad you liked it!
Thank you! Just one question: is there any change in this workflow with the newest version of React-Router-dom? Or do we still need to do it like in the video? Thanks!
please someone knowledgeable answer :D.
few things about the code I don't really understand if anyone would care to explain. First, we pass isAuth, component, and ...rest to the ProtectedRoute. Then, since ProtectedRoute is rendering a Route, we pass ...rest to route. I don't really understand why we need to pass ...rest though, considering that we're using the other props that we didn't pass in this same way, inside of the route (speaking about Component and isAuth). So I'm saying that we use Component and isAuth inside of the Route, but we don't directly pass them there like we pass ...rest, so why do we need to pass ...rest?
Secondly, with that said, do we even end up using ...rest? We use props in the render method , but not ...rest. Is ...rest and props the same thing here?
Hey, so the reason why I wrote ...rest is not because of possible props but for possible properties and parameters someone might want to put to their component. If you still have some doubts please let me know!
@@PedroTechnologies ohhhhhhhhh! that makes perfect sense now actually. thanks so much for the reply, happy to subscribe. awesome vids and explanations.
thanks Pedro
Your welcome! Hope you enjoy it!
@@PedroTechnologies it helps a lot all of your videos some are not yet done that I watched because of code that need to finish activity in school.
Creating a dedicated ProtectedRoute for every component is redundant. Is there a way to pass in all components you want to be protected in one statement?
Awesome vid bro. Saved me a ton of time. But there's something that's not quite clear for me: why do we need to pass the 'from' key into the Redirect component alongside with pathname? Is it something about redirecting a user to the page he had been trying to access via changing the URL before logging in?
Yeah, so this part is quite confusing. But the idea is that you want to determine that you are redirecting from the previous location and not from the protected route!
how do you not get ncaught Error: [ProtectedRoute] is not a component. All component children of must be a or ??
Great video, but what is stopping someone from changing the state in the browser using React Dev Tools? Honestly curious because I feel like that would be something super easy to do, unless I am missing something?
Good question! So I focused on just implementing the routing aspect of this. However in theory you would probably need to be authorized and authenticated in the backend. THerefore even if u change the state to say u are logged in, no api requests would be allowed because u wont be authorized/authenticated.
Thanks for the helpful video! Quick question. How would I change the isAuth state in App.js if I'm using a login screen under a route? Like in this example, if I was at /profile and the logout button was there instead, how would I be able to click the logout button there and update App.js isAuth state?
I would create a context state by using the context API!
OBRIGADAAAAA ME SALVOU!
Fico feliz :)
You forgot one point: How to pass information to the protected route:
You need to add props like this into it:
great video.
Very Good
Thank you! Cheers!
sir can you make video of combining protected route and React.lazy and React.Suspense please
i have my user dashboard protected now and if not logged in routes to login form but now i need to connect this to my login can you do a part 2 on how to connect this isAuth with user login page
Hi , how we can check the availability of access token to check user is authenticated in this scenario?
Hey great video!
I have a question about how secure this method is. Since the authentication check is based on the value of a single variable which is stored in the front end (browser), is this method prone to hacking? Could someone use the browsers console to manually change the authentication varaible to true and thus bypass having to login?
How would this compare to creating a static web page for the login page and only sending the React App after the user is authenticated?
Is there another video which can break this down for me?
Well, this wouldn't have any implications with the backend since to make a secure api you should use a method of authentication anyways. So even if the user manages to bypass the secure route, the page wouldn't show anything because they are not authenticated in the backend, meaning they are not passing a sessio variable or a jwt in their api calls.
Thanks
any idea what to use instead of withRouter thats in this video?
What is wrong if i am going to do like this
{
auth ?
(routes to all my protected routers) :
(routes to all my unprotected routers)
}
Hey another great video!
Wondering if you know the reason for an error i am getting... (I have tried to join this video with your 2nd in the login series (one with cookies))
I am getting the following when trying to load the protected page - in my case called Home: Error: Invariant failed: You should not use outside a
I believe it to be something around the line here:
import React from "react";
import { withRouter } from 'react-router-dom'
function Home() {
return this is a test;
}
export default withRouter(Home);
Hey buddy, Great video. Just wanted to add a small thing..Is there any way when the user redirects to login it pops a flash message such like "you need to login to access this page" something like that
Can you make some videos on Python Django Rest Framwork?
I love python, but I am only experienced with Flask. I was already planning on doing a flask series in the future. If iI end up learning django I will definitiely make videos about it!
Only problem im having is on page refresh it sends me back to "/"
if we dont have button like i have login page then who should we do
Good tutorial, it'd be great if you could do the same for React Router v6
great
I have a doubt. Please help me. I understood the whole protected routes thing. My doubt is if I refresh the protected page, it automatically logs out. How do I keep the state to log in even after refreshing the protected route?
Can you please make a short video about that? Thank you.
If you want to keep logged in you can do that in many ways. One way is by storing the userId in the sessionStorage. And every time your page renders you check if there is an id in the storage, if there is it means its logged in!
@@PedroTechnologies I did that. Thank you ☺️
please make with REACT ROUTER DOM 6(six)
How can do like this for mern app ?
As always, he doesn't assume any knowledge of the viewer. Good work!
absolute "banger"
Great tutorial but unfortunately this is not even the 1/10 of making an authentication system in React :(
where can we find this source code?
For some reason it is not working for me. It is entering the ProtectedRoute component and the condition isAuth is true, but it just won't render the Profile component, i've tried component={Profile} and component={}, none worked.
Seems I had imported BrowserRoute as Route and that's why it was not working
It should be BrowserRouter as Router instead. Let me know if it works!
@@PedroTechnologies It worked, thanks
How do I manage state though? It turns out whenever I route to a different path my previous states are lost, for instance whenever I am redirecting from login page to user page the auth state is lost and set to false and I am again redirected to login page. Do I need to use redux for the same? I am new to React js. If anyone can redirect me to a video I will be grateful.
you can use context api
or any state management tool
why does this fucking library change their code in every 5 days.
you could have make it more practical by using input with specified email/password that grant acces to each route after login
I think it's time for a new version of 'protected routes' tutorial. This seems outdated.
I'll not recommend this video to learn react authorization.
I understand! Any particular reasons? I like constructive criticism cause I grow from it :)