‫Next up, let's allow users
‫to log out of the application.
‫So basically, for that,
‫we will just add a small button somewhere here
‫into this header, and then by clicking there,
‫the user will just get logged out.
‫So here in authentication
‫let's actually now create a new component
‫called Logout dot JSX
‫So this is a real simple one,
‫and so there is no need for any pre-written code.
‫So here all we're gonna do is to return a button
‫and for that we have the ButtonIcon component.
‫So for some reason, that's again not being included here.
‫So I will just import this one and then rename it.
‫So ButtonIcon.
‫And so basically this is just a styled component
‫ready to display as the name says, an icon in there.
‫And the one that we want is
‫the H1ArrowRightOnRectangle.
‫So just like this.
‫And then let's come into our header component
‫which should be somewhere here in the UI.
‫Right here.
‫And then let's just include
‫that here for now,
‫so that later we will then
‫actually build this header component.
‫But for now, this is all we need.
‫So this button here will be responsible
‫for logging out the user.
‫And so now let's write the logic
‫that's gonna be responsible for that.
‫So right here,
‫let's first get rid of all this empty space
‫and then here we will create our next function
‫to interact with our API.
‫And this one, as you can imagine
‫is simply gonna be called logout.
‫And this will be really simple
‫because all that we need here is await
‫the supabase client dot auth dot sign out.
‫And then here we can
‫just in case there is some error, store that and throw that.
‫So basically something like this
‫but this doesn't return any data
‫and so therefore there is no need to return anything.
‫And so then as always, we will call this using React Query.
‫And so let's do useLogout dot JS.
‫So export function, useLogout,
‫and then just like logging in,
‫logging out will also be a mutation.
‫So we will receive mutate function
‫called logout
‫and isLoading
‫from useMutation.
‫Then here we mute our mutation function
‫which will just be the logout function that we just created.
‫So for some reason, that's not importing,
‫but yeah, we wrote that correctly.
‫So let's just grab this one here
‫and then let's import
‫logout as logout
‫API, and then here we can use that.
‫Then next, whenever that is actually successful
‫we of course want the user to immediately
‫leave the application, or in other words,
‫we want them to be redirected to the login page.
‫So that's basically always the entry of our application.
‫So once again, we useNavigate.
‫And here let's also then use the replace option set to true.
‫And we should also do the same thing in the login one.
‫So right here.
‫And so with this
‫we then basically erase the place that we were earlier.
‫So otherwise going back,
‫using this back button here is not really gonna work.
‫So we explored that already earlier
‫in some other project.
‫So here we then return logout
‫and isLoading.
‫And with this, everything looks good to me.
‫Well actually there's something else that we should do here
‫which is indeed really important.
‫And that is to remove the current user
‫from the React Query cache.
‫So just logging out, we'll of course remove the user here
‫from local storage and also from the server
‫but they will stay inside the cache.
‫So because we stored it right here.
‫And so if, for some reason, some malicious actor gets access
‫to that, that would be very bad.
‫And so we can actually remove all queries.
‫So actually not just the user, but really
‫all queries that have been accumulated in that cache.
‫And for that, once again, we need the Query client.
‫And so then on there
‫we just call removeQueries.
‫And here, we can specify which one,
‫but here we simply remove all of them now, right?
‫And now all we need to do
‫is to come to our logout component,
‫then receive that.
‫So logout and isLoading
‫from useLogout
‫let's bring that in here as always.
‫Not as always but whenever
‫this doesn't work for some reason.
‫And there we go.
‫So now, first, the disabled state,
‫which is gonna be isLoading.
‫And then of course,
‫the onClick handler which is just logout.
‫And then here we can do something nice
‫which is to again, use our small spinner.
‫So if we are not loading,
‫then just display this regular icon
‫and otherwise, we want our SpinnerMini.
‫Okay, so let's test this now.
‫So sometimes it's taking some time.
‫So basically that was loading the user in the background
‫but now watch what happens as we click here.
‫So we expect this one to be removed
‫and then, also the user to disappear from the Query
‫and us to be reloaded or redirected to the login page.
‫So let's click here and see if all of that happens.
‫And indeed, there we are.
‫So the user is gone, the data is gone from here
‫and we are back in the login page.
‫And so if now we were trying to access,
‫for example, that dashboard,
‫then that wouldn't work,
‫and we would again get redirected to the login page.
‫Now, okay, so another piece
‫of the authorization and authentication part is implemented.
‫And so next up comes another really important part
‫which is to actually sign users up to our application.
‫So instead of us having to create them here manually
‫like we did initially.
‫So of course this is not
‫how it's going to work in the real application.
‫And so we will sign users up
‫in our application in the next lecture.