This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
12. Logging out

Transcript

00:00
So finally, as part of our base authentication functionality, we want the ability to log out. This isn't going to be anything new because we just need to hit the log out endpoint and update our state.
00:10
Let's go ahead and get started. Okay. So we'll head over to use auth and we'll create out a new function in here. So of course, we're going to call this log out and inside of here, we
00:23
will also make sure we expose this. Now, where do we want to invoke log out from? Well, probably from the navigation. We can do this from anywhere.
00:32
Remember using a composable is super handy. Okay. So in here, let's go and create our button and we will say, log out. We'll say V on click and we'll say log out.
00:45
Okay, great. Now, when we get to the next section, where we build out more of a system, we're going to want to log out and then redirect somewhere, potentially something like that.
00:55
So bear in mind that this is going to be very simple because we're working with very static functionality here, all on one page. Okay. So let's go over to our app and just authenticate and we should see that log
01:06
out button clicking it, of course does absolutely nothing at the moment. Okay. So over to use auth, what do we need to do in here? Well, we'll probably want to make sure that we catch any
01:18
errors with logging out as well. And if that does happen, we will do the same thing and go ahead and use a promise reject with just a null value, just so we can catch that. But other than that, it's pretty straightforward.
01:30
We just want to go ahead and send a post request down to our log out endpoint using our Fortify route. And let's just make this async before we then go ahead and set authenticated to false and also set the user back to an empty object, and that's
01:48
pretty much all we need to do. Okay. Let's go out and try this out. So let's hit log out and there we go.
01:54
We are logged out. We're not authenticated anymore. We can log back in and log out again. Very, very simple.

Episode summary

In this episode, we're adding the all-important logout feature to our app’s authentication system. The process is nice and straightforward: we need to make sure we can trigger a logout, hit the backend logout endpoint, and then update the app’s local state so the user is actually logged out.

We start by editing our useAuth composable and adding a new logout function. It's just a matter of exposing this function and deciding where in the UI we want to allow users to log out—usually somewhere in the navigation bar. We wire up a simple logout button, and connect it to our new logout method so it does something useful when clicked.

Next, we handle the actual logout logic: making a POST request to the server’s logout endpoint with Fortify, resetting our authenticated state, and emptying the user data from local memory. We even briefly chat through simple error handling, to make sure we’ve got our bases covered if the logout request fails for any reason.

Finally, we give it a spin in the app, and confirm it works—users can now sign in, log out, and see their authentication state update instantly. Super simple, but it lays the groundwork for more advanced flows like redirecting after logout, which we'll cover in later sections!

Episode discussion

No comments, yet. Be the first!