In this video.
Let's continue the implementation to be able to log in from the React side of our application.
So let's go to the app folder and inside the context where we left and that is the of context.
So what we are going to do is that we are going to create a function to be able to log in.
Remember, we are going to do the same thing as we did when we were developing the API.
So if you click on the tender client and then users and then they log in, this is how we are able to
log in using this tool.
So here we have access to the URL and then the HTTP method and then the payload.
We are going to do the same thing from the client side.
So let's see.
So we are going to create a couple of functions here.
So the first one is I'll call this one as log in action and here we go.
I will create a function called log in user action and is equal to normal arrow function.
And here we go.
And since we want to talk to database or a server, we need to handle the promise.
And for this function we are going to accept the payload and that is the the user email and then the
password.
So I'll pass in here as the form data.
It can be anything or you can destructure and say email and then the password.
But let's maintain in this way.
So here, let's bring in our try and catch for try for success and then catch in case we have some error.
So here we go.
How can we talk to a server?
Definitely.
We may need what is called a HTTP client and we have two options whether we should use the built in
HTTP client called fetch or we should use a third party HTTP client called Axios.
But personally I prefer to use Axios, so let's go ahead and then install Axios.
And now Axios is done.
Let's click and then let's restart our server.
That is the react.
The next step is let's require the Axios package from Axios.
So inside the login action we are going to make a request to the backend and here we go.
We bring in the Axios and then the HTTP method is post, which is the same from the tender client.
We provided the HTTP method called post, and next step is that we need the URL.
So we are going to copy this one.
And inside the function call of Axios we are going to pass in the URL.
The next argument is the payload, meaning the data that we want to send for back end.
This is a payload and the same way we are passing in the payload to the function.
So here we pass in the form data here.
The next argument is going to be what is called the headers.
And for this I want to create the header separately and then refer into this.
So what is a header?
A header gives more details or information about the request and we can also send some payload for example.
Token.
If you look at the API, when you try to make a request to fetch your profile, unless you provide what
is called token, and then we add that one inside the header and that is what we are going to do here
also.
So I'm going to create a variable called config and it's equal to object.
And for this I'm going to add a property called headers.
It must be the same as what I'm typing.
Because if you look at the tender client here, we have access to the header inside the tender client
also.
And for this we are going to pass in what is called content type and is equal to quotes, double quotes,
application.
For Slash Jason.
So what does it mean?
That is a content type equal to applications like Jason.
This one tells our server or the request that we are sending a data which is of type Jason But lucky
for us, Express parses any incoming data as Jason.
Then after that, in case we want to send some token, we are going to add additional property that
is called authorization.
But don't worry, we will get this soon.
So let's remove this one from here.
And next is we need to pass to this Axios as a third argument and provide as config.
And now what comes back from this is going to be the response.
So do you remember what comes back from this one?
That is the user, including the token.
If you try to make the request from the back end.
Let me show you here when I click log in.
This is a response and this is what we want to receive inside our application.
Well, I think I have some error here, so let's see what import in body module reorder that is off
context line number two.
So let's see line number two.
Well import Axios from Axios.
Oh, sorry.
This one is supposed to be import.
The import has messed up and from react this kind of import is what you call the common JS and that
is what Node.js uses.
Okay, so now let's see.
All right.
It is happy.
Great.
So the next step is that we need to call this function.
So let's go ahead and console.log error in case you're going to have one.
And then let's also console log the response and see if indeed are going to receive the response inside
our application.
The next step is that I want to call this function inside the login page.
So what should I do?
Because of that, we need to pass to the value.
So here, let's remove this one and let's pass in what is called the login action.
So let's remove this one also.
And now we have login action.
So now, now inside the components of login, I have access to that function.
So here, so I can destructure the function from this, I'm going to be log in user action.
All right, so now how are we going to call the function inside here?
Definitely.
We need to handle the form to be able to take the data from the form and then submit to the server.
Because of that, let's go ahead and then handle form in React in the next video.