Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Authentication

Well done!

You have completed React Authentication!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Smart Redirecting

6:01 with Laura Coronel

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.

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