-: So we now have the skeleton
of our higher order component put together.
We export a function from this file
and if we call this function with a component
we will get back another component class
that wraps the one that we call this function with.
So let's see how this works in practice.
I'm gonna flip over to our top level index.js,
which holds our router.
And so the goal here is to call our resources component
which is the one that we want to limit authentication
or limit access to using our higher order component.
So I'm going to import our higher order component
and I'm gonna call it requireAuth
from components require authentication.
Now remember, requireAuth right now is just a function.
If we pass a component to this function
we will get our wrapped component back
which is something that we can render.
So in practice it's really straightforward.
We're just gonna call requireAuth with a component
that we wanna require authentication for,
which is gonna be resources.
So we will wrap resources with requireAuth like so.
I'm gonna save this file
and then we'll flip it over to browser
and make sure that it's still working.
I can refresh
and it's not really doing anything for us just yet,
but definitely everything is still working.
Let's throw a little bit of a console log
into our higher order component
just to make sure that it's still working as we expect.
So I'll flip over to our higher order component.
And in the render method right here,
I'm just gonna console log rendering, composed component.
And so make sure that you've got a string
and then a comma in between.
So second argument will be our ComposedComponent
the one that we're going to try to wrap
with this higher order component.
So I'm gonna save. We'll refresh, and we get rendering
and function and we get some jsx in here.
But you can see the text "Super Special Secret Recipe"
which is our resource list right here.
So we're definitely calling this thing correctly
and we're definitely rendering
our higher order component right here.
So this looks great.
I'm gonna console or delete the console log back here.
Now the only thing we need to do now is figure out
number one, how do we tell
if a user is currently authenticated or not?
And number two, if they're not, how do we handle them?
So step one is really easy.
Step one, figuring out whether or not the user
is currently authenticated means we just need to connect
our authentication class to our redux store.
When we do that, we'll pull off the authenticated property
and if they are currently authenticated, then great
we can let this component render.
If it's not, then we'll handle that case appropriately.
So let's give it a shot.
At the top we will import our connect helper,
and then inside
of our return statement right here, or just below the
or just above the return statement, excuse me
we'll define our mapStateToProps
which gets called with state.
And from here will return authenticated
is state.authenticated.
Then instead of returning just authentication
we'll return our wrapped version of authentication.
Remember, the connect function right here
is really a higher order component in of itself.
So we're wrapping a higher order component
with a higher order component essentially.
We can nest these higher order components
as deeply as we want.
So we could add on, say even another one right here
if we so chose.
All right, let's go ahead and now do a console log
inside of our render method,
this.props authenticated.
So let's just make sure,
can we figure out inside of this component,
whether or not the user is currently authenticated?
I'm gonna save, flip back over.
And we instantly get a console log here a false,
no, the user is not currently authenticated
which makes sense
because we see the button right here says sign in
which indicates that they're not currently signed in.
So we'll sign in and it flips over to true,
it sign out, sign in, sign out, and it flips perfectly.
Great. So that means
that we have our current authentication state
inside of our higher order component.
Now the only thing we need to do is figure out
if the user is currently not authenticated
we need to kick them out of this entire route.
So let's take a shot of that inside the next section.