Okay.
So what do we have in our application is we have that authentication component here.
But what we will do in this video is we'll allow users to log in.
So basically what we want to do is enable a form.
And that form will take a username and password will send over to our API.
And we are hoping to get back a token.
So let's do that in this video.
And we can come back here.
And to speed things up, we already had a form movie form here and it will be very similar to what we've
done here.
So I will copy that diff here.
And you can copy that from here and I will place it in here.
So basically we have two things that we will capture for the movies.
It was title and description.
What we want to do is we want to have instead of a title.
We want to have user name.
So we can replace all of those.
And we'll need to also import usestate.
And we need to create a state for the username.
So we'll do constant square brackets and then username and set username like that.
And that's going to be you state.
And we can actually provide a default value of empty string.
So we have that method.
And then we will say save it here.
So we can actually make it a capital letter for the label and placeholder as well.
So we have one for the username.
And we don't need to have um two buttons.
We'll just have one.
And this here we can actually it's not going to be text area.
It will be a normal input.
But what we want to have for the normal input.
It's a different type.
So it's not going to be type text.
And so we could actually do something like that.
So if we'll have let me create the state first.
So if we'll create one for password and set password we will have that password here, here and here
and here.
And set.
Password here.
So basically I can make it capital letters here and also here.
So if I will go here and at the two hour.
And I guess we still have some references to have that create movie that it's not there.
So for the moment I will just comment it out.
And if I will go back here we have a title.
It's not defined.
Also, we have a value here.
I forgot to change them.
So one is username and another one is password.
So if I will save it now and go back here and I will refresh it.
And we have that username and password.
And I have here.
So input for for that.
So but if I will start typing here you can see the password is visible.
So what we need to do is we need to change the type from text to password.
So in that case if I will save it and go back here.
You see this is not visible anymore.
It is.
So whatever you start typing it will be hidden.
So that's what we want.
Also we will come back here and uncomment that again.
And then what we will have is we will have a label login.
And then we can have login user method.
We need to create that method here.
So constant login user.
It will be an arrow function.
We don't need to pass anything from there and then we will do something here.
So if I will save it, you can see I have that button here.
It's actually very long.
It's half of the page.
But we can think about styling a little bit later on.
Okay.
So what we want to do is wherever we click on this button, we will want to send a request to our API
and ask with a username and password for that token.
And to do that we can go to services.
We have API services and we can basically duplicate one of the one once we had it.
And let's say we will have login user method here on API.
What we want to do is we don't want to go to movies here.
What we want to do is if we go here and if I will open URLs.
As you remember this is the path to authenticate.
So out slash.
So we all we need to do that.
So I will instead of movies I will have out like authentication and then we'll need to use method post
and post.
Here we are not going to provide any token because we don't have that token at this point.
I will remove this and we will need to have a body.
So we will do something similar as we had it from here.
So I will copy that and I will put it in our login user.
We'll need to provide a body.
This body will be used in my password.
So we need to also pass it to this function.
And it will return null or response JSON null if there is nothing there okay so this is already done
API.
We have a new method.
So what we need to do is we need to import API.
So import api I will click enter.
It will be imported from there.
And from here we can say API login user.
That's the method.
What we need to do is provide body our body in our case will be username and password.
So basically you don't need to say username username password password.
You can just pass it like this and it will be okay.
What we can do is we can start a result from here in response.
And it will be like that.
Also, we are expecting to have like a JSON.
So we could say that we will have a function get token for example.
And that's going to be our function.
And we will trigger that from here.
So basically I will have it like that.
I can say that function is async.
And in that case I can await.
This result here and that will be our JSON.
So what we can do is we can do console log.
Response.
So let's see if that actually works.
So I will save it.
Let's go to our application and we need to provide a username Christian and password.
Password was Christian.
But first thing first I will right click I will inspect and we'll go to networks.
And I will provide any password.
So that's a random password.
And I will click login.
What I have here is I have to authentication a 404.
So that means if I will go to a response and actually I have page not found okay.
So the problem is what I have here is that if I will go to API service and this is my API URL that I
have changed.
So you see I have already API here embedded in the api URL, but I don't need to have that API.
So what I will do is I will take this API from here and I will include it everywhere here in the places
where I need that API.
And we could have like two different APIs.
And so that's how it is.
So I will have just a basic domain name here.
And then I will have the base depend on what I need.
I will have that.
So if I will come back here and let's clean it again, if I will log in with the same wrong password,
if I will do that.
You see I have now.
And if I'll go headers, I still have that API out.
So I don't know from where API is coming from in that case.
So I will save it here and let's say I will refresh it.
So wrong password here.
And if I will go here and I have a bad request okay.
So this this one I have okay.
So I sent this to out and I have post I got like 400 and if I go preview, I see unable to log in with
provided credentials.
This is basically what you can capture and display that in here.
You don't have to tell if the username and password is wrong or the password or username, because that's
not really a very secure way to tell end users if you have that username in the database, or maybe
like the lease details you will provide to end user, the more secure that will be.
But something generally like you can't log it with provided credentials.
It's all right.
So we can't log in with this.
So if I will go here and provide a question which is a proper password, not very secure but the correct
one.
So if I were to log in now and you can see here I have 200.
So it is okay.
And in the payload you can see what I've sent.
So Christian Christian.
And in the preview I see I have that token.
So basically I have the JSON with a token inside, so if I can go here once again and in the place where
we actually use it.
So console.log here, this is the response if I will do response dot token.
And actually I need to check it if I have it.
So if response because I might not have the response here.
Then we will console log console.log this.
So if I will go here and if I will go console, I can actually see clean it.
And if I will log in here I have the token here.
So this is a way to capture that token.
What we will need to do is we need to get the token.
And we need to save it somewhere for a session to have it for the next time you will log in.
And we also will need to start replacing this hardcoded token with the one that we got it from our API.