-: So, our app is now developed
to a spot where we have a home route, a resources route
and the user can sign in and sign out.
So, we have some at least internal representation
of this authentication flag.
So now, we get to get to the really interesting stuff,
the higher order components.
So, I know it's been a long time to lead up to this,
but now that we've got all
of the kind of infrastructure in place
the rest of this is gonna come over to pretty nicely.
I think you're gonna like it.
So, just to make sure that we're on the same page
of where we're trying to go here.
I'm gonna pull a diagram
on the screen that we've looked at one time before.
So, this is the purpose
of our authentication higher order component.
We want to have a higher order component
that we can choose to wrap any child component
that we care about.
Once a component has been wrapped
by this higher order component,
it's gonna give that target component
or that child component, or that composed component.
These are all kind of interchangeable terms here.
Some additional behavior.
In particular, we're gonna watch
for if the user tries to visit a protected route.
If the user tries to visit a protected route
and they are currently logged in, so yes
they're currently authenticated,
then we're gonna allow the user access.
But if they're not logged in,
if they're in this no case right here,
we're gonna redirect the user back to the home route.
So again, that's the purpose
of this higher order component that we're creating.
So, the good thing about higher order components
and actually putting them together is
that they really follow a very common pattern
between every higher order component
that you'll ever create.
Very common pattern.
The behavior that you stick
into it is gonna be a little bit different
but the code itself is gonna generally look pretty similar.
So, for this first part that we're gonna go through.
We're gonna put up the code that's gonna be very repeatable,
very copy pastable to other projects in the future.
Once we get that code on the screen, I'll say,
okay, now we're gonna start adding some very custom,
some very custom logic to this higher order component.
So, let's go ahead and get started.
Inside of our components directory,
I'm gonna make a new file, and this new file is
gonna contain our higher order component.
And I'm going to name the file
after kind of what this higher order component does
or tries to accomplish.
What it's really gonna do is it's going
to require authentication.
So, I'll call it require authentication dot js.
You could also call it require off or anything similar
like that.
Also, one other quick note, it's very common
to place all your higher order components
into a nested directory inside of your components folder.
I'm not gonna do that this time around
just because we've only got four files in here.
But if you want to, you could definitely toss it
into a nested directory into in here.
Totally up to you.
Okay, so let's get started on the very reproducible,
very copy pastable code.
At the top, we're going to import React
and component from React.
And then, here's where it's gonna get really interesting.
Now, we're gonna put the code on the screen
and then as usual, we'll talk about exactly what it's doing.
So. I'm going to export default.
And rather than exporting default a class,
we're going to export a function here instead.
All right.
So, this is where it's getting a little bit interesting.
Now, I have one argument to this function.
And the argument is gonna be the component
that I want to wrap
with my require authentication, higher order component.
And by convention we usually refer
to it as the composed component like so.
Now, we're gonna put some more code
that's gonna look a little mysterious, so bear with me.
But this is really gonna be the whole shebang here
in just a couple lines.
So, we'll do class authentication extends component.
We're going to render,
and inside the render we will return
composed component.
One little, two more little weird parts here
and then we'll just about be done.
We're gonna put curly braces inside the composed component
and write, dot, dot, dot,
this dot props.
Now, one last step outside of the authentication class.
We're gonna put a new line in here
and we're going to return authentication.
Okay. So, definitely not like a regular react component
that we're used to seeing,
but we did at least get all the code on the screen here.
I'm gonna save this file and at this point in time,
I'd like to do a real deep dive
on discussion about what exactly is going on here.
And so, let's go ahead
and tackle that inside the next section.