Welcome back.
Let's finish up with the token based authentication by implementing what is called saving the token
into the user's browser low cost storage.
So like I said, if you want to go by this kind of authentication for this applications, unless we
write a few lines of JavaScript, that is a client side JavaScript to talk to the API.
So let's see how you're going to get this one done.
Good.
So the whole logic is that you want to save the token into the user's browser.
So back to the project, because for this kind of a HTML template, we need to create JavaScript file
to make the request to it.
So inside the public, let's create one for the core JavaScript and then the file is going to be client
client DOD's JavaScript.
It can be anything.
So what I'm going to do is that I want to make the requests for this client side, and then when I get
the response, I'm going to save the token into the local storage.
So instead of just doing BI this way, we are going by this.
So first of all, I need to select the input and then the form.
So here let's look at the.
IDs they are using.
There is no ID here, so let's provide ID for the log in.
Ask ID is going to be the username and then for the password is going to be also us pass word and then
for selectors.
Let me paste it here to make our life easier because this is not JavaScript.
Well, this is about domain depletion.
Yeah.
Because for this one too we have covered in details in JavaScript section.
So here I have selected the form and then the input I want to interact with.
So here what I'm going to do is that I'm going to take the form on that.
I will add event lists none and the action or the event is going to be submit.
Then I will pass in async function here because we want to talk to our server which might need some
time to complete.
So here for this async then going to be a function and I have access to the event type.
And here let me prevent the default browser prevents default browser.
So here we go e dot prevent default and I can use the built in fetch at HTTP client, but I like to
use Axios because it's simple to use.
So let's go to Google and search for Axios.
And down here we have the get her page and then let's click on that and go to the GitHub page.
I want to use the seed and if you scroll down here, we have the seed and so let's use this copy this
one.
That's what I mean.
I'll copy it and back to my login.
I'm going to paste it down here that is before my body and that is I have access to the Axios inside
my code.
So here we go.
So here we are going to make the request to our API.
So accounts I'm going to get the response coming back.
Response.
Is equal to weight exhausted.
And then on that, we are going to make post requests that are passing the end endpoint, which is log
in, they say as this so so we are making the request in this way like action and method inside the
client side.
So the next argument is going to be the payload and we can get that one from the user name and then
going to be the user name dot value.
And.
The password.
Sorry.
And the password is going to be.
I's password, dot value, and then the response we get back.
We can handle the errors, we can put them in, try and catch.
But for the meantime, let's just make it very simple.
So what comes back if there is?
On various points if there is data dot status.
And if it's equal to success.
So let's see the endpoint for the logging in.
So let's go to the server file and let's locate the log in, which is this.
If everything goes on well, we are returning.
We can give this one a status so that we can check inside the.
Status is equal to suck six.
All right.
So let's check on that.
Meaning that everything went well.
So you're going to be six.
Six.
All right.
In that case, we know that everything is correct or else we can say that.
So we can elect and say that.
Sorry.
Try again.
So here we have access to the entire user, which is sorry, which is this object.
The user full name, the token everything.
And that's what we want.
So back to the client.
Let's console.log the response for the meantime and let's see.
So here before we continue guys, I made a mistake here.
How we pass in the middle where call is logging.
You know this how we did it.
We pass into app dot use and then it's logging.
So this means that it's going to apply to any but for any rock that you want to protect you need to
pass in its log in, which is the profile as we did before.
So we're passing here as is logging.
And this one, I'm from the previous video.
All right.
So now let's go ahead and try this implementation.
All right.
So let's go to log in and let's open our console here and open that and let's check if we are going
to get the log in.
So here really, is it lazy or really lazy?
And one, two, three, four, five.
And let's hit send.
Well, you see that I got back this response as that.
But for some reasons our endpoint is not working well.
I need to change because this one is being called.
So I remove this one from here to make the request, but instead I want to use this one to make the
request.
Do you get it?
Yes, I get it.
So now again, let's refresh it and we're going to be busy and one, two, three, four, five and hit
send.
Well, for some reason we see that our browser got refreshed and we have the data here and let's check
the terminal and see if something goes wrong.
Well, nothing goes wrong.
So why is it so?
So next step is let's try to console.log or elect.
To make sure that the file is working.
Oh, sorry, guys, I need to require this JavaScript.
Sorry.
So inside my log in.
Well, after the Axios package, let's require our JavaScript file.
Sorry, guys.
It's going to be dot, dot, slash public and then JavaScript and you have client dot JavaScript.
So here we go.
Let us go home and then click on log in and let's log in lazy and one, two, three, four, five and
let's see.
And you can see that this is crazy.
We get back there response inside our browser and we have the token here.
So now I can go ahead and then save this token into local storage.
How awesome it is.
So here we go.
Now let's have a beautiful comments that save the token into looker storage.
Guys, if we want to master main stack this kind of authentication we need to be familiar with.
So here look at storage dot set item and then I want to provide a property called Token.
And then on the response we have the data and on that we have the token from the API.
If you check here, see that we have the response data, the token.
So now let's open our application and go to local storage and we see that and I look at storage and
click on the URL.
There is no value here, but as soon as I hit send, have a look.
Well, let's see the console again where it couldn't save into local storage.
Why is it so?
Well, let's refresh it and see again.
Maybe we are not passing in the right data.
Right.
Okay, let's try again.
Lizzie one, two, three, four, five.
And let's send.
Wow.
Even though you go back again, there is no response.
Maybe it's taking some time.
Let's wait because we are talking to database, right?
So let's have some patience and see.
Well, Verrastro, there is no response because I am not console anything inside here.
So let's try to console.log the response.
DART data and let's see.
So here we go.
Refresh it and Lee Z and going to be one, two, three, four, five and send and I go back so I want
it took in.
So here is going to be dot token.
Let's see if I'm going to get it token send.
Again.
Well, okay, let's refresh it.
So let's look again.
Lazy and one, two, three, four, five and click on log in and we have the token.
Let's go to application and we have the token and that is it.
So with this implementation, we are done with the entire flow.
If we want to look at our hot thing to do is to implement client side JavaScript where we are going
to clear the token from local storage.
So like I said, if you want to go by this to develop such application like this one, unless we write
custom JavaScript to get it done, so we are going to reserve this kind of authentication system if
you get back to react.
But this is a basic flow irrespective of the framework we are going to use, whether view, Angular
or react.
The concept of JSON web token must be required.
We need to be familiar with.
So if you have any problem, don't worry.
Ask questions and practice.
We then being said here ends the entire authentication system from low level to encryption to cookies
to session to session with database and to JSON web token.
The next video.
Let's see what we can do.