Instructor: In the last section,
we did a quick discussion
of what a higher order component is,
and what purpose it serves.
We also set up our Boilerplate package.
In this section,
I wanna talk a lot more about the application
that we're going to build,
and exactly what type of higher order component
we're going to make.
Remember, there are many different types
of higher order components,
just about any different use or possibility
you can think of.
But in the application that we're gonna build,
we're gonna make one that is gonna probably
be just about immediately useful to us.
So I'm gonna pull a diagram on the screen
of the application that we're going to make.
So the application that we're gonna make
is going to be kind of like a authentication type app
where we have some homepage,
we have some protected resources page
which is currently being displayed,
and we have a sign in or sign out button.
Now, we're not going to do true backend authentication here.
When the user clicks on sign in or sign out,
it's just gonna toggle a boolean flag in memory
as to whether they are currently signed in or signed out.
So, just to be clear,
we're not gonna cover full on authentication here.
This is more of a discussion about higher order components.
So the higher order component that we're gonna make
is gonna be a helper for handling
authentication and protected routes.
As you might imagine, if a user is not signed in
and they're on the homepage, okay,
everything's fine, that's good.
But if they try to go to the resources page
when they are not logged in,
we should automatically redirect them back to the homepage.
So I have another diagram just to make that crystal clear.
Let me pull it onto the screen.
So here's the flow of the authentication
higher order component that we're going to make.
Again, it's a higher order component
for the purpose of helping with authentication.
So the flow is gonna be
if a user tries to visit a protected resources route,
and we're gonna define what a protected resource is,
you know we're gonna say,
we're gonna make a distinct component,
and we're gonna say if the user tries
to navigate to this component,
we're gonna check whether or not they are logged in.
If the user is logged in, yes,
then we'll allow them access to that path,
and then we'll let them see that component.
If the user is not logged in,
we're gonna kick them back until, back to the home screen
until they are successfully logged in to our application.
So this is kind of the flow here
that we're gonna be mastering
with our higher order component that we're gonna create.
So the last question we kinda need to answer here is,
you know, okay, we're going to make this login flow,
but exactly what is the higher order component doing?
You know, what is its job?
So I've got one more diagram to answer that question.
Let me pull it on the screen.
So here's, we're gonna see similar diagrams
over and over and over for higher order components.
In our our case,
we're going to have a resource list component.
It's gonna be a component that is,
its sole job is to render or show some protected resource,
some resource that the user must be logged in to see.
So we're gonna take the resource list component,
we're gonna combine it with a
require_auth higher order component.
This is the one that we're gonna write.
This is the higher order component
that we're gonna create for this application.
And the result will be,
the results of these two files put together,
or these two components put together,
will be a composed or enhanced component
that's always gonna check the user's authentication status
before the component renders.
And if the user is not authenticated,
it's gonna kick them back to the home route,
or the login route.
So this is the app that we're gonna be making.
I think that it's very practical example
because if we, you know,
start talking about authentication anytime soon,
this is a component that we will certainly
have to have around, or some functionality
that we're certainly gonna have to have.
If a user tries to go somewhere that they're not allowed
in our application, we need to show them a login screen.
We need to kind of kick them out of where they are,
and get them authenticated first,
and then they can go back
to where they were trying to go to.
So let's get started with the implementation
in the next section.