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
Now that we have a way to authenticate and identify users, we can associate data with specific users.
Resources
Treehouse Courses and Workshops
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
Now that any component can get
access to the authUser state,
0:00
let's have the Authenticated
component display the user's info and
0:04
update the Nav component to conditionally
render the navigation links.
0:09
Open up the file Authenticated.js.
0:14
We're going to replace
name with the user's name,
0:19
and username with
the user's actual username.
0:23
To get access to the authUser state,
0:27
we'll import both the useContext hook and
0:31
the UserContext with import {
useContext } from "react" and
0:35
import UserContext from
"../context/UserContext".
0:42
At the top of the Authenticated component,
0:49
we'll access the authUser
state with
0:53
const { authUser } = useContext(UserContext).
0:55
Now that we have access to authUser,
in the return statement,
1:03
we'll replace name with
{ authUser.name } and
1:10
username with {authUser.username}.
1:15
Let's save and
see your changes in the browser.
1:19
Awesome.
1:23
We're now seeing our name and username.
1:23
We'll now work on the nav bar.
1:27
Open up the Nav.js file.
1:29
Currently, the nav bar just renders
the signup and signin links.
1:33
We'll add conditional rendering so
that the signup and
1:39
sign in links only render when
the user hasn't signed in.
1:43
And once they do, the nav component will
render the settings and sign out links.
1:47
We'll start off by importing
the useContext hook and
1:53
UserContext with import {
useContext } from " react" and
1:58
import userContext from
"../context/UserContext.
2:04
At the top of the Nav component,
2:10
we'll access the authUser state with const
2:14
{ authuser } = useContext (UserContext).
2:19
Now that we have access to authUser,
in the return statement,
2:24
we will add a JSX expression under the nav
tag by adding a set of curly braces.
2:30
In the curly braces,
2:36
we'll use the ternary operator to
write our conditional rendering.
2:38
If authUser === null or
the user hasn't signed in,
2:43
render the sign up and sign in links.
2:48
So let's cut the links and
2:52
paste them inside our JSX expression and
fix the formatting.
2:54
Looks like we're getting an error.
3:00
JSX expressions must
have one parent element.
3:03
To fix this error, we'll use Reacts
fragment to group together the link tags.
3:07
We'll do so by wrapping both
link tags in an empty tag.
3:13
So I'll move these links to inside our
React fragment and fix the indentation.
3:19
You can learn more about React
fragment in the teacher's notes below.
3:27
Just know that fragment is used in
React to group elements together
3:31
without having to render
additional elements.
3:36
Now, if authUser does not equal null,
3:39
we'll then render the settings and
sign out links.
3:43
Let's copy the Link tags from above and
update them.
3:47
We can fix the formatting
by right-clicking and
3:51
selecting Format Document.
3:55
For the first Link tag,
we'll update the className to settings,
3:58
link them to the settings route and
update the text to say settings.
4:04
For the second link,
we'll update the className to signout,
4:10
link them to the signout route, and
update the text to say sign out.
4:15
We'll also add a span tag with
the message Welcome with the user's name.
4:20
Let's save our changes and
head on over to the browser.
4:30
Our nav bar now displays a welcome message
and the settings and sign out links.
4:34
We'll click the settings route
to make sure the link works.
4:40
And we're navigated to the settings route
where we're able to toggle dark mode,
4:44
change our accent color,
and change the font size.
4:50
When we click the Sign out link,
we're navigated to the signout route.
4:54
But the nav bar still
displays the welcome message.
4:59
This is to be expected, because we
haven't implemented the sign-out feature.
5:03
In App.js,
5:09
we see that the UserSignOut component
is rendered when the path is signout.
5:10
Navigate to the UserSignOut component and
we see that it's basically empty.
5:16
Let's change that.
5:21
When a user signs out, we want to
set the authUser state to null and
5:23
navigate them to the root route.
5:28
We'll actually start in
UserContext because this is where
5:31
authUser state lives.
5:35
In the signOut function,
we'll set authUser to
5:36
null with setAuthUser() and passing it null.
5:41
We'll then add signOut
to the value prop so
5:45
that we're able to call it in
the UserSignOut component.
5:49
Back in the UserSignOut component,
we'll import both useContext and
5:54
UserContext with import {
useContext } from " react " and
6:01
import UserContext from
"../context/UserContext.
6:06
The signOut function is in
the actions property, so
6:12
we'll access it with const { actions
} = useContext(UserContext).
6:18
We need UserSignOut to call the signout
function once it's rendered,
6:25
we'll do that by using
React's useEffect hook.
6:31
We'll import useEffect by adding it
to our useContext import statement.
6:35
useEffect takes in a function to
run once the component is rendered,
6:42
so we'll pass useEffect an arrow
function that calls actions.signOut.
6:48
Now that we've set the authUser
state back to null,
6:54
let's now navigate the user to the root
route using React Router's Navigate tag.
6:58
At the top of the file,
we'll import navigate with
7:05
import { Navigate } from
"react-router-dom".
7:09
Our user sign up component
will return the navigate tab,
7:14
we'll navigate the user to the root
route and add the replace prop.
7:19
Replace prop will replace the sign
7:24
out route in the history
stack with the root route.
7:27
This will prevent a navigate loop
when a user tries to navigate back in
7:31
the history stack by clicking
the browser's back button.
7:36
Let's save our changes and
test out the Sign out button.
7:40
We'll first need to sign back in.
7:44
When we click the Sign out button,
we're navigated back to the root route,
7:47
and we can tell the authUser state
is set to null since the navbar
7:52
is displaying the sign up
and sign in links.
7:57
We can also double check by opening up
the React dev tools, selecting the
8:00
UserProvider component, and to the right,
we see the state is set to null.
8:06
Great job so far, our UserContext
can now provide the authUser
8:11
state the signIn and signOut
functions to any component in our app.
8:16
With that being said,
8:21
there's one more improvement I
would like to make to our app.
8:22
Currently, when a user submits
a complete sign up form,
8:26
nothing seems to happen besides
the message in the console.
8:30
Instead, let's sign the user
in after they signed up.
8:34
Open up the file UserSignup.
8:38
We'll start by getting access to the signIn
function in our UserContext.
8:42
We're already importing
the useContext hook, so
8:48
let's just import UserContext with import
{ UserContext } from '../context/UserContext'.
8:52
At the top of the UserSignIn component,
9:00
we'll get access to the signIn
function through the actions property.
9:03
With const { actions } =
useContext(UserContext).
9:07
Now we're able to call
the signIn function.
9:18
In the if statement where we're logging
the success message to the console,
9:21
we'll call the signIn function
with await actions.signIn.
9:26
Taking a look at the signIn
function in UserContext,
9:31
it needs to be provided
the user's credentials.
9:35
So let's pass signIn, the user object
we created earlier in the file.
9:40
We don't need to add an if / else
statement like we did earlier to handle
9:48
the different server responses
because we just performed
9:53
a successful fetch call that
added our new user to the server.
9:58
So after we sign in the user,
we will navigate them to the authenticated
10:02
route with navigate(),
passing it /authenticated.
10:07
All right, let's save our changes and
test that out in the browser.
10:11
I'll fill out the sign up form,
10:17
and click Sign up.
10:22
Awesome.
10:24
We've been signed in and
navigated to the authenticated route.
10:25
Great, we now have our sign out,
sign up, and sign in features working.
10:29
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