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.

Preserve the User State with Cookies

6:27 with Laura Coronel

In this step, we'll preserve the user's state and theme states across page refreshes by implementing a cookie that keeps track of (or "remembers") the authenticated user data while logged in.

Currently, when you refresh the browser as an authenticated user, 0:00
the authUser state resets to its default value of null. 0:05
There's no authenticated user in state, so the app redirects me to the Sign In page. 0:09
To fix this, 0:16
we'll use a cookie to keep track of the authenticated user data while logged in. 0:17
A cookie is a file managed by the web browser that can save 0:22
information from a website. 0:27
We'll use JavaScript Cookie, a simple library for 0:29
handling cookies to create, retrieve, and remove a cookie. 0:33
To get started, 0:38
we'll first need to install the JavaScript Cookie library to our project. 0:40
Open up the terminal that's running the client side of our project. 0:45
Press Ctrl+C to stop running the client. 0:50
In the terminal, type npm i js-cookie to 0:54
install the JavaScript Cookie library. 0:59
Once done, we'll run the client again with npm start. 1:04
In the file UserContext.js, we'll import the cookies 1:11
library near the top with import Cookies from "js-cookie". 1:16
We'll create a cookie to store the authenticated user 1:25
data right when we get access to it in our signIn function. 1:29
Under setAuthUser, we'll create a cookie with Cookies.set. 1:34
The first argument passed to Cookies.set, specifies the name of the cookie to set. 1:41
Let's pass authenticatedUser as the cookie's name. 1:47
The second argument specifies the string value to store in the cookie. 1:53
We'll store the stringified user object 1:59
with JSON.stringify() and passing it user. 2:04
We can set additional cookie options. 2:09
For example, an expiration by passing an object as the last argument. 2:12
We'll give the cookie an expiration by adding an expires key to the object. 2:19
We can set the expire value to any value we like. 2:26
The value 1, for example, creates a cookie that expires one day from now. 2:30
The authenticatedUser cookie is set and valid across the entire app. 2:37
We'll save our changes and in the browser we'll sign in. 2:43
To see if our cookie was created, we'll open up the developer tools. 2:48
If you're using Chrome, open the Applications tab. 2:53
Click the Cookies file, and you should see the authenticatedUser 2:57
cookie alongside the expiration date and time. 3:02
Refreshing the browser, however, still resets the authUser state to null, 3:06
which redirects you back to the sign in page. 3:11
Let's fix this. 3:14
There are a number of ways we could maintain the user's authenticated 3:16
state across reloads. 3:21
For this simple app, we'll set the authUser's initial state 3:22
based on the existence of an authenticatedUser cookie. 3:28
At the top of the UserProvider, we'll retrieve the value of the cookie using 3:32
Cookies.get(), which takes a cookie's name as a parameter. 3:38
So we'll pass Cookies.get("authenticatedUser") and 3:43
store the cookie in a variable called cookie. 3:49
If Cookies.get finds a cookie named authenticatedUser, 3:53
then cookie will equal the value stored. 3:58
If there's no authenticatedUser cookie, then cookie would equal undefined. 4:02
In the authUser state declaration, we'll update the initial 4:08
value to equal the cookie's value if the authenticatedUser 4:13
cookie exists, or null if the cookie doesn't exist. 4:18
We'll do this using the ternary operators. 4:23
In useState, we'll check if the cookie exists with cookie ?. 4:27
If the cookie exists, we'll set authUser to its value with cookie. 4:34
But when we created the cookie we needed to pass the value as a string. 4:40
So we'll use JSON.parse to parse the JSON string back into an object. 4:45
Now, if the authenticatedUser cookie doesn't exist, 4:52
we'll want authUser to be null. 4:57
When the app loads or reloads, the authUser state will 5:00
either be the user object stored in the cookie or null. 5:05
Let's save our changes and test it out. 5:10
Since we already created the cookie earlier, we should be able to 5:14
navigate to the authenticated route without signing in, and we can. 5:18
If we open up the React dev tools, and select the UserProvider component, 5:23
we can see the authUser state contains my data. 5:29
I can even close this tab and open our app in a new tab, and I'll still be logged in. 5:33
But when I try to sign out and reload the page, it looks like I'm still signed in. 5:40
This is because the authenticatedUser cookie wasn't deleted when I signed out. 5:47
Let's fix this. 5:52
In the body of the signOut function, let's add Cookies.remove(), 5:55
which deletes a cookie created by Cookies.set. 6:01
We'll pass Cookies.remove the name of the cookie to delete, so authenticatedUser. 6:06
Save our changes, and in the browser, click the Sign out button. 6:14
And in our Developer Tools, once we refresh the cookies, 6:18
we should see our authenticatedUser cookie is gone. 6:22
Great! 6:25