Delete the Current Session in Appwrite to Log Out an Authenticated User
When logging into any application, the expectation is you can log out. Maybe it’s because you want to prevent someone else using the device from messing with your account, but whatever it is, we ultimately want to destroy the current session both by locally signing out and also letting Appwrite know that the session is no longer active.
The Appwrite SDK has an easy method to handle this where we don’t technically need to even pass in the current session ID, we can just simply tell it we want to delete the current session for the device like we did in the last lesson, and that’s it!
So we’ll see how we can use the Delete Session endpoint to do just that, passing in the “current” key like before to specify we just want to clear the device’s active session, and then clearing local state to re-render the UI and avoid any stale session information from sticking around.
What You’ll Learn
- Delete the current session
- Clear local state after deleting a session
Resources
Instructor: [0:00] When giving our visitors a way to log in or create a new session, we also want to give them the ability to log out or delete a session. Inside of our application, we do have a logout link, but as you can see, I'm trying to click on it repeatedly, and it's just not working.
[0:14] Inside of our nav component, let's start off by wiring up this button so that whenever somebody clicks logout, we're actually going to log them out and delete that session. We're going to dig into the Appwrite Account API, where we're going to use the deleteSessionEndpoint.
[0:26] To do this, we can pass in the sessionID, or in our case, we can pass in the word current to delete the currentSession. Now, the way that this is going to work is pretty straightforward as we'll use the deleteSession method on the account service where we'll just pass in that ID.
[0:42] Let's head over to libAuth.ts where we're going to start off by writing up a new function and let's export a new async function called deleteCurrentSession. Inside of this function, we're going to await the account service where we're going to run deleteSession, where similar to what we did with getSession, we want to pass in current because we want to delete the current session.
[1:05] Now technically this response doesn't return any content, so we don't really need to return anything from the function. That means that's all we really need to do, in order to start using this function to delete a session. Back inside of our nav, let's scroll down to our button where what I want to happen is anytime we click this button, I want to log somebody out.
[1:23] On this button, I'm going to go ahead and add an onClick handler, where let's call this handleOnLogOut. At the top of this component, I'm going to define a new function called handleOnLogOut. I'm going to also make that async, where here I can invoke that delete function.
[1:39] On our import statement that already exists from getting a session, let's deleteCurrentSession, where inside of handleOnLogOut, I'll go ahead and run await deleteCurrentSession. After we invoke this, we want to make sure that we clean up our application data, as this session object that we currently have in state will now be stale data.
[1:59] To make sure we update this and that our UI refreshes, we can run setSession and simply pass in undefined. Now back inside of our application, let's give this a try. We're going to go ahead and click log out, and we could see that it very quickly updated to an unauthenticated state where I can now see that login button again.
[2:15] If we refresh the page, we can see that we do get a request to try to grab that CurrentSession, where we get a 401 because it's not a current session. Once we log in again to a new valid session, we again get that logout button where we can simply repeat the process.
[2:30] Now as a quick note, we're currently using the deleteCurrentSession feature, in order to make it really easy for us to just simply delete the current session for our browser.
[2:40] Alternatively, if you wanted to be more granular with your session management, such as maybe you want to give somebody the ability to log out of other sessions, instead of deleting the session by using the stringCurrent, we can just go ahead and pass in the ID itself.
[2:53] Where instead of deleteCurrentSession, maybe this function would be called deleteSessionByID. Where instead of the stringCurrent, maybe we're going to pass in dynamically a session ID passed in as an argument to that function, where that session ID could come from that state and passed in directly on logout.
[3:08] For now, for our use-case, all we care about is the currentSession, whether we're getting it or deleting it. Being able to use these functions dedicated to the currentSession just reduces the complexity for what we need to deal with within our application.
[3:20] Now, this is working really great for our singular nav component, but I want to use this authenticatedSession for more than just displaying if somebody can log in or log out. I want to do things like only show this addEventButton if somebody is logged in.
[3:33] We're taking that a step further. I don't want to show this deleteEventButton unless they're an admin. How can we start to think about how we can grab this session data globally rather than add an individual component or page level?
[3:44] Next up, we'll see how we can use React context to create a global state mechanism, which will allow us to get our currentSession globally as well as interact with it from anywhere.