How to create Protected Routes and Authentication with React Router V6 2023

[@vPopovPHX]

This video is just pure gold! Straightforward, concise, without any useless information. Amazing!

[@kodieCode]

Glad you enjoyed it!

[@samontefrankamirsong.5474]

You deserved more subscribers. You are a good example on what the developers should follow. I haven't followed yours but I created something that is similar and in tsx.

[@kodieCode]

I appreciate that!

[@destinyforeveryone3659]

This video was exactly what I needed!! I've been confused with authentication and the bunch of different ways to do it and a video that cuts all the extra stuff and shows you the basics of how it works was perfect. Thanks so much, hope you make more videos was sad to see this was your latest on in a year.

[@kodieCode]

thanks for the comment. More coming in October now I have more time

[@meirstroh]

Finally someone who doesn’t code in the video just explains the code

[@theonlymaster9374]

This is a super useful video!!!, went through it, understood how everything is done, great video!!!

[@kodieCode]

Thanks for the comment.

[@DankoKralski]

Amazing video! I love how there are people like you that go straight to the point and explain in plain English. Thanks a lot for the video! PS: Better teaching methods than my university (will definitely suggest to my friends)!

[@kodieCode]

Really appreciate the feedback!

[@AIwithChinmay]

straight and easy to understand thanks for the video.

[@kodieCode]

Thanks for giving me that feedback

[@georgekopadze791]

Good luck with your channel. Liked your content

[@kodieCode]

I appreciate it!

[@raheelafzal5406]

your content is amazing seriously. i learned so much from this single video of yours,

[@kodieCode]

Awesome, thank you!

[@vaibhavdani4470]

Gold Gold Goldberg !! Happy to find this channel !!

[@kodieCode]

Appreciate the comment.

[@tanercoder1915]

I enjoyed the video and your accent, as well as learned from you

[@kodieCode]

Thanks for the feedback!

[@retrabaud-it]

yo bro thank u sooo much, i every day look yt, and try to learn something new, and u speak very easy for me! (sorry for my eng) gl bro at ur way!

[@kodieCode]

Thanks for the kind comments!

[@FreddyF1977]

Nice, simple, to the point. Thanks!

[@kodieCode]

Glad it helped!

[@natnaelhailu-com]

Thanks for the helpful tutorial!!!

[@kodieCode]

Glad it was helpful!

[@johnmarynwanze3713]

i love it great knowledge been passed here, thanks a lot

[@kodieCode]

My pleasure!

[@frankie_goestohollywood]

Excellent content!!!!! Thank you very much 🤓 I would love to see another tutorial with your implementation of local storage.

[@kodieCode]

Great suggestion!

[@wdtrap]

@@kodieCode it looks like maybe you're not making these videos anymore, but consider this comment as another vote for a video on the local storage

[@yinkaenochadedokun467]

Great and concise 👍

[@kodieCode]

Glad it was helpful!

[@justin9494]

Thank you! The map part is genius

[@kodieCode]

Thanks for feedback

[@alexandrejunior4775]

It's amazing! thank you very much!

[@kodieCode]

Glad you like it!

[@MohammedHusainmobikira]

sir you should create this in full playlist format that we can get more clearity for beginners its bit hard to understand everything, you should also connect it with backend that what routes are set in backend etc.

[@MohammedHusainmobikira]

bcz in react js authentication is most confusing part for beginners

[@kodieCode]

Noted

[@investia_tech]

Good work!

[@kodieCode]

Thanks!

[@isaacjon]

Great content. Please release a video about refresh and access tokens

[@kodieCode]

Thanks for the suggestion. I'll be working on that video soon

[@imatrules]

Hey @@kodieCode any update?

[@yourlinuxguy]

Really nice video, Thankyou.

[@kodieCode]

Glad you liked it!

[@jonasmunkchristensen7384]

Cool video! Simple and well explained! It would be very helpful to see an implementation with local storage as well as role-based authorization. Regardless, thanks for the awesome content!

[@kodieCode]

Great suggestion!

[@alexmuiruri502]

Hi @kodie, Great content here. However, I'd prefer to show the login page if a user tries to access a private page

[@kodieCode]

This is easy enough to do with creating a default route pointing at the login page. That means any route not created based on their status, will show that page instead.

[@gustavostarace1252]

Great content, thx!

[@kodieCode]

Thanks for the feedback

[@JasonJamesMoore]

Is it possible to work things this way using createBrowserRouter. Interested to understand this more, and see if I can use child routes with this kind of setup.

[@kodieCode]

It is, yes, React Router has moved on a bit since this tutorial but it's still relevant.

[@zstudio6127]

thanks you for this tut

[@kodieCode]

Welcome 😊

[@Sylar7773]

Thank You so much!!!

[@kodieCode]

You're very welcome!

[@itsLarryAlright]

Please I need a tutorial on how to use localstorage with this

[@kodieCode]

This was with LocalStorage. I'm working on a JWT version

[@webhybrid809]

can you help me to do same thing in next.js, i have to do with user role based , their tho 2 user role , so how to do in next.js with typescript?

[@kodieCode]

I don't use next.js as it's best IMO for websites and I'm mainly working on backend and admin panels

[@justin9494]

How do we add google auth to this?

[@kodieCode]

I'm planning to do a video on various third party Auth libraries including Google very soon.

[@justin9494]

@@kodieCode Thanks!

[@lokkki9]

@@kodieCode waiting for the video man!!

[@balajig3306]

Nice ❤

[@kodieCode]

Appreciate it!

[@hankpham4431]

can you make a new video on how not to make user logout whenever the page refresh?

[@kodieCode]

It's as simple as looking up the user details from the localStorage on a page reload.

[@IXBoyI]

why on refresh it does not hold the private links? It resets and I have to click on "login" again so they pop up

[@kodieCode]

This is because in that tutorial we are not storing that the user is authenticated in the localStorage or a cookie. This means a refresh of the page restarts the state. I am working on a video to expand on this authentication method and show how to start storing user details including if the user is logged in so that a returning user might be automatically authenticated

[@holakonoob]

heyy kodie how about make a simple tutorial that is in ts not js and handle auth via jwt cookie not token to be more secure then use R.R.D v6 to protect the routes

[@kodieCode]

Great suggestion. Thanks for the feedback.

[@holakonoob]

​@@kodieCode Btw remember my words your channel will grow super fast cause everything is good the audio the video's quality and also the content keep up the good work

[@mahletmahi-r5e]

yes pls do that user key and session expire thingi we do want it

[@kodieCode]

It's possible to add a user lookup to the database on page load but I will add more to this soon

[@dchudziak]

Isn't this method easy to bypass? User can easily change ahte isAuthenticated state or isPrivate consts. Is it okay to protect client routes like this and just protect private data on the backend?

[@kodieCode]

In theory. the video was meant to help people that were struggling with the exact structure of routes and private content. There are many other things that should be used for security

[@VayunEkbote]

I suggest that you make code along tutorials, with more catchy thumbnails. Your content is great, you will grow fast.

[@kodieCode]

Thanks for the tip

[@alonsoestevam]

Why are the extension files `.js` instead of `.jsx`?

[@saarza9991]

Doesn't matter it's a framework

[@kodieCode]

It won't make an difference.

[@ASOCMARCTKD]

How can I Implement roles of users?

[@kodieCode]

You would just need to add additional layers to the user object and define that in the routes

[@PeriklesPeriklesoglu]

thank you

[@kodieCode]

Welcome!

[@goffardeveloper2056]

how to add role user sir

[@kodieCode]

You would need to add an additional object against the user to define their role and then load the routes depending on what that role is allowed to access.

[@ankoh69]

rooutah

[@kodieCode]

Thanks

[@levinmwanganyi3929]

Thank you

[@kodieCode]

You're welcome