In this video, we are going to implement two things.
One is, as soon as a user logs in, we want to redirect the user to his or her dashboard and we will
also implement what is called look out functionality.
And to achieve that differently, we may need the action to do that.
So we inside the SLC component and then the context, now we are moving into the of context and here
we go.
So inside here we are going to create one more action for log out.
So let's collapse this one and here goes the lockout action.
Cons look out.
User action.
And this function will not take in any agreement or without making any HTTP requests.
But instead we are going to dispatch this method with a type called look out and then with a payload
of not because we want to empty the user states, that is the user authentication state.
So here has now so inside the action type of the user, we need the log out action type.
So inside the of context lets require the log out.
Great for log out.
There is no way we can fix error.
So for this one there is no log our success or lock out error.
So here let's replace that and going to be as log out.
So lastly, we need to handle inside the reducer.
So after the pull file you can come here and then we can even copy one of this ones and here we go.
Let me have a beautiful comment by saying, look out.
And here the case is, log out.
And for this I'm going to empty the user of this where we have the user token and I want to work remove
everything by assigning the states.
User of.
To know that is it and loading false and here error also now yeah so only updating the user of and that
is it.
So what about the logging in redirect where we can achieve this one in two ways.
We can redirect the user inside the component that is the log info.
But on unlucky for us we are handling the state or the results inside the action or we can retain a
value upon logging in here.
So inside the and submit what comes back from this action call.
We can use that one to be able to redirect.
But what comes back from this one is a promise, right?
So we are going to handle it inside the action itself.
So let's locate where we are logging in and here we go.
So for this one, we are going to use the window object that is a window dot location.
So here our provide as redirect and I'm going to use window dot location on that.
We have the H ref and I want to push the user to dashboard.
Let me refresh it and let me provide the right email and the password.
One, two, three, four, five.
Let me hit send and you can see that automatically.
I have been redirect to my dashboard.
So what about the look out?
Now we are going to dispatch the action inside the number.
So let's go to the number components and inside the components, let's collapse this one and the number
which is here.
I'll bring in the of context and I will need the use context also.
So if you are familiar with Redux, here is going to be as use selector instead of the use context.
So let me bring the React import at the top here and now we are all set.
So let's call the use context by passing in the of context.
And what comes back is the data that I want.
So now inside the of context, let's send in the log out action.
So let me pass in here as log out user.
I'm going to be as log out user action.
So the next step is let's structure it here and then on the button, I want to trigger that action.
But guys, as soon as I click on Look Out, I also want to reiterate the user to log in page.
Because of that, I want to create a function to call this function or we can do the same thing as we
did for logging in so we can even copy this syntax for redirect here and here for the log out.
That is this function.
After dispatching, I want to direct the user to log in.
That is it.
So inside here I can go ahead and then dispatch the action.
So let's look at the log out link, which is this button here.
So I'm going to add an event list now call on click and here I'll provide the log out user action.
So now moment of truth.
So let's get back to the homepage and now let me click on Look Out.
We can see that it has redirected me to the log in page.
So let's go to the dashboard and see.
Well, if we do, I have not got but I still see this one.
So let's check the console and see if we still have the token here.
Yes, we still have it.
So it means that we are not deleting the token from here.
So we need to modify the log out functionality.
So here what you are going to do is that we need to empty the local storage.
So before we return here we are going to remove the user from storage.
So here we go.
Look dot remove item and item you want to remove is called the user of.
Let me get to oh, let me open this one and let's see after clicking logout, it is going to remove
this one.
So let's see.
And you can see that it has removed the token for my storage and if I try to go to Dashboard, you can
see error here.
It means that I need to log in so I need to provide the right message than this error error here.
So let's go to the dashboard of the account, which is this one.
And here let's provide the actual error.
Let's inject the error record and let's see.
And now error invalid token, please log in again.
Let me have some space by using this empty object with this and I have some spacing between the.