Okay.
And before we set up login user functionality on the front end, let's quickly recall the request we're
going to be working with.
So the URL is forward slash auth forward slash login.
The method is post and this is the data we want to send in the body.
If everything is correct, we're going to get back two things the message as well as the cookie, which
of course we're going to use later to access authenticated routes.
And if there's some kind of error, of course, we're going to get back the error response.
All right.
So up next, let's knock out the login user functionality.
As you can see, yes, we'll set up the action.
Yes, we'll grab the form data.
We'll turn it into an object.
What is the difference?
Well, now, of course, the request is going to go to a login.
If we're successful, we'll just display the first message.
And where do we want to go?
Well, the entire functionality is located on the dashboard, so we might as well direct the user there.
If there is an error, we'll display the error message and also right away want to take care of the
submit button.
Basically, if we're submitting, then we'll disable the button.
So let's start working on that.
And you know what?
I will grab these imports.
I really don't see the point of typing them from the scratch.
And of course we already have some imports.
We'll just replace it over here.
Then the first thing I always like to do is set up that action, export it and set it in my app.jsx
because after that, of course I can just nicely work in the file.
So we're going to go here with export const action.
This is going to be equal to a sink.
And yes, we'll right away grab the request.
As far as the function.
You know, for now, let's just return null.
We're exporting.
So now we just quickly want to navigate back to App.jsx copy and paste.
And this will be my login action.
Of course we want to change the page.
So pages.
We're looking for the login one.
And let's add the quotation mark.
Let's scroll down and we're looking for the login route.
So action is equal to a login action.
Awesome.
And then back in the page.
Let's set up this functionality first in the action and then we'll worry about the submit button.
So for starters, like I said in the previous videos, you'll have these lines of code all the time
as far as when you're collecting the values.
So essentially we want to go here with form data that is equal to await.
We're looking for request, then dot, then we want to invoke form data.
And since I want to get the object, I'm going to go with const data is equal to.
Object.
Dot entries or from entries.
My apologies.
And then we'll pass in the form data.
Then since we have the asynchronous functionality, we'll right away set up, try and catch.
We'll right away go with await then custom fetch.
It's going to be a post request and we want to go to auth and then login.
And then what data do we want to send?
Well whatever is in this object and if you have the name attributes, all of the inputs in this case
email and password are going to be located in there.
And again, since we have required set already, you won't be able to submit without any values.
And since we have default values, I mean pretty much you'll always have some kind of data in there.
Now, if we're successful, what do we want to do?
Well, toast, success and let's just say login successful.
And not only that, we want to go with the return and we want to redirect the user to forward slash
dashboard so in there he can create the job.
Take a look at the stats and all that cool stuff.
And when it comes to error, same deal.
We'll just go here with toast error then let's look for error.
Question mark dot response.
And I think in the upcoming ones, I'll just copy and paste.
I don't think there's a point to type it together and then we're going to look for message and remember,
yes, it's very important we want to go over here and return an error and then let's also take care
of that submit button.
So we're going to go here with navigation that is equal to use navigation.
We want to invoke it and then we'll set up the variable we'll say is submitting and that one is going
to be equal to our state.
So navigation state.
And equals to submitting.
Then let's scroll down.
And let's fix the button now.
Eventually we'll do the same thing for Explorer app, but not for now.
Let's not worry about it.
So for now, we just want to go with disabled.
We want to set it equal to is submitting.
And also let's change that text.
Let's say that it's going to be is submitting and we're checking for two possible values and based on
the value we'll either display submitting or we're going to go with submit.
Let's save it.
And now let's test it out.
So this is the awesome.
Time when I don't have to remove any more users from the database.
So this will be my email and password.
Let's submit.
And for some reason.
And you know what?
Yeah, because I did set up everything, but I forgot probably the most important part.
Well, we do need to use the form component.
Correct.
So as you can see, if we don't do that, then nothing works.
So let me go over here.
Remember, method is equal to post.
So essentially for the patch delete post, we want to use method post and then for get requests which
again we'll set up when we have the search functionality.
This is going to be a little bit different.
So again, let me navigate back over here.
Let me submit submitting and now notice login successful.
We nicely navigated to the dashboard.
Now at the moment again, we don't have any authentication in place.
So this is actually something that we're going to set up very, very soon.
What I do want to showcase is the cookie.
So let's navigate to the dev tools applications and check it out.
So the moment we successfully log in, what happens on a server?
Well, we send back the token.
Correct.
And the token is located in where?
In the cookie.
So if I go to application, then more specifically cookies.
Check it out.
I have my token and of course in here I have the value.
And what it means is that in all of the upcoming requests, we're going to send back this cookie to
our server.
And remember in there we have the authentication middleware and in there we'll check whether token is
valid, whether the JWT is valid, grab the user ID and then perform specific functionality, whether
that is to get all the jobs to create a job and rest of the pages we have over here.
So with this in place, we're ready to move on to the next step.