Instructor: Our application now has the core sign in,
sign up and sign out logic put together.
But we've been testing as this kind of feature route
right here that's been completely undefined
for the entire life of our application
which has been pretty darn annoying.
So it's probably gonna be a good time now to say
let's put this feature component together
and see what it actually looks like.
So remember, feature right here is a route
or a component that should only be visible to a user
once they have successfully authenticated
inside our application.
So for right now, let's just kind of
put this kind of component together,
hook it up to our router and make sure that we can actually
get something showing up on the screen
and then talk about what we're gonna do with it.
So inside of my components directory
I'm gonna make a new file,
which I'm just gonna call feature.
Now again, we're calling this thing feature,
but really it should be whatever your application
is designed to do.
So if you are a like Twitter equivalent,
you should perhaps should be something called like
list of tweets or tweets index or what have you.
Or if you're making an Uber equivalent,
it should be like map view or something.
You know, what whatever it might be.
Just for the sake of making a project around authentication,
I'm just gonna very generically call this component feature.
So right now my number one goal
is just to get something to show up on the screen.
So we're gonna put some scaffolding
inside this component here.
So I'll import React and component from React,
and I'm gonna make a class feature that extends component.
And we'll go ahead and render
right now just a Div
that says, "This is a feature,"
and at the bottom we'll export default feature.
Now let's hook this up to our router.
Over inside our router,
I'm gonna say import feature from components feature.
And then whenever a user navigates
to route with path of feature,
we're gonna show them the feature component.
Okay, so we imported feature, we defined a route for it,
and we've also got our feature component put together.
Let's test this out inside the browser.
I'm gonna just refresh the page.
I'm currently on the route feature right here.
And so of course I do successfully see the text
that says, "This is a feature."
Let's sign in really quick and see what happens.
I still have a test one, two, three@example.com.
I'll sign in and successfully now,
okay, I see feature, I'm on the route feature
and I see the text, "This is a feature."
And I can also sign out here if I want to.
So one thing that I'm gonna point out immediately,
remember this is a route here,
a component that a user is only supposed to see
after they have been authenticated.
So let's see what happens
when I click sign out, so I'm no longer authenticated.
We see our message here that says, "Sorry to see you go."
But I can manually still go back to slash feature.
So right now there is absolutely
no protection on this route whatsoever.
We're not doing any sort of check to make sure,
hey, is this user actually authenticated
before they tried to visit this feature route right here?
So this is definitely a big problem.
This is the entire point that we put authentication
into our application the first part.
Certain parts of the app, we want to make sure that
hey, are you actually signed in
before we allow a user to get any type of access
or visibility to it.
So if you recall or if you've kind of been going through
sections in this course in order,
you might remember that we put together a higher order
component in an earlier section
which we called a require off higher order component.
So this higher order component that we created
in this previous section,
the sole purpose was to kind of protect certain routes
from a user navigating to if they haven't already
been authenticated in some fashion with our application.
So again, this is kind of a more meta-level discussion here
where I'm talking about a higher order component
that we put together in a previous section.
But that higher erotic component that we put together
was really completely ideal for what we're trying
to do here for this application.
We're trying to make sure
that if a user is not authenticated,
they should not see or get access
to this feature component right here.
So if you did not already go through that previous section
on higher order components, that's totally fine.
We're going to copy paste the code from that section in here
and make immediate use of it.
I do recommend if you have not yet gone through that section
after we finish talking about authentication,
I really recommend going back and going through that section
on higher order components though.
So really is a good topic to go over.
We're going to make use of the code
that was written inside that section.
Again, if you haven't gone through it
I really recommend you do so.
So like I said, we're gonna do a very direct copy paste
to reuse some code.
I'm gonna create a new file inside of our off directory here
and I'm gonna call it require auth dot JS.
So then this is gonna be our higher order component
to make sure that a user is actually logged in.
Since we already went through the creation
of this higher order component,
I'm just gonna go straight over to GitHub
and copy paste all the code for it directly
into our project.
So I'm gonna navigate to github.com/stevengrider.
I'm gonna click on the repositories tab,
and find the repo called advanced redux code.
Remember, that's all the code for this course
that we've been working through.
I'm gonna find the folder for higher order components,
here it is right here, HOC.
Then I'm gonna go into the source directory.
I'm gonna go into the components directory,
and here is the require authentication
higher order component.
And so if you lost on the click through here,
you can certainly pause the video.
Here is the route that I went to
to get to this file right here.
So here is all the code that we need,
I'm going to just copy all of it
the entire file and paste it over here.
Make sure to do a little bit of a quick check,
just make sure that you've got all the necessities.
We should see import at the top.
At the very bottom, we should see
this final set of curly braces here.
We should also see the connect helper in here as well.
So this is looking pretty good.
We've got this authentication helper here.
If you recall when we put this together,
the purpose was to pass a component directly in
and then if a user was not authenticated
inside our application
they would automatically get redirected out
to some other route.
In this case, the root route.
There's one small change that we need
to make to this application though.
When we put the higher order component together,
we assumed that we were going to be pulling this
authenticated piece of state from state dot authenticated.
But as we've put our application together
we have that off reducer,
which produces the off piece of state, if you recall.
And so rather than making a reference
to state dot authenticated,
we're gonna make a reference
to state dot auth dot authenticated like so.
Okay, so we've got our higher component now,
and we know exactly which component we want to secure
against people logging in.
So I'm gonna close a couple tabs,
and let's talk about exactly what we're going to do
to make this higher order component go to work for us.
It's actually gonna be pretty darn straightforward.
All we have to do is inside of our top level
index dot JS file, I'm going to find our, excuse me,
I'm gonna find my import statements
and I'm going to import require auth
from components auth require auth.
So now at the router level,
any route that we want to secure
against an unauthenticated user,
we have to just wrap the component that we're passing
to React router with require auth like so.
And that's it, that's the magic.
That's basically everything in this course
coming together in a pretty big way.
We brought in our high order component,
higher order components wrap existing components
and augment functionality to them.
We said, "Okay, I've got this feature component,
I don't want anyone to see feature
if they are not authenticated.
And so we were able to very simply just wrap feature
with require auth right here.
So let's now test this out in the browser.
When we're not logged in,
this require auth higher order component
should instantly kick us back out
to the root route of our application.
So let's give this a shot.
And go back over to my project,
notice how I'm currently on the route feature.
I'm gonna refresh the page
and you'll notice that when I refresh it
I go instantly back to the root route.
I'm gonna try going back to feature again,
and I get kicked back to the root route.
So awesome, looks like it's working exactly as we expect.
Now I'm gonna try signing in with a legitimate account.
I'm gonna sign in and only now can I see the text feature.
This is a feature.
Only now can I access the route slash feature.
So this is really it.
This is our awesome authentication app in practice.
We definitely still have, you know, don't get me wrong
we still have a couple topics to go over here
without a doubt,
but this is how we secure individual routes
inside of our application.
I go back to password and boom, there we go.
Here's feature, and if I refresh the page
which currently drops my session entirely
I can no longer get access to the feature route.
So this is it. This is pretty awesome.
I really like this.
Definitely a pretty solid approach.
We can very precisely decide which routes
we want to have require authentication inside of our app.
Let's continue in the next section where we still have
you know, a couple different topics to wrap up on.
Let's talk about what they are inside the next section.