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
There's one more improvement we can make to the sign in experience. Currently an unauthorized user who tries to access a private route gets redirected to /authenticated once signing in. A better experience would be to redirect the user back to the page they were trying to access once they're authenticated.
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
There is an improvement we can
make to the sign-in experience.
0:00
Currently, a logged out user who
tries to visit settings gets
0:04
redirected to sign-in via
the PrivateRoute component.
0:09
The user submits the sign-in form and
0:13
instead of redirecting to the settings
page, the page they wanted to access,
0:16
they're redirected to authenticate it.
0:21
A better experience would be to
redirect the user back to the page
0:24
they were trying to access
once they signed in.
0:29
React Router's useLocation hook
provides a simple way to achieve this.
0:33
The useLocation hook returns the location
object from the current URL.
0:38
Let's take a look at what this
location object looks like.
0:44
At the top of the
PrivateRoute.js file.
0:48
Import the useLocation hook
by adding useLocation next
0:52
to our Navigate and
Outlet import statement.
0:57
At the top of the PrivateRoute component,
we'll call the useLocation hook and
1:01
store the location object in
a variable called location.
1:07
And we'll console.log location so that
we can take a look at what it contains.
1:12
In the browser, we'll sign out and try
to navigate to the authenticated route.
1:19
In the console we see the location
object for the authenticated URL.
1:25
The location object has five properties.
1:30
Hash, key, pathname, search, and state.
1:34
For this video we'll focus on
the pathname, and state properties.
1:39
We see the pathname is set
to /authenticated, and
1:45
if we try to navigate to the settings
route, we'll see the location object for
1:49
the settings URL with
the path name of /settings.
1:55
The state property will contain any data
that was passed from one URL to another.
1:59
So in our case, we want to pass
the pathname the user tried
2:05
to access to the location object for
the sign-in URL.
2:11
Therefore, we can navigate the user to
the URL they originally wanted to access.
2:16
To pass data from one URL to another,
we can provide Navigate the state prop.
2:23
Anything provided to the state
prop will be accessible through
2:30
location's state property.
2:35
We'll set state to an object and
give it the property from.
2:37
To give from the value of
the pathname we'll need to access
2:42
it from the location object
with location.pathname.
2:48
Navigate will still navigate
the user to the sign in path,
2:53
but it will also provide
to the sign in URL a state
2:58
containing the pathname
the user tried to navigate to.
3:02
Let's save our changes and head on
over to the UserSignIn component.
3:07
The state we sent over can be
accessed through the location object.
3:13
So, at the top of the file,
we'll import the useLocation hook by
3:18
adding it to the Link and
useNavigate import statement.
3:23
We'll access the location object with
3:28
const location = useLocation().
3:33
To make sure the state was sent over,
3:37
let's log location to the console
with console.log(location).
3:40
We'll save our changes and in the browser,
3:48
let's try to navigate
to the settings route.
3:51
In the console, we see the location
object for the sign in URL,
3:54
and in the state property is an object
with the from set to the settings path.
4:00
Great, let's now have our
UserSignIn component
4:06
navigate the user to their desired path.
4:10
Let's delete the console log and
at the top of the handleSubmit function,
4:14
we'll create a variable called from.
4:20
From will contain the path we'll
navigate the user to, once they sign in.
4:23
So by default we'll want to navigate
them to the authenticated route.
4:28
But if they were redirected
to the /signin route,
4:35
then from should equal
their users desired path.
4:39
We'll check if the user has been redirected
by seeing if a state was passed.
4:44
We can do this by adding an if statement
that checks if location.state as a value.
4:50
If a state was passed,
we'll update the from variable
4:59
to equal the states from property
with location.state.from.
5:04
Lastly, we'll need to
update our navigate call.
5:11
Right now we're just navigating
the user to the authenticated route.
5:14
Instead, we'll pass the from variable.
5:19
All right, let's save our changes and
head on over to the browser.
5:24
We'll first try to navigate
to the settings route.
5:28
Once we submit the sign in form, we should
be navigated to the settings route.
5:32
And we are, great.
5:38
Let's sign out and
test signing in normally.
5:40
Awesome, that still works.
5:46
By using React Router's useLocation hook,
we were able to make our
5:49
sign-in navigation smarter by
navigating users to their desired path.
5:54
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