Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this step, you will use React Router to control what users can and cannot view in your application based on their identity.
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
Currently, the authenticated and settings
routes are accessible to any user,
0:00
whether they're authenticated or not.
0:05
This is likely not what you or
your users would expect.
0:07
The route should be private
to authenticated users only.
0:11
To fix this, we'll create a component
that will act as a gatekeeper for
0:15
the authenticated and settings routes.
0:20
Depending on if the user is authenticated
or not, the component will either allow
0:22
the user to continue to the PrivateRoute
or redirect them to the Sign in page.
0:28
We'll start off by creating a new
file in the components folder and
0:34
naming it PrivateRoute.js.
0:40
We'll create the PrivateRoute
component with const PrivateRoute,
0:43
setting it equal to parentheses and
passing the arrow function.
0:49
At the bottom, we'll export it
with export default PrivateRoute.
0:55
We'll check if the user has signed
in by checking if the authUser
1:01
state has a value.
1:05
If it does,
we know the user has been authenticated.
1:07
To access the authUser
state from UserContext,
1:10
we'll need to import both
the useContext hook and UserContext.
1:15
So at the top of the file type import
1:21
{ useContext } from 'react' and
1:25
import UserContext from
'../context/UserContext'.
1:31
And in the PrivateRoute
component we'll access
1:38
authUser with const { authUser } and
1:42
setting it equal to
useContext(UserContext).
1:47
We'll use an if / else statement to
check if authUser is a truthy value.
1:52
If it is,
1:58
we'll use React Router's Outlet tag to
allow the app to render the PrivateRoute.
1:59
And if the user hasn't signed in or
authUser is a falsey value,
2:05
then we'll use React Router's Navigate tag
to navigate them to the sign in route.
2:11
So let's import both the navigate and
2:18
outlet tag at the top of our file
with import { Navigate,
2:22
Outlet } from 'react-router-dom'.
2:30
If authUser has a value,
we'll tell our app
2:34
to render the route by
returning the Outlet tag
2:39
and if it doesn't,
we'll return the navigate
2:44
tag that navigates the user
to the signin route.
2:48
Instead of an if statement, we could also
return a ternary operator like this.
2:52
But I'll keep the if / else statements
since I like its readability.
3:01
Our PrivateRoute component is all set.
3:06
Now we're able to use it in our app.
3:09
Will open up App.js since all
our routes are in this file.
3:12
We'll import our PrivateRoute
component with import
3:17
PrivateRoute from './components/PrivateRoute'.
3:23
When the user tries to navigate to
the authenticated or settings path,
3:28
we'll want our PrivateRoute
component to render first.
3:33
So that he can check if
the user is authenticated
3:37
before rendering the authenticated or
settings component.
3:41
We'll do so by creating a new
route with the element set to
3:45
the PrivateRoute component and
nesting both the authenticated and
3:50
settings routes inside
the route we just created.
3:56
So now, when the user
navigates the authenticated or
4:08
settings path, the PrivateRoute
component will render first.
4:12
PrivateRoute will check if
the user has signed in.
4:16
If so the Outlet tag tells our app
to render the nested child route,
4:20
so either the authenticated or
settings component.
4:25
If the user hasn't signed in, we'll
navigate them to the signin route instead.
4:30
For example, when an authenticated
user navigates to the settings path,
4:36
the PrivateRoute component renders first,
4:41
since it's the parent
of the settings route.
4:44
In this example, the user is
authenticated, so PrivateRoute will
4:47
return the outlet tag, which tells
our app to render the child route.
4:52
Since the authenticated user
navigated to the settings path,
4:57
the settings component renders.
5:02
Let's save and test it in the browser.
5:05
Let's try to navigate to
the settings route, and
5:07
we're brought to the Sign in route.
5:11
Let's navigate back to the root route and
try to access the authenticated route.
5:13
And we're brought to
the Sign in route again.
5:20
Great, let's Sign in to make
sure our app still renders
5:22
the components when we're signed in.
5:26
Awesome, we're able to access
the authenticated route.
5:29
Let's also make sure we can
access the settings route.
5:34
And we can, great.
5:38
Our authenticated and settings routes, are
now protected against unauthorized users.
5:40
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