Instructor: In the last section, we wired up
the require off higher order component to our feature route.
It's definitely locking down access to this route right here
and making sure that we are always signed in
before we can visit it.
However, I wanna show you some interesting behavior.
If I'm on the feature route,
as I am right now and I refresh the page
you'll notice I get automatically redirected
back over to the route route instead, like so.
So the issue right here
is that we are not persisting our login state
in between refreshes of our page.
Anytime we refresh the page,
all of our Redux state gets thrown away
and we start back over from scratch
when our application starts back up.
So in other words, the idea of log in
or my authentication state
is not being persisted in any way.
To solve this, we're going to be making use
of a feature of your browser called Local Storage.
Local storage is a tiny little data store
that we have access to inside of our browser,
and it's an ideal place to store
tiny little bits of information.
One thing that we could possibly store inside there
is the JSON web token that we get back
whenever we make our sign up request to our backend api.
So I think that after we make this request
and we get back that token
we can save it to our local state
and then once we have or some local storage,
and then once it's been saved in local storage,
we can fetch it from there anytime
our application starts back up.
Now doing this is gonna be really, really straightforward.
To interact with our local storage,
inside your browser, you can write out local storage
and then you can store something in local storage
by saying dot set item,
passing in a key for this storage value.
So I'll use something like token
and then a second argument
of the data that you want to store.
So maybe my value that I wanna store is my JSON web token.
Now, if I refresh the page
that local storage is still persisted,
so it does not go away.
Inside my console,
I can now do a localStorage.getItem
and I will get token,
which is what I just stored my JSON web token as.
And that returns my JSON web token.
So all we have to do is, a setItem after we get our token
and then when our application boots back up
we'll do a getItem to get that stored token.
All right, so back inside my action creator.
After we dispatch our action,
I will add localStorage.setItem
and I'll store an item called token
and that will be whatever we just got back
from response.data.token,
like so.
So this right here is gonna make sure
that we store our token.
Now we have to make sure that when our application boots up,
we try to fetch it and put it into our Redux state.
For that, I'll open up my route index.js file.
So remember, we use this kind of initial state
object right here earlier on inside the course.
We can use this initial state object
to get some starting state inside of our Redux store.
So I'm going to expand this object right here,
and then I'm gonna pass to it,
the key of our off piece of state, which is off.
And then the value that we want to initialize
when we create our Redux store,
which is authenticated.
And I'm gonna say I want to assign to that property
whatever I get from localStorage.getItem('token').
Now I'm gonna save this file
and when I do my code is gonna jump just a little bit
thanks to my code formatter.
And that's what we're left with.
So now anytime our application starts up
we're gonna check to see if we have a stored token
and if we do, we'll start up the Redux state
with that token as our off.authenticated property.
So now we should be able to go back over to our application.
I'll refresh the page,
I'll go through this signup process one more time
and I'll put in some random email here.
And now I've stored in theory
that JSON web token on my local storage.
So if I now refresh the page
I should still be able to see the slash feature route.
I'll refresh the page,
then our Redux app boots back up.
It pulls that value out of local storage
and I am still considered to be logged into our application.
Awesome. Okay, so this is definitely coming along.
Let's take a quick pause and continue in the next section.