Hi and welcome back.
Today I want to speak to you about how we
can log out the users from our application.
We could use the reset to initial state
function given here to reset the user
to its initial state,
where they're not going to be logged in.
They're only going to have a profile image
had before and their token and display
name and all that information
that we were fetching from
firebase is going to be deleted.
So let's do that.
Right now
we're going to be going to our home page,
and what we want to do here is place
a logout button somewhere, maybe right
below the profile image given here.
Could be a good place.
So let's put this in a view container and then once we do that let's make sure
that here everything is vertically centered and it is and then
what we want to do here is create a pressable and on press we're going to be
dispatching reset to initial state from the user JS file in our reducers.
So let's import this and make sure that we put some kind of text here.
We could use our header component for that and let's say that the type is
the smallest one which is three and the title is going to be log out.
Let's make sure that it looks like a button.
Maybe we could give it the blue color that we have used on our couple of headers.
So let me search for the header components
that we have used and I'm just going
to copy this color and I'm
going to place it here.
And one more thing that I want to make
sure that we do here is that we log out the user from the firebase as well.
And to do that we're going to have to put this in one more set of braces so
that we're able to do more than one action and we can make this an Asynchronous
function and we're going to have to await logout.
So let's create this function in our user JS API file so let's call it export const
logout and all that it's going to do
is await the auth sign out.
Okay, so let's use this here by importing the logout.
And if we press on here, what is going to happen is that all our
users data is going to be wiped and reset to initial state.
And because that is going to happen and because we have our non authenticated
and authenticated flow that is dependent on is logged in state in our redux,
our application is just going to go back directly to the login page.
So let's see this in action.
I'm about to click on this button and here we go.
We are back to our login page and if we
want to log in again we're going to have to enter our credentials again.
So that's it for logging the users out.
In the next video we're going to be talking more about Tokens.
So I'll see you there. Thanks so much for watching.