All right, so now we want to make this sign in form work.
So basically from the login screen we want to do or we want to we're going to do a few things.
But the two main things we want to do is, first, call this login and this mutation, right?
Because that will actually send the request to the back end and set the cookie.
Now, once we get the user data back, we then want to call from the auth slice set credentials.
Okay, send that in the payload and then the user gets put in local storage, not the token.
This is this is a big difference from the first version of this application.
And this course is in the first version we actually stored the token in local storage.
So we're trying to avoid that, but we are storing the user info such as the username, the email,
and that's pretty much it.
So let's go into the login screen and we're also going to use a package called React to Testify that
will show a message if like we get the wrong email address or something like that.
So let's install that real quick.
I'm just going to stop the server and you actually want to install this in your front end.
Actually, I didn't need to stop the server because I have my front end open in this terminal.
So you want to CD into your front end and then NPM.
Whoops.
NPM install and then it's called React Dash.
Testify.
Again, Make sure you're in your front end.
And to use that, there's a couple steps we have to take.
We're going to go into our main app component, so our app JS.
And in here we're going to import.
So from here, we want to bring in the toast container.
So toast.
God.
Let me spell this right.
Toast container.
I don't know why it's not popping up, but we're going to bring that in from React.
Toast to.
And we also need to add the CSS, the styling, so we can import and it's going to be this react toast,
ify slash dist slash and then react toast, defy CSS.
So this toast container, we need to put this somewhere in our layout.
So I'm just going to put it.
Uh, we'll just put it at the bottom.
It really doesn't matter because it's not really in the layout.
It's.
It's outside of it positioned absolute.
So that should work.
Okay.
So we shouldn't get any errors or anything.
Let's check it out.
Yeah.
So that should be implemented now.
We should be able to just use toast, defy when we want.
So in the login screen we're going to import a bunch of stuff here.
So we already have use state.
Let's also bring in use effect because what I want to do is when you come to the page, it should check
to see if there's any user info in local storage.
And if there is, that means you're logged in.
So we'll then want to redirect from this page.
So from React router Dom, in addition to Link, let's also bring in use location and use Navigate.
So we want to bring those two hooks in and then let's see in order to interact with the state, we want
to bring in use dispatch and use selector from React Redux.
Use dispatch is used to dispatch actions such as the login in that slice and the set credentials and
use selector is to get stuff from the state such as the user.
So let's see.
We're also going to bring in the message.
Do we need the message?
No, I don't think we need the message component, but we do want the loader.
So let's bring in.
Wait, do we have.
Yeah.
Loader JS So we're going to bring in.
Loader from our components.
And then let's see, we need our login mutation, which is this right here.
So we exported it as this use login mutation.
I can't talk, so let's bring that in.
We'll say import and then it's called use login mutation from our users API slice.
We also want to bring in our set credentials.
Set credentials from our note should be off slice.
Right?
Is that correct?
So we have our auth slice.
Set credentials.
So we're bringing that in as well.
And then the last thing is going to be toast, because I want to use the react toast defy.
So we'll say import toast from.
Uh, react dash to testify.
So that should be all the stuff we need to bring in.
Let's see what we got here.
Auth is not defined.
Uses the API slice.
Let's see what we got going on here.
Uses API slice line eight.
Okay.
I don't know why there's a space there.
Oh yes, I do.
Because this should be.
This should be in Backticks.
So we should be doing this.
All right.
Let's open the console.
Just make sure no funny stuff is going on there.
All right.
So we brought in everything that we need.
Now let's come down here and let's initialize what we need to.
So I'm going to go right under the state and let's initialize dispatch to use dispatch and navigate.
And we need the login from the login mutation.
Let's say const, and then we're going to destructure login as well as the is loading.
And we don't really need the error in this case.
So I'm just going to bring in login and is loading from use login mutation and that's created automatically
for us like the loading.
And then we also want the user info, which is part of our state.
So to do that we use the use selector hook.
So let's say const.
And we want to.
We want to destructure user info.
From our users our auth state.
Right.
So you selector takes in a function pass in the state and we want the auth part of our state because
that's where our user info is.
If we look in our redux.
Dev tools.
So in the auth state we have user info.
So that's what we're doing.
We're getting this right here.
Now, we also want to make it so that if remember how we're on the shipping screen, if we go to our
cart here and then proceed to checkout, you see how we have this login and then we have this redirect.
So we want to check to see if that redirect is there.
Because if it is, we then want to redirect to this page if we are logged in.
So to do that we use the search property from the use location hook which we brought in up here.
Let's see, we brought it in right here from React Router Dom.
So let's go right above the submit handler and let's say const and we want to destructure search from
use location and then we're going to create, let's say const SP for search params and then we're going
to pass search into the URL, search params constructor and then finally we're going to just create
a variable called redirect.
And we want to see if there's this redirect, which is this right here.
Okay.
And then if there is so if there is, then that's obviously what will get set or then we just want it
to be slash just the index.
Okay.
Now let's use the use effect.
Because this is what we're going to use to to check to see if we're logged in.
Because if we are logged in, then we want to get redirected to either the home page or if there's something
in that redirect.
So in the use effect, we're just simply going to say if.
User info.
So basically, if there's user info in local storage, then we're going to navigate to whatever that
redirect is.
And then as far as dependencies, we need to pass in user info because we're using it in the useeffect
as well as redirect, as well as navigate.
So we should also have that.
All right.
So you think that should be good?
Now let's just save and make sure we have no weird issues and we're not going to get redirected right
now because we're not logged in and I'm just going to get rid of that that query param.
All right.
So now we need to handle the actual submit handler, which is how we log in and we log in by calling
both login from our user API slice and set credentials from our auth slice.
So let's get rid of this.
This line here and.
We're going to call log in, but let's do it in a try.
Catch.
And in try let's do const res and we're going to set that to await login.
Okay, now log in again.
Is coming from our users API slice.
We're getting it right here from the mutation that's in that file.
So log in and then that's going to get passed in an object with the email and password, which is in
our component state from the coming from the form.
Now, this does return a promise.
So we're going to add on to this dot unwrap which will basically extract or unwrap that the resolved
value from the promise.
Now this I'm getting an error here because I'm using a wait because I didn't mark this async.
So we just want to make sure that we do that.
All right.
Now, once we get the response, we then want to dispatch the set credentials function which is in auth
slice.
So we want to call this.
And in order to call this, we don't we don't just call it, we need to pass it through dispatch.
So we already initialized dispatch up above, so let's say dispatch and then pass in.
Set credentials and I'm going to do it like this, pass in an object and then just spread across res.
Not email.
Just.
Yeah.
Is that right?
I think that's right.
One, two, one, two.
Yeah.
So we just want to again call login.
We're going to get the response back and then we're going to send that response, which is the user
info.
We're going to pass that into set credentials, which will then set the local storage to whatever the
user is.
And then once we do that, we then want to navigate.
So we'll say navigate.
And we want to navigate to the redirect, whether it's whether it's the index page or if there's something
in it, such as shipping.
Now in the catch, I'm just going to do an error.
So we're going to do a toast dot error.
And we want to pass in error.
Dot data dot message so if that exists or just.
Um.
Error.
Dot error.
Now I want to just make sure that this will work, even if these are undefined.
So we don't get any weird data.
Any weird errors.
So I'm just going to put question marks here and here.
All right.
And then there's just a couple things I want to do down here.
So the first is to check for the loading so we can show the loader.
And I'm going to do that right, right below the button.
So we'll say is loading.
And this isn't if the page is loading, this is once we once we try to log in.
So if that's true, then we'll show our loader component.
And then we're also going to set the submit button.
Let's see the button here.
I want this to be disabled if it's loading.
So we'll we'll add on to this the disabled attribute and just set that to whatever is loading is.
True or false.
And then finally down here where we have our link, if there's a redirect, I want to add that onto
this.
So instead of just saying to slash register, let's say two, and then we're going to open up some backticks.
And in our actually, I don't want backticks yet because we want to check for redirect.
So if there's something in redirect, then we want our backticks and we're going to say slash register
and then pass in the redirect and set that equal to whatever is in.
The redirect.
All right.
And then else then it will just be slash register.
Okay, so it looks like we have an issue.
Error is not defined.
Let's see.
That's because.
Let's see.
That's because this right here I have is error.
That should actually be error.
Or if you want to use error, that's fine.
Just make sure you use it here and here as well.
All right, so now let's try to sign in with nothing and we see invalid email or password.
You can see the little spinner as well.
So it's just going to show these toasts which go away after a certain amount of time.
And you can look at the React Toast API documentation if you want because you can set it to a shorter
or longer time and some other options as well.
But let's try to log in as let's say, John at Email.com.
We know that's the correct email, but let's do the wrong password and we should get just the same message
should always be invalid email or password, whether you have the email wrong or the password wrong
or both.
So let's do one, two, three, four, five, six, which is the correct click submit.
And now you'll see I got redirected.
So I'm essentially logged in now and you can actually check for the Http only cookie.
If you go to application and you go down to cookies right here, you can see JWT and this is not on
the client as if like if you stored it in local storage.
So you can see here Http only is checked.
Now I'd like to show up here instead of sign in.
I want a link to the profile.
So the last thing we're going to do in this video is go to our header and just change some things around.
So.
Let's see.
We already have our cart state.
Okay.
We already have use use selector and we're using that to get the cart state.
Now let's get the user state.
So we'll copy this down and instead of cart items, we want the user info.
And instead of the state, we want to get that from the auth state.
So now let's come down here and let's see where we want to put this.
So where we have this.
Link container.
I'm going to go right above that.
And then, yeah, let's check for user info.
So if there is user info, then we'll show something else.
We'll show something else.
So something else is going to be this link container here.
So we're going to cut that and then put that in the second.
Parentheses and in the first parentheses we're going to have a drop down.
Let's close that.
Okay, so we have our NAV drop down and it has a title of user info, name ID username.
And then in here we're going to have our link container to the profile.
Okay, so that'll go to profile, which we obviously we don't have yet, but we will and let's see,
we'll have our item and that'll just say profile then let's go outside of the link container still within
the NAV dropdown and we're going to have a nav dropdown item with an on click.
Close that.
And inside that.
It'll just say log out.
So that'll be our log out.
So let's save that and see what we get.
So use info is not defined.
Again, that should be user info.
I keep doing that and nav dropdown is not defined, so we also have to bring that in from react bootstrap.
So nav dropdown.
And then log out.
Handler is not defined.
We're not going to do that just yet, but we can at least create it.
So we'll say const log out handler and for now we'll just do a console log and say log out.
And have dropdown is not defined.
Let's see, did I mess up the casing on that?
Hmm.
Oh, okay.
I just had to reload.
So now, as you can see, we're getting the the user name.
So John Doe, which is because I put the title here and the nav dropdown and this is all available to
us with React Bootstrap.
And then we have our profile link and logout link, which obviously these aren't going to work right
now.
Well, the profile is a link logout actually just calls a handler.
So if I open up my console, we should see if I click log out, it'll just console, log, log out because
we haven't implemented that yet.
But now we can at least see, you know, when we're logged in.
So the log out I think is what we should do next just so we have the ability to to log in and log out.
And then after we do that, we can implement our front end registration and we're just about done with
with authentication.