React Router Tutorial - 15 - Authentication and Protected Routes

[@deiwman4604]

You made this whole section so simple to understand and to follow. I bought a course on udemy and the teaching way of the teacher it's not even close to yours. Thank you a lot!

[@kumarsaroj18]

I am happy to share that I finished this series in one whole day (of course, I did write code side by side). Although, I am still clueless on few router related things used in my project, but this is undoubtedly a good tutorial)

[@bassam.2023]

There are so many tutorials that I've started and never finished. However, I always complete Vishwas' tutorials. He stays on point! Tutorial Grand Master right here! Thank you!!!!😁

[@Raul-si7bn]

Thanks!

[@BruceWayne-kw6xm]

This Channel is a Gold Mine.. i have learnt node , next js , react from it and every course was awesome

[@masvimydeen249]

You are an awesome instructor. Breaking things simpler to understand is your real magic. Lovely tone, frequency and consistent voice delivery is also a reason, things the you explained in your video are getting easily registered. Keep rocking in this space.

[@bijaysahoo9619]

Couldn't ask for a better tutorial. You are a GEM. Each aspect is crisp and clear. Even a paid course is no match for this. Thank you very much. Looking forward to each of the tutorial series.

[@dhruv.pandey93]

The most informative series on React Router Dom and that too latest version v6. Covers minor but important details like useLocation, and useSearchParams. Great playlist as expected!!

[@thucle4122]

Thank you Sir Vishwas, i coded along with you and found it really easy to grasp the basic concepts of React Router V6 whose documentation is not quite understandable. Wish you health and prosperity.

[@rishabhsharma6084]

what a coincidence.. I was implementing protected routing in my new project🤘🤘😁

[@chidyommy284]

Great playlist bro, it's the only tutorial on KZbin about React router that is explained in great details

[@isaacjon]

didnt understand a lot, but anyways so far i learned so much with your help, just commented this because i wanted you not to stop anytime from this kind of tutorials, but i would like to see tutorial about tutorial hell from you

[@learnkidsonline9732]

Best teacher! Simple examples! Best Tutorials!

[@mehdihosseinpour3351]

Great. It is the best video I've ever seen for protected route. I think you can improve it with adding multi role authorization as well as JWT authentication to it.

[@iamnirupampal]

Because of you i learned the react-router-dom thank you for your efforts

[@googlemani]

Thanks Viswas. Another great series in React Ecosystem. Exercises are small enough to focus more on the Router aspects. Well explained. Great Work 👏

[@nargeshaeri7028]

Thank you so much for explaining everything so clearly and in details. I really do not know how to express my gratitude. I have watched a lot of your tutorials and I found them really helpful. I wish you the best.

[@lakshaysingh1866]

Watched the complete course in one day...thanx buddy!☺

[@mrnabby4178]

Finally a proper and right video. Thank you sir.

[@alokranjan476]

Thanks a lot for whole series. You explained it really well in easy to understand language with appropriate example. Request to post such series in future.

[@alexuqt]

Wow I just finished watching the 15 videos and is this really is so good

[@kaempy]

Wow thanks so much Vishwas your content are always easy to understand and rich 🙏

[@squeezy99]

What a super series of videos - helped me enormously with a routing problem I had. Thanks for posting.

[@akashvenu359]

Thank you for explaining so elaborately.. this will definitely help me with my interviews

[@ashutoshranjan4644]

It was 🤯. I explored different dimensions of react router dom. React is really powerful!!!

[@saurabrakshit405]

Yes you have not disappointed any one ! Very well structured tutorial for React Router Library. But I want to mention I would be pleased if you have taught the Authenticated Routing with Username & Password Authentication.

[@paritosh3702]

It's very similar to this, a bit complex though but the flow is same

[@VivekThakur-sf9pr]

For demo purpose we can set the user and password and during login we can check with if condition that whether its correct or not, if its correct match than proceed to navigate where u can.

[@musiclovers8488]

hey Vishawas.. Thanks for these videos. Really appreciable work... you are best.

[@vino7tech]

Thank you very much sir for wonder React Router Tutorial. The best Complete React js Tutorial KZbin channel

[@Noone-lh5rv]

finally, someone teach me about React properly

[@eniolabakare5100]

Amazing tutorial series, as always. Thank you, Vishwas

[@ravikantchauhan2106]

Really helpful tutorial. bole to ek dam Jhakkas 😎

[@balloobhaiya]

i highly recommend to watch this

[@incognito_2512]

thank you so much. your turorials are most easy to understand

[@vigneshwarvenugopal922]

Thank you so much for your effort sir....i really gained more knowledge on and about ReactJs and now i can fearless develop the project on it....Once again ....Thank you So Much....

[@Raul-si7bn]

this series is just a (huge) hidden gem. No others series I've seen are this through, and with very good examples. That about React Router V6, but also, the style in general , the easy approach...i've seen many tutorials, since I am always looking for good and updated examples, and I can safely say, this is one of the best I've come across .. Keep up the good work! Implement Context , explain Redux (with toolkit maybe), firebase, firestore ...then MERN ..waiting for all of those! :D

[@arunkb6452]

Ohh Buddy... Timing completed previous videos just now... ❤❤❤❤❤

[@frontend_ko]

The best teacher, thank you!

[@lvhz]

Excellent series. Thank you!

[@jacobwwarner]

I was able to get something that worked using this technique with a Redux store. Thanks

[@kwwong1834]

Thanks Viswas, really great content!

[@wilwazka2957]

Powerful and yet so easy to understand. Thank you a lot.

[@wisdomelue]

this video is so awesome, loved the fact that you used the context API, thank you.

[@dandantin]

Thank you for this video! Congratulations my friend!

[@deniserodriguez3233]

So from my understanding, navigate() should only be called inside a trigger action or inside a useEffect. Otherwise you get an error on the console telling you that you need to call navigate() inside React.useEffect(). However, I didn’t get this error when I used . So I guess that is the only difference between using navigate(‘/login’); over .

[@revo572]

Thank you for giving such a quality content for free

[@eleah2665]

You have not disappointed me!

[@es7729]

It was an awesome playlist! Thank you!

[@VivekanandKadole]

proper and right way to understood

[@jasono873]

Big big Thank you 🙏

[@rajasankar1390]

Amazing Tutorials. All the videos are Gem. Thank You

[@dyg6945]

Thanks for these videos! That were simple and perfect!

[@shaantalk]

Great work Vishwas

[@muhammadzeeshan07]

A very important and well explained video Thanks bro

[@ProgramingWithSaman]

thank you dear vishwas ...you are an awesome dude

[@macdonaldmanana1358]

Amazing work, thanks!

[@cocoon1538]

I don't know if this is handled in a later tutorial, but the auth logic provided in this tutorial is not 100% secure by itself as anyone can modify "user" state in their browser to access protected routes. I understand that it is React (front-end) tutorial, but just a heads up that you might want to add an extra layer of security if using this in production.

[@S4sent]

Guru ji 🙏🙏🙏 awesome content 😍😍

[@hemonterroddur6948]

Thank you so much for this wonderful tutorial. It helps me a lot.

[@javeedakhter324]

Hi Vishwas,you videos are awesome you are doing a great job we also want your tutorials on webpack,gulp and other similar tools which help to avoid repetitive task in development and production. Thank you .

[@rajadastidar3765]

bro you are a very good developer

[@pankajsuryavanshi8332]

Let say we have params route like /product/:id how to protect this if product id is not present it will return empty structure.we have to throw error in this case

[@kashifumar4552]

Till now the best one. Plz maintain this

[@FrankieMendoza]

Thank you for this tutorial.

[@amiiko232]

i love you bro you saved my life

[@aakashyadav6228]

No hate to hitesh, but your tutorials are way more great

[@jerickgeronimo282]

do u have a github repo for this specific proj?

[@dhokiarinidh9809]

Thank you so much, very informative videos

[@rahulnag9582]

{replace:true} is not working ? did anyone faced this issue ?

[@shivangidimri4639]

Why are you using navigate() in one place and component in the other ? What is the difference?

[@jaybeatz8084]

bro, thanks! you explained it clear

[@krishnareddyyerram4615]

Thanks Viswas!

[@deepanraj8908]

How to use a useContext hooks in non react functional please explain 5:49

[@gopalakrishnanshanmugam7236]

Great Sir Thank you. Very helpfull tutorial

[@tusharpatil5060]

Hello Vishwas why have you not used useNavigate hook in RequireAuth.js

[@srirammj1083]

Hi sir, On reloading the protected route page ( let's say profile) the browser redirecting to login page with setting user as null (checked user state in browser -> inspect -> components -> authProvider -> state) but I want to stay in profile page even after reloading. If i use localStorage/cookie and setUser initially on useState, then anyone can set local storage/cookie user value and can have access to profile page. Please help me how to have completely protected route with stay on profile page even after click on refresh/reloading page🙏🏻. (Thank you for your excellent teaching)

[@thanushkanth2257]

Having the same issue..!!

[@reginaldamedee7433]

Thank you for this lesson! liked & subscribed!

[@datkumar1024]

Thanks a ton brother!!💯💯💯

[@youssef-attai]

Thank you so much, that was really helpful.

[@benarcher372]

Thank you so much for these valuable videos!

[@TheDEMMX]

Thank you Is there a repo with this code at the end of the course? The one on gihub only the first lesson

[@fpsstupor]

thanks for this series

[@blokeish]

Auth cannot be used in a class component. I get an error regarding calling hooks from within a class component.

[@danielnicholas1747]

thank you very much for this series

[@binyaminregev7344]

The last test in React Router Tutorial - 15 - Authentication and Protected Routes time 17:20 doesn't work for me. Using React 18.2.0 ; react-dom 18.2.0 ; react-router 6.22.0 It's the second series of videos from you I am doing, they are simple, easy to follow and code side by side I learn. This is why I raise this so if I am doind something worng or you need to update something in the video (as of February 15th, 2024 it's marked from 2 years ago).

[@alik64]

Thank for this playlist! 🙌 very helpfull !

[@Itsmeyouknow525]

Hey Anyone Here the children prop refers to the component we are going to wrap with the authProvider right?

[@rayusaki88]

Thank you very much! Very helpful!

[@MrNoeLeiva]

amazing tutorial man

[@rachidb9624]

Thank you very much for this tutorial, was very helpful !

[@shineLouisShine]

Awesome. Thanks a lot. 13:!3 - It's a shame that you aren't really explaining why this time you choose the Navigate component Instead of the useNavigate hook like you did in all the other places in the code. Or - why did you prefer to use the hook in all the other places and not the component. You had some really good opportunities to explain... It leaves me wondering... when should we use which.

[@damilolaomotola7269]

Great work!! But how do i keep user login even after refresh???

[@chaddwick25]

What is someone navigates to the login page via url in the address-bar ? Does replace in the navigation fix that usecase ?

[@kranthikumar5215]

Sir if i wrap all the routes in the authprovider nothing is displayed in the browser

[@Hrushikeshkswami]

Hello same problem I am also facing

[@Hrushikeshkswami]

Is your problem solved?

[@kranthikumar5215]

yes solved

[@kranthikumar5215]

you have to install latest version of react router dom

[@Hrushikeshkswami]

I am already using latest version

[@jimmy4262]

When I try to browse the Login page I get this error: "Error: useNavigate() may be used only in the context of a component."

[@hey_prompty]

Line 25:23: 'AuthContext' is not defined

[@sdm634]

Is there a way to prevent the login page from rendering after the user login? If type the path to login in browser the page appears

[@selvam3646]

Can we use useNavigate hook instead of navigate?

[@shvideo1]

The "user" context variable values after "logging in" is null (at 00:11:48 point). I checked everything. Don't know why it's not being passed to the Profile page. Figured it out! I My app does not have a navbar. I was appending "/profile" to the root URL and I read in a post after some research that doing it this ways refreshes the app and the context is cleared. Thank you Vishwas for your great videos.

[@hilalingereza4297]

Experiencing the same issue

[@amulagrawal1703]

I am facing the same problem, can you help me ?

[@krantikumarreddykommidy7294]

@@amulagrawal1703 did you resolve the issue ?

[@TheBindasSingh]

Bahut shandar, gajab.

[@marcr1118]

but works this even if you reload the page?