Nuxt 3 Authentication with Laravel Sanctum
This episode is for members only

Sign up to access "Nuxt 3 Authentication with Laravel Sanctum" right now.

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

Episodes

0%
Your progress
  • Total: 1h 1m
  • Played: 0m
  • Remaining: 1h 1m
Join or sign in to track your progress

Transcript

00:00
We're now going to look at signing out. Obviously, we're going to do this over in our app navigation component. But once again, you can call this from anywhere,
00:08
since the package we've used gives us that composable. Let's go ahead and create out a button in here for the user to sign out. And we're going to hook this up to a method. Let's say be on click and let's just call this log out.
00:23
Okay, let's build this up here. So log out and create this out here. And let's just do nothing in there for now. OK, so we can hit sign out to hopefully sign ourselves out.
00:34
How do we do this? Well, once again, from the use Sanctum Auth composable, we can pull out a log out method. Now, we've called this the same thing here.
00:44
So if you wanted to, you could go ahead and alias it by just using a colon and then changing the name over. So now we can call a method called log out action. Let's go ahead and do that now.
00:55
So let's await on this and we'll make this async and let's invoke log out action. That is all we need to do to sign ourselves out. OK, let's go ahead and try this out. Let's bring up our network tab just to make sure that everything is working
01:08
and hit sign out. And as you can see, we've got a cause error. Well, that's just going back to our API and making sure that we add the log out route, which is provided by Laravel Fortify into here. You see a cause error for any of the functionality you want to implement.
01:24
Just make sure it's set under your paths. OK, let's try this out again. Hit sign out. And there we go. We are signed out.
01:31
Now, what happens if we want to go ahead and redirect once we are signed out to a specific location? Well, there's a couple of ways to do this, and I'm going to show you both. So the first way is to come back over
01:42
to our Nuxt config and under our sanctum redirect, we can use on log out. So let's say that on log out, we want to go back to the homepage or a completely different page altogether. We can go ahead and define it in here.
01:56
As an example, let's just create out another page just so we can see this redirecting over to a different location, because at the moment, none of our pages really make sense. So let's create out a component in here
02:06
called example, and we'll go ahead and just create out some text inside of here and keep it simple. OK, so once again, if we want to go ahead and redirect to example, once we're logged out, we can use this in here. OK, let's go over and we'll sign back in.
02:24
And let's go ahead and sign out. And there we go, we're redirected to example. If you have a very specific requirement to what happens when you're logged out, let's go ahead and get rid of this option
02:35
and let's manually look at redirecting. So over in our app navigation, it kind of makes sense to say that we want to log out and then we want to redirect so we can use the navigate to function and we can just pass in a path.
02:51
Let's choose example. Now that we've done this, let's take a look at what happens. So let's go back over to sign in and let's sign ourselves in and let's hit sign out. Now we're going to keep an eye on our console here when we hit sign out.
03:04
And yeah, everything looks good. So we're redirecting manually over to here now. And this is useful if you want to flash a message and then redirect the user or you have any additional logic in here
03:16
that you want to use once the user is redirected. So two options in here. I'll leave this one in here for now, but otherwise you can define this directly inside of the config.

Episode summary

In this episode, we're diving into how to add a sign out feature to our app. We start by heading to our navigation component and dropping in a button that the user can click to log out. Thanks to the magic of the composable we installed earlier, grabbing a logout method is super straightforward!

We wire up the button to call our logout method, and—after making sure our backend is set up with the proper route—we test it out and watch ourselves get signed out (and fix any CORS errors along the way).

Next, we look at how to handle redirects after signing out. You can set up an automatic redirect by configuring it in your Nuxt config (for example, sending users to a custom "example" page), or you can take control and manually redirect users in your code. This second option is really handy if you want to show a message or do something extra before redirecting.

By the end of this episode, you’ll know how to sign users out and customize what happens after they leave, whether you want a simple redirect or something more advanced.

Episode discussion

No comments, yet. Be the first!