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
09. Attempting authentication

Episodes

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

Transcript

00:00
There's a really important function that we want to include inside of our useAuthComposable, and that is attempting authentication.
00:07
Now, the reason that we want to split this out is first of all, we don't want to do too much inside of one login method. And also there are two places where we want to attempt to authenticate the user and grab their details.
00:20
That is when we refresh the page, because when we refresh the page, we want to reset the state that we have up here. So we're going to set this out to a separate method, and then we have the ability to get the user's details anytime we need, like when we refresh
00:35
the page, but also directly after we've logged in as well. So let's go ahead and start to create this out and I'll show you how this works. So let's create out an attempt function inside of here, not forgetting to go ahead and expose this because we're going to need to use that later.
00:52
And inside of here, again, this is going to be async. We're going to go ahead and make a request to grab the user. So let's again, wrap this in a try catch block. Once again, we'll go and just console log E out.
01:05
We will update that in just a second. Cause if the request to get the user fails inside of here, we want to wipe the state inside of here. Okay.
01:14
Let's go ahead and grab the user's details from the API. So let's say await Axios get, and of course we're going to go over to that API slash user endpoint that we've already hit. So if this is successful, then we can just go ahead and set authenticated to
01:32
true, and we can go ahead and set this user with the data we get back from the API. So in here we can call that set authenticated setter and pass in true. And we can call that set user setter and pass in the data that we get back from this response.
01:48
Okay. So we're not calling this attempt method from anywhere just yet, but we will want to do that immediately after we have authenticated. So we can just go ahead and return on attempting authentication once
02:00
we've logged in and we should be good. Now, if we head over to our navigation, we know that we've already got authenticated wrapped within here, or we've already got the user's name wrapped within this if statement.
02:12
So if everything goes well, we should now see this user's name appear when we log in. Okay. Let's go over and try this out.
02:19
First thing I'm going to do is just clear out the cross-site request forgery token Laravel session from the cookies. I'm going to hit log in and there we go. Great.
02:28
So we're now authenticated. We've set that data and we see it instantly appear within that navigation component. Now we won't see this just yet, but if we think about what happens, if an attempt fails, then what do we want to do?
02:43
Well, we pretty much just want to reset everything back to its original state. So we want to set authenticated back to false, and we want to set the user back to an empty object. So when we get to calling this later, when we refresh our app, because at the
02:57
moment, when we refresh, all of the state is lost, although we are already authenticated, what's going to happen is if something has expired, so if the session has expired or the user has been deleted, this will fail and then it will go ahead and reset the state for us.

Episode summary

In this episode, we're tackling a key part of our authentication flow: attempting authentication. Instead of putting all our logic inside a single login method, we're creating a dedicated attempt function inside our useAuth composable. This separation helps keep things clean and makes it easier to fetch the user's details both after logging in and whenever we refresh the page.

Here's what we do step by step: we set up the attempt function as an async method that tries to fetch the authenticated user from the /api/user endpoint using Axios. If the request is successful, we update our state to show the user as authenticated and store their details. If it fails (like if the session expired), we reset everything back to the unauthenticated state, clearing out the user info.

We test this flow by logging in, making sure the user's name appears in the navigation when everything works, and explaining what happens if authentication fails. This way, when the app reloads, the correct state is shown—either keeping the user logged in or logging them out if something went wrong with their session.

By the end, you'll have a much smoother, more resilient authentication flow in your app!

Episode discussion

No comments, yet. Be the first!