"How to Make a Website" was retired on March 24, 2020. You are now viewing the recommended replacement.
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
Congrats, you’ve built a robust client authentication feature!
Resources
- useContext - React
- <Navigate> - React Router
- <Outlet> - React Router
- <Route> - React Router
- useLocation - React Router
- Navigate props - React Router
- js-cookie
- Basic usage for a cookie
- Expire a cookie
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
You've done quite a bit in this stage.
0:00
You started off by configuring
React Router to protect private routes.
0:02
You created the PrivateRoute component
that either allows the user to
0:06
access the private route or
redirects them depending on whether or
0:11
not the user is logged in.
0:15
You then learn about React Router's
useLocation hook, and
0:17
how it can be used to make
the sign-in redirect smarter.
0:21
Now, whenever the PrivateRoute
component redirects the user to sign in,
0:25
they will be redirected back to
the original site after signing in.
0:30
Next, you learn how to use
cookies to store data.
0:35
First, how to store the authenticated
user data, so that the user wouldn't
0:38
be signed out if they refreshed
the page or open the app in a new tab.
0:43
Then how to store the settings data,
so that it too would persist.
0:47
Through both implementations,
you now know how to create,
0:52
read, update, and delete cookies.
0:58
Lastly, you improved your app
by refactoring your code.
1:02
You created the ErrorsDisplay
component that renders a list of errors
1:06
onto the page.
1:11
And created your own API helper function,
1:12
which made communication
with the API easier.
1:16
The refactoring you've
done may seem small but
1:19
it has enhanced your
app's maintainability.
1:22
If you ever need to update
how the errors are displayed,
1:25
you would just make edits to one file
instead of having to update multiple
1:29
files that render the list of errors.
1:33
The same could be said about
your API helper function.
1:36
If you change the URL to your server, just
head on over to your API helper and update
1:39
the URL right there instead of tracking
down every fetch call throughout your app.
1:44
Nice work implementing user
authentication in a React app using basic
1:50
authentication and React Router.
1:55
Now that you've built a robust client
authentication feature, here are a few
1:58
suggestions about what you can do next
using your React app and Express REST API.
2:03
Try implementing other
authentication schemes,
2:08
maybe try a token-based authentication.
2:11
Expand the Express API by configuring
new routes that render specific
2:14
content to the user.
2:19
Like profile and settings information, or
2:21
customize the app in any way you'd like,
make it your own.
2:24
You could connect to a third party API
like Google Maps or a weather API.
2:28
Connect the app to a database using
the sequelize ORM, for example.
2:33
That way, users can interact with
the database by retrieving custom
2:39
content from a route as well as add,
update, and delete content.
2:43
Or consider updating the front end with
your own custom styles and layout,
2:48
including making the app mobile-friendly
with added accessibility support.
2:53
And be sure to share what you create
with the Treehouse community.
2:58
Remember, we're here to help, so
3:02
if you have questions about
anything covered in this course,
3:04
feel free to reach out to other students
in the community or the Treehouse staff.
3:08
Thanks everyone, and happy coding.
3:13
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