Okay, now let's take a look at how we can do something after we've logged in.
And our goal really is to persist our login so that we get our user info in the navbar at the top,
and we redirect the user after they have logged in.
And in order to persist our user, we need to really query the endpoint we created for the user info
in our API.
Because our login doesn't give us anything back about the user, we know we cannot access the cookie
from our code, so the only way we can get the details about the user is by making a request after they
have logged in to go and get that information.
Also, when our app starts up, then we need to effectively go out and get that data as well.
Now, in order to do this, let's go back to our account API and in our login method.
Then we're going to need to do something after we have logged in.
And also we need to make use of our user or user info query here as well.
So first of all, let's just export the hook that we get from this.
We haven't done so yet, so we'll use the Use user info query.
We'll also export that one and we'll make use of this in our navbar.
So let's head up to our navbar.
Let's come up to the top here and where I've hardcoded user in.
Let's remove that and we'll specify const and we'll use the equal use user info query.
And from here we'll specify data and we'll just call it user.
So we don't need to change any of our other code.
So when we effectively refresh our page our navbar is going to load.
And it's going to use this query.
If we have a cookie in our browser then that's going to go out and get our user info.
If we take a look at what's going to happen right now and I'll click on the network tab, I just clear
this and I refresh the page.
Then because our navbar is always loaded, then it calls that user info.
But this gives us a 204 because I do not have a cookie in my browser.
At this point I logged out and I cleared this, so that's fine when we refresh our page.
But what about when we log in?
We need to call that user info query after we've logged in as well, so that we can effectively update
our navbar here.
So back to VS code, back to the account API.
And when we do execute our login method then we effectively also want to query or call this user info
endpoint.
And we can do that by invalidating our user info cache that RTK query is taken care of.
So after we log in, we invalidate the cache and that will force it to go out to our user info endpoint
and get the latest updated user info from our API.
So let's implement that and we'll come up to the top here.
And we're going to specify some tag types.
And we're going to have a tag type for user info.
And I'll add a comma after that.
And we need to come down to our user info endpoint.
And just below the query here we're going to specify provides Tanks and in square brackets, we're going
to use our Userinfo tag.
And then in our login method below the query here we'll use async.
And on query started.
We've used this before.
And in the parentheses here we can supply some arguments if we need to.
We do not need to in this instance.
And then in curly brackets we'll get access to the dispatch and the query fulfilled functions and add
the arrow and open curly brackets.
And then we'll use a try catch block inside here.
If we do get an error we're just going to console dot log any error.
And inside the try we'll just say await and query fulfilled.
And we'll then use the dispatch.
And we'll use our account API dot util.
And we'll invalidate tags and in parentheses.
Then in square brackets will invalidate the user info tag.
Unlike I say, after we log in, that's going to force it to go out to our user info endpoint and get
the data back, which will then populate the user inside our cache effectively for the user info, which
we then display on a navbar.
So that's the system.
And let's head over to our login form and we'll make use of this system.
Or do we need to do anything here.
We've got our await login going on there.
And let's also redirect the user after the login has taken place.
And to do that we're going to bring in a hook from React Router.
So I'll specify const and navigate equals and we'll use the U navigate hook we get from React Router
Dom.
And then after we have logged in we can then navigate.
And we'll just specify a forward slash catalog for the time being.
And if we go take a look at our progress and let's just move this down and I'll just refresh the page
as well, just in case.
And in the email I'll specify Bob at test.com and the password, and notice that the menu has gone away
and replaced with our login and register links.
And if I click sign in then what should happen is we get redirected, we make our request to the API.
We can see Bob at Test.com inside here as well.
And that's good.
That's what we're looking for.
But does our logout functionality work.
And in fact, what do you think is going to happen when we click the logout button now.
Well we're going to clear our cookie for sure.
But what's going to happen with our user info is that automatically going to do anything.
Well let's give it a go.
And if I click on logout we'll see the request going up to the API.
Our cookies certainly has been removed, but our menu is still in place on the top right there.
Why is that.
Well, we didn't do anything when we did log out to update our RQ query cache, so that's still available.
And if I refresh the the browser then it goes away.
So fine.
But what we would like to happen is we also clear out our user from the cache as well.
So back to our accounts API.
Let's also do something inside the log out method as well.
And below the query we'll also need to use the same trick.
Really we need to use the async and the on query started.
And inside here we'll specify parentheses.
Just an underscore because we don't need any arguments.
And we'll get access to the dispatch and the query fulfilled and open up curly brackets.
We'll await the query fulfilled.
We won't do any error handling inside this one.
We'll dispatch and we'll specify account API dot util and invalidate tags.
And in parentheses and square brackets.
We'll specify user info And then we'll make use of our router, which we get from app routes.
Routes.
And we'll simply navigate to the home page when they do log out.
And that needs to be router dot navigate not just router there.
So let's give this system a go.
And I'll clear out the Or I'll close this down.
So I've got all of the available space.
I'll just refresh the page here and let's go and log in.
And if I log in as Bob at test.com again with the passwords, then I should get redirected to the catalog
page and I get our user info back.
If I refresh the page then I should persist the user and I can see Bob at test.com there and access
to the menu.
And if I do log out, then what should happen is we log out, we get redirected to the home page and
our nav bar updates accordingly.
So great.
So that's our login functionality taken care of.
And now we have that in place.
The next thing we'll take a look at is registering a user which we'll take a look at next.