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

Поділитися
Вставка
  • Опубліковано 16 жов 2024

КОМЕНТАРІ • 101

  • @vPopovPHX
    @vPopovPHX 8 місяців тому +13

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

    • @kodieCode
      @kodieCode  7 місяців тому +2

      Glad you enjoyed it!

  • @destinyforeveryone3659
    @destinyforeveryone3659 2 місяці тому

    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
      @kodieCode  Місяць тому +2

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

  • @samontefrankamirsong.5474
    @samontefrankamirsong.5474 7 місяців тому +1

    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
      @kodieCode  7 місяців тому +1

      I appreciate that!

  • @theonlymaster9374
    @theonlymaster9374 3 місяці тому +1

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

    • @kodieCode
      @kodieCode  Місяць тому

      Thanks for the comment.

  • @vaibhavdani4470
    @vaibhavdani4470 3 місяці тому +1

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

    • @kodieCode
      @kodieCode  Місяць тому

      Appreciate the comment.

  • @DankoKralski
    @DankoKralski Рік тому +2

    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
      @kodieCode  8 місяців тому

      Really appreciate the feedback!

  • @AIwithChinmay
    @AIwithChinmay 4 місяці тому +2

    straight and easy to understand thanks for the video.

    • @kodieCode
      @kodieCode  Місяць тому

      Thanks for giving me that feedback

  • @georgekopadze791
    @georgekopadze791 11 місяців тому +1

    Good luck with your channel. Liked your content

    • @kodieCode
      @kodieCode  10 місяців тому

      I appreciate it!

  • @MohammedHusainmobikira
    @MohammedHusainmobikira 17 днів тому +2

    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.

  • @raheelafzal5406
    @raheelafzal5406 Рік тому +1

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

  • @retrabaud-it
    @retrabaud-it Рік тому +1

    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
      @kodieCode  Рік тому

      Thanks for the kind comments!

  • @frankie_goestohollywood
    @frankie_goestohollywood Рік тому +2

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

    • @kodieCode
      @kodieCode  Рік тому

      Great suggestion!

    • @wdtrap
      @wdtrap 8 місяців тому +1

      @@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

  • @tanercoder1915
    @tanercoder1915 Рік тому +1

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

  • @johnmarynwanze3713
    @johnmarynwanze3713 7 місяців тому +1

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

  • @FreddyF1977
    @FreddyF1977 Рік тому +1

    Nice, simple, to the point.
    Thanks!

    • @kodieCode
      @kodieCode  10 місяців тому

      Glad it helped!

  • @justin9494
    @justin9494 Рік тому +2

    Thank you! The map part is genius

  • @yinkaenochadedokun467
    @yinkaenochadedokun467 8 місяців тому +1

    Great and concise 👍

    • @kodieCode
      @kodieCode  7 місяців тому

      Glad it was helpful!

  • @JasonJamesMoore
    @JasonJamesMoore Місяць тому +1

    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
      @kodieCode  Місяць тому +1

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

  • @natnaelhailu-com
    @natnaelhailu-com Рік тому +1

    Thanks for the helpful tutorial!!!

  • @alexandrejunior4775
    @alexandrejunior4775 9 місяців тому +1

    It's amazing! thank you very much!

    • @kodieCode
      @kodieCode  8 місяців тому

      Glad you like it!

  • @isaacjon
    @isaacjon Рік тому +3

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

    • @kodieCode
      @kodieCode  Рік тому +3

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

    • @imatrules
      @imatrules Рік тому +1

      Hey @@kodieCode any update?

  • @jonasmunkchristensen7384
    @jonasmunkchristensen7384 Рік тому +1

    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!

  • @justin9494
    @justin9494 Рік тому +5

    How do we add google auth to this?

    • @kodieCode
      @kodieCode  Рік тому +2

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

    • @justin9494
      @justin9494 Рік тому +1

      @@kodieCode Thanks!

    • @lokkki9
      @lokkki9 6 місяців тому +1

      @@kodieCode waiting for the video man!!

  • @alexmuiruri502
    @alexmuiruri502 10 місяців тому +2

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

    • @kodieCode
      @kodieCode  8 місяців тому

      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.

  • @investia_tech
    @investia_tech 10 місяців тому +1

    Good work!

  • @webhybrid809
    @webhybrid809 6 місяців тому +1

    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
      @kodieCode  Місяць тому

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

  • @balajig3306
    @balajig3306 4 місяці тому +1

    Nice ❤

  • @dchudziak
    @dchudziak Місяць тому +1

    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
      @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

  • @IXBoyI
    @IXBoyI Рік тому +1

    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
      @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

  • @yourlinuxguy
    @yourlinuxguy 6 місяців тому

    Really nice video, Thankyou.

    • @kodieCode
      @kodieCode  6 місяців тому

      Glad you liked it!

  • @zstudio6127
    @zstudio6127 11 місяців тому +1

    thanks you for this tut

  • @levinmwanganyi3929
    @levinmwanganyi3929 27 днів тому +1

    Thank you

  • @gustavostarace1252
    @gustavostarace1252 Рік тому +1

    Great content, thx!

  • @alonsoestevam
    @alonsoestevam 4 місяці тому +1

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

    • @saarza9991
      @saarza9991 2 місяці тому +1

      Doesn't matter it's a framework

    • @kodieCode
      @kodieCode  Місяць тому

      It won't make an difference.

  • @hankpham4431
    @hankpham4431 7 місяців тому +1

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

    • @kodieCode
      @kodieCode  Місяць тому

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

  • @itsLarryAlright
    @itsLarryAlright 6 місяців тому +1

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

    • @kodieCode
      @kodieCode  Місяць тому

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

  • @Sylar7773
    @Sylar7773 Рік тому +1

    Thank You so much!!!

  • @holakonoob
    @holakonoob Рік тому +1

    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
      @kodieCode  Рік тому +1

      Great suggestion. Thanks for the feedback.

    • @holakonoob
      @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

  • @ASOCMARCTKD
    @ASOCMARCTKD 7 місяців тому +1

    How can I Implement roles of users?

    • @kodieCode
      @kodieCode  Місяць тому

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

  • @njordhoder
    @njordhoder Рік тому +1

    This only dynamicly shows the menu items. If a user is not logged in it still can go to the private route by typing it in. There is no redirect.

    • @kodieCode
      @kodieCode  Рік тому +1

      The routes are only accessible when logged in as the routes are only defined when authenticated therefore not accessible. If a user not logged in tries to directly access a private route they will be shown the default controller

    • @njordhoder
      @njordhoder Рік тому +1

      Wow never thought of setting it up like that. Makes absolute sense. An aha moment for me. Thanks for the reply.

    • @kodieCode
      @kodieCode  Рік тому

      No problem. The great thing about an overall Auth controller with useContext is that you can make just about anything easily conditional on the user being logged in.

    • @parker7721
      @parker7721 Рік тому

      But what If the user enters to that route from a different tab, he is logged in but since the state of user logged in is only on the other tab, now he wont have access? @@kodieCode

    • @satishksharma
      @satishksharma 10 місяців тому

      This is okay but how can we show 404 page and not authenticated user according to condition.

  • @VayunEkbote
    @VayunEkbote Рік тому +3

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

  • @mahletmahi-r5e
    @mahletmahi-r5e 7 місяців тому +1

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

    • @kodieCode
      @kodieCode  Місяць тому

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

  • @goffardeveloper2056
    @goffardeveloper2056 11 місяців тому +1

    how to add role user sir

    • @kodieCode
      @kodieCode  8 місяців тому +1

      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
    @ankoh69 Рік тому +1

    rooutah

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu Рік тому +1

    thank you