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.
21 episodes•1 hr 35 mins

Overview

Learn how to authenticate with a Laravel API from Vue using the Composition API.

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create our own beautiful starter kit with more features, including registration and middleware to protect routes.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.