Bummer! You must be logged in to access this page.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Authentication!
You have completed React Authentication!
Preview
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.
Resources
Check Cookies in Firefox:
- Open developer console by right clicking and selecting Inspect Element
- Go to Storage tab
- Expand the Cookies menu and select "http://localhost:3000"
Check Cookies in Safari:
- Open developer console by right clicking and selecting Inspect Element
- Go to Storage tab
- Click on Cookies
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up