Thanks - this was really helpful. I like that you kept everything simple and didn't get overly complicated, that made it very easy to pick up the concept and start coding.
Thank you so much for such a beautiful Video....Had not slept since last night since I was trying to do it by reading Documentations...You're so great....Wish I had explored this thing before!!
New to ProtectedRoute...sorry if my question is naive. Q : Arguments in the ProtectedRoute we destructing {component : Component, ...rest}, my doubt is why not the assignment is other way around, i.e. {Component : component, ...rest}, since we are passing the props as 'component' only, not 'Componenet' Thanks
const { component } = props ; // how you normally do to destructure an object const { component: Component } = props; // Destructure an object then give it a new variable name, Component In React every component name should always start with Uppercase because of JSX rules. Hence, assigning 'component' to Component is needed.
3:00 Thank you for these awesome videos, Here's a tip for best practices for new JS or react enthusiasts. When you're just returning some JSX from a component, you can go ahed and remove curly braces and 'return' syntax such as: ``` const Hello = () => ( Hi \> ) ```
importing auth in different js files is creating instances of them. How are you managing to set login= true in one page, then importing auth in another page and the value is still true??
So where should we read the data? Store user object in LocalStorage and then read data from it? Its good practise? so what if someone manualy change localStorage and change e.g role from user to admin?
Auth is something that's been really confusing to me to be honest, im very familiar with react and JS and everything in this video but i would relaly appreciate if there could be more in depth videos like this (which was great) about auth itself, different ways of handling auth in an application and whether write your own auth like you did or maybe use a package to handle it?
Thanks, @fayekhelmi! I wanted to break the videos down to focus on specific areas. Originally, I planned on creating the server side using PassportJS and wiring everything, but that meant getting into a bunch of other things at the same time. I might do a combined video showing everything end-to-end in the future . The next video might just focus on integrating PassportJS.
I suppose in real life situation that auth.isAuthenticated call should be made on every protected view attempt? Or just save it in state? I tried to do axios get and confirm the jwt token is valid, yet it seems somehow that check fails - undefined is returned when protectedrout component waits for that reply. Hmm, a little bit lost there.
I tried solving a use case using this approach but could not solve it. Have 2-3 open routes, 2-3 protected-routes, and a wild card route at the end of router switch. The protectedRoute being a component renders everything and starts executing whatever logic is inside it. For example, I hit a wild card route /asd and I want to redirect all wild card route to /home. Since protectedRoute component comes before the wild card route in App.js/.tsx the wild card route is never hit and I am redirected to the else condition logic inside my protectedRoute.
what about if i am signed in, and i click on browser back button? will it shoow me the signed in page? if yes, then then it seems wrong. if no, then how to do it?
I would like to know, what happenes if without clicked on login i tried to visit app page through url... Will it visit to app page or it will give 401 error as wrote in Protecting Route ?
I know it's a year later, but for anyone wondering now it would just redirect you back to whatever page you set it to in your private route . So if you go a protected route url without logging in, in your private route component use the Redirect component to take the user back to the main page if not logged in.
it is destructuring, you can use ****** in App.js function; and ***const SecretRoute = ( { Component, ...rest } )*** in protected.route.js. A component have to be named capitalize, so he use the syntax { component: Component } because the father component have the prop name "component". :)
One thing I noticed is that every lesson on React about Protected Routes and user authentication are copied straight up from the reacttraining.com. This example doesn't solve any problem on a major application where security and performance it's on account. In a real world scenario, you'll have a server-side authentication flow such as PassportJS with an endpoint (API) where you can make a AJAX request to check if user is authenticated and have access to certain routes.
I am wondering, what will happen if you pass random url name, when you are still logged in. In my code, I couldnot show 404 page not found in such condition.
when i was refresh /app profile, thats redirect to homepage. Why? i dont want to redirect from /app to homepage, i want stay in /app after logged in. How can i do it ?
You, sir, have a soothing voice.
Which theme he is using...?
Amazing 4yr old video that's still relevant today. Thank you for making this.
if anyone is using routes with children:
e.g.
then do this:
import React from "react"
import {Route} from "react-router-dom"
const ProtectedRoute = ({children,...rest}) =>{
return (
{children}
)
}
export default ProtectedRoute;
Today, you sir were my hero. Thank you.
@@bryanamezcua4680 glad to be of help
or import Fragmant and use
Thanks - this was really helpful. I like that you kept everything simple and didn't get overly complicated, that made it very easy to pick up the concept and start coding.
Now, I really didn't expect this to end up being a perfect ASMR video
Mention of "withRouter" saved my live🙏🏻🙏🏻🙏🏻🙏🏻
omg i've been looking this for 2 hours, thank you a lot :DDD
I spent entire 2 days looking for this.
10/10 honestly, great video and explanation!
Thanks, Bruh. You did justice to this topic. Cleared all doubts
You are very good teacher
Thank you so much! I really appreciate the kind words.
Sir, You pick an easy way to teach , I like this, Few can do this.
It is very hard to teach simple.
Thank you so much for such a beautiful Video....Had not slept since last night since I was trying to do it by reading Documentations...You're so great....Wish I had explored this thing before!!
smooth voice and clear explanation.thanks
the best tutorial on React Router I saw... nice broth
Thank u from Colombia. It was very helpful for me
I am grateful
You solved my problem. Thanks so much!
Very clear explanation, thanks
Best tutorial I saw for react router can u make video on design patterns in react
Really efficient tutorial man! thanks for your help, cheers from Brazil ;)
Just like what I need
Really awesome video
Very simple and subjective
Quality content right there! Thanks!
New to ProtectedRoute...sorry if my question is naive.
Q : Arguments in the ProtectedRoute we destructing {component : Component, ...rest}, my doubt is
why not the assignment is other way around, i.e. {Component : component, ...rest}, since we are passing the props as 'component' only, not 'Componenet'
Thanks
const { component } = props ; // how you normally do to destructure an object
const { component: Component } = props; // Destructure an object then give it a new variable name, Component
In React every component name should always start with Uppercase because of JSX rules. Hence, assigning 'component' to Component is needed.
Good one. simple and superb .
superb sir, you explained it very well
I really like this tutorial. It's perfect ! Thank you very much ! :)
Thanks, good explanation.
Thanks you very much for the video. i got stuck with this issue and you helped me solve it
Straight to the point. Thanks!
Simple and elegant. Nice.
Great tutorial, easy to follow. Btw, what font do you use?
thanks this was really help full .thanks alot
The last thing that I would like to see is try to get access to /app when you logged out
yup, I m too :(
Me too. I was literally waiting for that! 😅
The Video was really helpful........Thanks a million..
Great...it worked. really helpful. thanks
nice tutorial, thanks
This is exactly what I needed
3:00
Thank you for these awesome videos, Here's a tip for best practices for new JS or react enthusiasts.
When you're just returning some JSX from a component, you can go ahed and remove curly braces and 'return' syntax such as:
```
const Hello = () => ( Hi \> )
```
Awesome job, keep the good work ...
it's amazing tuturial
Thanks for sharing this project! good luck for you.
Thank you so much for amazing explanation!
Very useful .. THanks
Just awesome!!! Thanks a lot.
Thanks men, thats what i have been searching for :)
What if the routes I want to protect use the render prop because they render components that have props themselves? I get errors using this method.
Thank you man. You saved me ❤️
It really helped a lot, thank you!
HOw is protected if anyone can modify the frontend source code?
thanks dude!
thank you very much sir
importing auth in different js files is creating instances of them. How are you managing to set login= true in one page, then importing auth in another page and the value is still true??
this is just example, in real project this will be handle by backend.
So where should we read the data? Store user object in LocalStorage and then read data from it? Its good practise? so what if someone manualy change localStorage and change e.g role from user to admin?
Thanks it really helped me
Very usefull and short one
Auth is something that's been really confusing to me to be honest, im very familiar with react and JS and everything in this video but i would relaly appreciate if there could be more in depth videos like this (which was great) about auth itself, different ways of handling auth in an application and whether write your own auth like you did or maybe use a package to handle it?
Thanks, @fayekhelmi! I wanted to break the videos down to focus on specific areas. Originally, I planned on creating the server side using PassportJS and wiring everything, but that meant getting into a bunch of other things at the same time. I might do a combined video showing everything end-to-end in the future . The next video might just focus on integrating PassportJS.
@@nickkarnik9688 any quick hints on how to handle the passport redirect callback from the Express server in the React auth file? Great video!
The Net Ninja has a great series on Passport.JS and OAuth if that's any help.
ua-cam.com/video/sakQbeRjgwg/v-deo.html
Is it protected But how , One can change the the state of authenticated from developer options
thanks, simple solution ✅
man you are awesome!
You are a genius
Thanks, sir its very usefull
thank you so much
Excellent info.. It's a gem.👍 Thanks a ton 🙏
Good Tutor sir. Thank....
seems like you were using some device with butterfly keyboard, so annoying. I am suffering too) and ty for this short and useful explanation btw
how can i set role based routes for admin and normal user??
Really good, thanks!
Thank you for this video. I want to ask a question. Is it higher order component?
this function expires the login while refreshing please help me how to set session logout time
I wish I could press the like button 100 times 😄
you're a fucking god for this. thank you.
what is the IDE used in the video? and which is the recommended community IDE's available
🙏🏻🙏🏻🙏🏻 thanks and thanks and thanks🙏🏻🙏🏻🙏🏻
great vid
This is been very helpful, cleared few questions I had. Thank you.
Thanks man....
Thank you!
I suppose in real life situation that auth.isAuthenticated call should be made on every protected view attempt? Or just save it in state? I tried to do axios get and confirm the jwt token is valid, yet it seems somehow that check fails - undefined is returned when protectedrout component waits for that reply. Hmm, a little bit lost there.
I tried solving a use case using this approach but could not solve it. Have 2-3 open routes, 2-3 protected-routes, and a wild card route at the end of router switch. The protectedRoute being a component renders everything and starts executing whatever logic is inside it. For example, I hit a wild card route /asd and I want to redirect all wild card route to /home. Since protectedRoute component comes before the wild card route in App.js/.tsx the wild card route is never hit and I am redirected to the else condition logic inside my protectedRoute.
If you are using jwt, can you control access that way (like if they have admin privileges?)
thank you
this method "push() doesn't work in current version of react, can you please upgrade the video to the newer technologies
Can Any one help me ? i am getting the below error ----- >
./src/protected.route.js
TypeError: Cannot read property 'forEach' of undefined
I have the same issue when copying it over to react
what about if i want to write it like this with the new API :
instead of
how should component be?
what about if i am signed in, and i click on browser back button? will it shoow me the signed in page? if yes, then then it seems wrong. if no, then how to do it?
Can you please tell me which code editor you are using ?
hi , can you put some video related to how to use pagenotfound component and which will not impact private route.
the intro voice is 100% similar to sale commercial ads voice :)
I would like to know, what happenes if without clicked on login i tried to visit app page through url...
Will it visit to app page or it will give 401 error as wrote in Protecting Route ?
I know it's a year later, but for anyone wondering now it would just redirect you back to whatever page you set it to in your private route . So if you go a protected route url without logging in, in your private route component use the Redirect component to take the user back to the main page if not logged in.
Bro Good tut ;) !
this step of passing a component @ 08:55 was somehow confusing , can you please amplify this step :)
it is destructuring, you can use ****** in App.js function; and ***const SecretRoute = ( { Component, ...rest } )*** in protected.route.js. A component have to be named capitalize, so he use the syntax { component: Component } because the father component have the prop name "component". :)
One thing I noticed is that every lesson on React about Protected Routes and user authentication are copied straight up from the reacttraining.com.
This example doesn't solve any problem on a major application where security and performance it's on account. In a real world scenario, you'll have a server-side authentication flow such as PassportJS with an endpoint (API) where you can make a AJAX request to check if user is authenticated and have access to certain routes.
Yes, because a basic react tutorial for beginners is going to show you how to make an enterprise ready application... 🙄
What names this plugin for dependency management?
I am wondering, what will happen if you pass random url name, when you are still logged in. In my code, I couldnot show 404 page not found in such condition.
thank you very much for the help, but this only works until you update the page
you'd get a million views if you added asmr to the title :p
when i was refresh /app profile, thats redirect to homepage. Why? i dont want to redirect from /app to homepage, i want stay in /app after logged in. How can i do it ?
app.layout.js , line 11.
I think this is where you would find your answer.
how to use partial components in other component. but not in login component remianing SPA
What VS Code extension are you using for dependency management?
He was not using VS Code. He was using Sandbox codesandbox.io/s/ol6z72kjy9?file=/src/index.js
is it the right way to do this?, there isn't a plugin or something that avoid put this interventions in each part of my code..