Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Authentication

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

React Router, Authorization, and Refactoring Recap

3:16 with Laura Coronel

Congrats, you’ve built a robust client authentication feature!

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    You've done quite a bit in this stage. 0:00
    You started off by configuring React Router to protect private routes. 0:02
    You created the PrivateRoute component that either allows the user to 0:06
    access the private route or redirects them depending on whether or 0:11
    not the user is logged in. 0:15
    You then learn about React Router's useLocation hook, and 0:17
    how it can be used to make the sign-in redirect smarter. 0:21
    Now, whenever the PrivateRoute component redirects the user to sign in, 0:25
    they will be redirected back to the original site after signing in. 0:30
    Next, you learn how to use cookies to store data. 0:35
    First, how to store the authenticated user data, so that the user wouldn't 0:38
    be signed out if they refreshed the page or open the app in a new tab. 0:43
    Then how to store the settings data, so that it too would persist. 0:47
    Through both implementations, you now know how to create, 0:52
    read, update, and delete cookies. 0:58
    Lastly, you improved your app by refactoring your code. 1:02
    You created the ErrorsDisplay component that renders a list of errors 1:06
    onto the page. 1:11
    And created your own API helper function, 1:12
    which made communication with the API easier. 1:16
    The refactoring you've done may seem small but 1:19
    it has enhanced your app's maintainability. 1:22
    If you ever need to update how the errors are displayed, 1:25
    you would just make edits to one file instead of having to update multiple 1:29
    files that render the list of errors. 1:33
    The same could be said about your API helper function. 1:36
    If you change the URL to your server, just head on over to your API helper and update 1:39
    the URL right there instead of tracking down every fetch call throughout your app. 1:44
    Nice work implementing user authentication in a React app using basic 1:50
    authentication and React Router. 1:55
    Now that you've built a robust client authentication feature, here are a few 1:58
    suggestions about what you can do next using your React app and Express REST API. 2:03
    Try implementing other authentication schemes, 2:08
    maybe try a token-based authentication. 2:11
    Expand the Express API by configuring new routes that render specific 2:14
    content to the user. 2:19
    Like profile and settings information, or 2:21
    customize the app in any way you'd like, make it your own. 2:24
    You could connect to a third party API like Google Maps or a weather API. 2:28
    Connect the app to a database using the sequelize ORM, for example. 2:33
    That way, users can interact with the database by retrieving custom 2:39
    content from a route as well as add, update, and delete content. 2:43
    Or consider updating the front end with your own custom styles and layout, 2:48
    including making the app mobile-friendly with added accessibility support. 2:53
    And be sure to share what you create with the Treehouse community. 2:58
    Remember, we're here to help, so 3:02
    if you have questions about anything covered in this course, 3:04
    feel free to reach out to other students in the community or the Treehouse staff. 3:08
    Thanks everyone, and happy coding. 3:13

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up