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
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Stage 3 Walk-Through

1:41 with Laura Coronel

I’ll show you how our app will look by the end of this stage.

[MUSIC] 0:00
You'll often need to protect certain routes in 0:05
your application from unauthorized users. 0:07
For instance, the authenticated route would likely display private 0:10
information that we don't want unauthorized, or logged out users to view. 0:14
In this stage, you'll use React Router to control what users can and 0:19
cannot view in your application based on their identity. 0:24
You'll create a routing feature that allows only logged in users 0:28
to view the authenticated and settings pages. 0:32
Users who aren't authenticated will be redirected to the sign in page. 0:35
You'll then provide a smarter, more efficient login redirect for 0:41
users, so that after logging in, 0:46
the user will be redirected to the original page they tried navigating to. 0:48
For example, if an unauthorized user tries to navigate to the Settings page, 0:53
they will be redirected to the Sign In page. 0:59
But once they sign in, they'll be redirected back to the Settings page. 1:02
You'll also preserve the user state and 1:07
theme setting across page refreshes by implementing a cookie that keeps track of, 1:10
or remembers, the authenticated user's data and settings while logged in. 1:16
You'll learn how to create, read, update, and delete a cookie. 1:21
Lastly, you'll practice your refactoring skills 1:26
by creating an errors display component, and an API helper function. 1:30
These improvements will reduce duplicate code and enhance maintainability. 1:34
Let's get started. 1:39