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

Well done!

You have completed React Authentication!

Sign up for Treehouse Back to Library

Preview the Project

2:16 with Laura Coronel

In this course, you'll set up Basic Authentication within a React application by implementing the user registration and login functionality of a simple app. Before getting started, let's have a quick look at the project for this course.

This video doesn't have any notes.

Related Discussions

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

Sign up

    Related Discussions

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

    Sign up

    Before getting started, let's have a quick look at the project for this course. 0:00
    The project app consists of five main routes or views. 0:04
    We'll start with the default root route. 0:08
    It's public and visible to every user, whether they're authenticated or not. 0:11
    There is a signup route where user can register using the signup 0:16
    form by submitting a name, username and password. 0:20
    Notice the validation errors that appear when a user submits an incomplete 0:24
    signup form. 0:29
    In the signin route, a user can log in to the app using their credentials. 0:30
    Again, if the user submits an incomplete sign in form, 0:35
    the app displays a validation error. 0:39
    There is an authenticated route that's accessible to authenticated or 0:42
    logged in users only. 0:47
    Finally, in the settings route authenticated users are able to control 0:48
    the look of the app. 0:53
    If a user tries to access the authenticated or 0:55
    settings route while logged out, the app redirects to the sign in page. 0:58
    I'm currently not registered, so I'll click the Sign up link to register. 1:04
    In the sign-up form I'll type a name, username and password. 1:09
    When I click the "Sign up" button I'm redirected to the authenticated route. 1:15
    Where I see the content, Laura Coronel is authenticated. 1:20
    Your username is laurac. 1:23
    In the header, notice how a custom welcome message appears, 1:26
    and both the Sign up and Sign in links were replaced by the settings and 1:30
    sign out link. 1:35
    Now that I'm a registered user, I can for example, 1:36
    log out of the app by clicking sign out, 1:40
    and sign in again by using my username and password. 1:42
    The app is also going to preserve the user's authenticated state across 1:46
    page refreshes. 1:51
    For example, if I refresh the app or 1:52
    even close the browser tab running the app then revisit the URL, 1:55
    notice how the authenticated user state persists. 2:00
    This will be a fun and meaningful project where you'll use a lot of what you've 2:03
    learned so far in React and JavaScript 2:08
    to build a robust authentication feature you can use in just about any project. 2:10

    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