Authentication with Laravel Sanctum and Vue
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
08. Moving auth to a composable

Episodes

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

Transcript

00:00
At the moment, our useAuthComposable consists of just the examples that we added earlier, the ability to set a name and get a name, and obviously we have our name in our state. Now that's not what we want, so let's think about what we do want to store in our state for authentication. The first one is pretty obvious, it's just whether or not the user
00:19
is authenticated. By default, of course, we're going to set that to false. The next one is going to be the user. We've already seen a request of getting them user details back. Once they are authenticated, we also want to set these globally so we can show them in the navigation or anywhere else we need to. So with them two state changes,
00:37
just before we do the getters and the setters, let's go and update our navigation. So over in our navigation, what we'll probably want to do is pull back a getter, something like whether we are authenticated, and also pull in the user. Then with this, what we could do is create some kind of component to say the if authenticated. So if we are authenticated,
00:59
then we want to show the user's name. So we don't have either of these just yet, so let's go back over to use auth and let's just change some things around. So first of all, we want to get whether we are authenticated or not. So let's pull out authenticated from our state, and we also want to be able to set whether we're authenticated or not.
01:18
So let's do exactly the same thing here, and we'll set that to whether we are authenticated, and we'll just override these with authenticated and authenticated. We'll also do exactly the same thing for the user as well. So let's say set user, user, and we'll set that in our state too, not forgetting to expose both of these things. So whether we're authenticated and also expose
01:43
the user. So what we can do now is implement some functions in here, which do things like log us in. So for example, we could have a login function inside of here, which once is successful, we could go ahead and set the authenticated state and the user as well. Just before we do that, we've forgotten to create out a getter for our user, so let's make sure we do that as well.
02:06
And now we have everything that we need, and we can focus on this login functionality. Let's head over to the browser and just check how we're doing. And you can see, sure enough, we don't see anything in the navigation because we're not authenticated. And if we head over to our console, everything looks good. So let's change up our home view to instead of set name, which we don't have
02:24
anymore, go ahead and log in. So we just have this login function inside of here being pulled out. Now, obviously these are named exactly the same. So what we can do and what we'll be doing throughout this is aliasing them. So I'm going to call this a login action, and we can just call login action directly from here using the form data that we have. Okay, so back over to our
02:49
useAuthComposable, what do we want to do inside of login? Well, we know that whenever we try and do something like send a request down to one of the endpoints, we always want to go ahead and set our cross-site request forgery cookie. So we're going to set this again to async, much like we did with our login function over our home view. And we want to use Axios to get sanctum cross-site
03:12
request forgery cookie. And of course, just make sure we import Axios at the top here, so we have that available. Okay, so next up, we want to send a request through to the login endpoint, but we want to catch any errors here. That's really important. We're not going to be doing anything with them errors at the moment, but we can at least catch them and do nothing. So let's go ahead
03:34
and add in our catch block in here. And what do we want to try here? Well, we want to send a request through to our login endpoint, and we want to take in any of the credentials that get passed through here. So let's add in some credentials, pass them through, and we'll go ahead and catch an exception in here and just console log that out for now. Okay, so now over in our home view, now that we
03:59
are sending them credentials here down to that login action inside of use auth, that should now do exactly the same thing as we had before, now just tucked away in a composable. So let's open up our console and hit login. Okay, yeah, so login action is not a function. What did we forget to do? Probably forgot to expose that login function from our composable. Let's go back over and try this
04:24
again. And okay, great. So we've got that other error again, because we're already technically authenticated. So we'll just come over to our application, clear everything out and give the page a refresh and try this again. Okay, nothing happened. That's good news. It means that we have sent a successful request through to our login endpoint. So we have successfully moved all of
04:45
this stuff over to a composable, which makes it much neater, gives us the ability to reuse it as well, which is super important. There's another step to this, which is splitting out how we get the user and then how we set the authenticated and set user. Let's cover that in the next episode, and then we will have created that login and we will see the user in the navigation.

Episode summary

In this episode, we start refactoring our authentication logic to make it more reusable and maintainable by moving it into a composable. Rather than having our authentication state and functions scattered around or stuck in components, we centralize everything into a custom useAuth composable.

First, we decide what should live in our auth state: the user's authentication status and their user data. We set up these state variables, and expose getters and setters for them. This helps us easily check if someone is logged in and access their info from anywhere in our app.

Next, we update our navigation component to pull auth data from the composable, so we can conditionally show the user's name or other content only when they're authenticated. As part of this, we also start planning for login and other actions, adjusting our Home view to call a login function from the composable.

We wire up the login flow, including loading the CSRF cookie with Axios and making a login request with error handling. We make sure to export all the necessary pieces from the composable so everything works as expected from our components.

Finally, we test it in the browser, confirming that our login is being handled by our new composable, and see that the setup is much cleaner and ready for future expansions. In the end, we note that there's still a bit of polish left to do—specifically splitting up the user-fetching logic and authentication state—which we'll tackle in the next episode.

Episode discussion

No comments, yet. Be the first!