Get the Current Session from Appwrite of an Authenticated User in React
We’re able to log people in, but how does the application know this? Appwrite can see this if we try to make a request based on the securely stored session cookie, but we need to first know if they’re logged in before trying to submit a request for a particular task, otherwise we’re making a lot of assumptions within our UI.
To work through this, we’ll first get our current Session using the Get Session endpoint, which will not only allow us to pass in a Session’s ID to get the details of that Session, but also pass in the key of “current” which will give us well… the current Session. If they’re logged out, we won’t do anything, but if they’re logged in, we’ll then store that Session in state, which will be our indicator for whether or not we should show Log In or Log Out in our navigation.
What You’ll Learn
- Get the details of the user’s current session (if logged in)
- Dynamically show login and logout links based on authentication state
Resources
Instructor: [0:00] In the last lesson, we've successfully logged in a user and created a new session for that user. Now, how do we actually access that session and make use of it?
[0:08] Back inside of the app, we have a few places where we need to know the application state in order to properly display what's on the page. Take this login link, for instance. If somebody sees this, they probably think that they're not logged in.
[0:19] We probably don't want people trying to create a session over and over again. Instead, if we know that they're logged in, we want to show something like a log out button. That way, they can certainly log out.
[0:29] To start, let's head over to liboff.ts, where here we can think about how we can create a new function to grab that session. Using the Account API, we have a few different endpoints that we can use to validate that we have an active session. In particular, we have the getSession endpoint, but we also have the getAccount endpoint.
[0:47] Now, the interesting thing for getAccount is you also get some additional information like the name and user preferences if that's something you need for your application. If you're more interested in just getting the session object, you can use getSession, which is what we'll use.
[1:00] If we use getSession, we can either pass in a session ID, or we can pass in the word current, which will give the current session. What we'll do is we'll use the getSession method, and we'll pass in that current method and return that back to the App.
[1:14] Back inside of my auth.ts file, I'm going to export a new async function. I'm going to call that getCurrentSession, where inside I'm going to create a new constant called session. I'm going to set that equal to account.getSession, where again, I'm going to pass in the word current as my value. We can then return a flexible object like we usually do and pass in session as a property.
[1:38] We're back inside of my nav component. I'm going to import that getCurrentSession. I'm going to import that from at lib.of. Of course, we need a way to actually make this request, so I'm going to import useEffects from React. We're inside of nav. I'm going to create a new instance of useEffects with my empty dependency array, because I only want it to run once.
[1:59] I'm going to create a wrapped async function called run that's going to immediately invoke, where inside I'm going to destructure my constant of session, where I'm going to get that from await getCurrentSession.
[2:13] From here, we need a place to actually store that session. Before we go any further, let's console.log that out like we usually do so we can see what that session looks like.
[2:21] Once the page reloads, we should be able to see that we have that new session object, including all the information about that session. We can see we have that current flag of true, because we're requesting the current session.
[2:32] If I, for instance, logged in on another device, or even another browser, I might see multiple sessions if I'm listing my session, but I only want the current session for this browser.
[2:41] Once we know we can get that session object, and we even have an ID associated with it, we know that we have an active session that we can use. Now let's take the session data and actually start in state. I'm going to also import useState from React.
[2:54] Inside of my nav, I'm going to create a new constant of session, and I'm going to set my setter as set session, and have that equal to useState. As we can see, we have two instances of the constant of session here. While technically it'll probably be fine as within this scope, session is still valid, let's just turn this back into data.
[3:12] For now we can run set session and say data.session inside, where now as we can see, TypeScript is unhappy because useState isn't typed out properly to receive this session type. Similar to previous sessions where we grabbed our document type, we can do the same thing and grab that session type from our Appwrite package.
[3:34] I'm going to import models from operate before my useState Hook. I can say that I want that to be typed out as models.session. We can see immediately with that change, our session is now happy.
[3:48] If we start to scroll through the page, we can see that we have two instances of buttons available, where we had this button that was commented out, which is going to be for logging out, and then we also have this login link. This logout link doesn't currently work, and we'll come back to this in another lesson.
[4:03] For now we can say, if we do have a session, I want to render that button, and if we don't have a session, I'll want to go ahead and render that link. Let's now go ahead and see how that's working. Inside of our app as we should expect, we should now see that logout button.
[4:19] While it doesn't work quite yet, we'll get back to that later and set it up so that we can destroy the session.
[4:25] For now we can test this out by opening up our developer tools and under the application tab, under storage, we should be able to see this clear site data button, where if we select including third-party cookies and click clear site data, once we actually refresh the page, we should see that we no longer have that active session.
[4:41] Now anytime we login in the future, with a valid active session, we can see that it'll automatically update to reflect that authentication state. We're going to stop here for this particular lesson, but keep in mind, it's probably unlikely that you would want to make this request in every single component or every single page where you want that authentication state.
[4:59] Instead, we would want to make this request globally so that we can trickle down that session data throughout the entire application, which is exactly what we'll do in a later lesson, where we'll learn how to create global state using context.
[5:13] Next, I don't want to expect my users or myself even to have to go ahead and manually clear out any session data anytime I want to log out of the app, I want this logout button to be able to work.
[5:23] Next, we'll learn how to programmatically delete a session so that we can log out a user, and in particular, we'll see how we can delete the current session.