Bummer! You have been redirected as the page you requested could not be found.
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