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
06. A quick authentication test

Episodes

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

Transcript

00:00
Now is the moment of truth where we go ahead and just run a quick authentication test from our client to see if we can authenticate with the user in our API.
00:09
Now, we don't have any users at the moment, so we're going to go over to Tynker and we're going to generate out a fake user in the database. So let's use the user factory and we'll go ahead and create a user out here. I'm going to slightly customize this so it actually belongs to me. So I'm going to pass in a name to override the default.
00:29
And I'm also going to choose a password as well. So let's go ahead and be crypt to the password that we want. And I'm just going to set that to password. OK, so that's a user now created in the database.
00:41
And you can see, yeah, my email's not the same. So let's go ahead and switch that over as well. And we have our password. Everything looks good.
00:49
So we can test authenticating directly with this email password from our client. OK, first things first, we've got a little bit of a messy client here with everything that has been included by default. So let's run through and just quickly clear this up. So if we head over to the source directory here over in assets, I'm going to go ahead and get rid of this logo and clear all of this out.
01:15
We're going to go over to our views, which are used with our router. And we're going to delete this about view and delete that anyway, even though it's being used. The home view, we're going to go ahead and get rid of the import that we have here. And we're just going to say home inside.
01:29
Next up over in our router, which we're going to use a little bit later, we'll get rid of this about page because we don't need that anymore. And we've deleted it. And we can come over to our main CSS file and we can go ahead and get rid of pretty much everything that has been added in here. We have this base CSS file as well, which we can also clear out.
01:48
And chances are we'll probably only need our main CSS file. So we can also delete that base CSS file as well. Now, also over in app, we can go ahead and get rid of this. Hello, world.
01:59
And we can also get rid of the header here as well. And we can just include the router view here by default. We'll also get rid of these styles. So up to you whether you clear this out.
02:09
But once we've done this, we end up with a really basic, fresh, clean app that we can play around with. Okay, so let's go and try and authenticate this user that we've just created in the database. So we're going to go ahead and create out a simple form in here. Inside of here, we're going to have a container for each of our email and our password.
02:28
So in here, we can create out a label for our email address and just add this in here. It's going to be super rough for now, but we'll add some styling a little bit later. So that's going to be our email address. And we can do pretty much the same thing for our password here.
02:42
And this is for our password. Let's also give this an ID of email and this an ID of password. And then, of course, we'll just implement a simple submit button down here to log in. And we'll set that to a type of submit.
02:57
Okay, so nothing special, but we can at least enter some data in here and see if we get authenticated. Now, it's up to you what you use to actually send network requests down. But I'm going to go ahead and use Axios to do this. So I'm going to do an npm install on Axios here.
03:12
And then we're going to go ahead and import this at the top so we can start to make some requests. So let's create out a really simple login function inside of here. And we will call the routes that we need to to our API directly from here. Before we do that, let's go ahead and import reactive from view.
03:35
And let's create out a form in here using a reactive object that holds our email address and holds our password. What I'm going to do is populate these by default so we don't need to keep on entering them. So let's enter in the email address and the password that we registered earlier. And then down here, we can go ahead and hook these up within our inputs using the model.
03:57
So let's say form email and we'll do the same for form password as well. There we go. OK, so now what we can do is when we log in, we can read the data from the form and send it down to our back end. OK, so what are we going to do?
04:12
Well, let's go and make this async. And we are going to await on a request with Axios by posting through to our login endpoint. And the data that we're going to send across is the form data. Now, this isn't going to work at all at the moment once we go ahead and submit this form.
04:31
So let's attach our form handler to this. So let's say be on submit, prevent, and we'll say login. So pretty much everything we would expect. Let's see what happens when we try and send this request across.
04:44
OK, so I'm going to go ahead and open up the network tab here and I'm going to send this down. And yeah, sure enough, we get a 404. It's just because we are sending this down to the current client and we haven't specified the API. So what we're going to do is head over to the main.js file here.
05:03
We're going to go ahead and import Axios at the top. And then we're going to set some defaults. And really importantly, think back to when we were setting up Sanctum before and the things that we need to add to this as well.
05:15
So now that we've done that, let's go ahead and start to add a base URL. To set any of the Axios defaults, we use Axios defaults. And then we just set things like the base URL. We know what our base URL is.
05:27
We're going to hard code it in here, although it would be better to put this in an EMV file. So we're going to say Laravel SanctumViewAPI.test. And then we're going to go ahead and set up the defaults that we need to send down to make Sanctum work. And that is with credentials.
05:43
We're going to set that to true. And we're also going to set the with cross site request forgery token value to true as well. OK, so now that we have adjusted that, when we hit log in now, you can see that this now sends a request down to our actual API.
06:00
And you can see that we get a 419 unknown status. So what's happening here? Well, it looks like we've got a cross site request forgery token mismatch. What could be happening here?
06:12
Well, if we head over to our API project, remember what happened earlier when we configured our cause. This was in here by default, this Sanctum cross site request forgery cookie. Sanctum provides this cross site request forgery cookie functionality. So you can hit this endpoint and on your client side, get a cross site request forgery token set within a cookie.
06:32
So then any subsequent requests will always include that cross site request forgery token. So a really important step because we always want a cross site request forgery token. But the question is, how do we set this up within our client? Well, all we do is before we make a request to any other endpoint where we'll need a cross site request forgery cookie,
06:53
we go ahead and we send a request through to that endpoint. So Sanctum cross site request forgery cookie. And then we send a request over here. So let's get rid of that dot and we should be good.
07:07
Let's head over to the browser. Try this again and see what happens. OK, so we've got a different status code now. We've got a 405 and the post method is not supported for this.
07:17
That is just because this needs to be a get. Let's try it one more time. And perfect. There we go.
07:24
So what has happened now is we are technically authenticated on the client side. We don't see anything yet. And that's some work that we have to do. But at least we haven't got a cause error.
07:35
We don't have a cross site request forgery error and nothing else has gone wrong. So now that we're technically authenticated within our application under our cookies, which, by the way, you might want to just periodically clear out while you're testing with this kind of stuff. What are we going to do with this information?
07:51
Well, we're going to send another request now down to the user endpoint under our API section. And we'll see hopefully this work. So if we come over and just remind ourselves by default within Laravel, we get this user endpoint, which just gives us back all the details about a user.
08:09
You can see that it uses this auth sanctum middleware. So any of the requests that you're sending down from your client to your API, wherever you're using sanctum, you want this middleware to be applied. OK, let's try sending a request over to our user endpoint to see if this works.
08:25
And we can do this all in the same function just so we can make sure it's working and we can break this up. So it's a little bit better later. So we're going to say Axios get. And this time we're making a request to API slash user.
08:39
And let's go ahead and just not wait on this. Let's say then. And we'll get the response back here. And let's just console log on that response just so we can see this.
08:52
OK, let's head back over to the browser and let's try this out. Keeping our console open. And yeah, I'm really glad we hit this error. The reason that this is happening is we're trying to be redirected because we're already authenticated.
09:05
And once we build up a better structure to this app, so the state changes and also introduce middleware. So a user can't send another request down. We shouldn't ever see this. So, again, like I said, you'll probably want to clear this out if you are authenticating over and over again.
09:21
Testing this out. OK, let's give this a refresh and hit log in again. And yeah, sure enough. There we go.
09:27
So let's just take a look at the data that we get back here. And there we are. There is all of my user information. So with this test complete, we know that we can set this cross site request for retoken.
09:38
We can then send a request to log in, which will authenticate us on the client side. And because we're now authenticated, we can now send down any further request to any of our API endpoints. The only problem we have at the moment is that doing all of this inside of one function and having everything just spread out within your templates is not a great idea. Let's go ahead and look at how we can create a composable to make this functionality more reusable and maintain some sort of state.

Episode summary

In this episode, we dive into setting up and testing authentication from our client app to our API. Since we don't have any users to start with, we use a factory to generate a fake user in the database (and customize the details for ourselves). Then, we tidy up our client app—removing the default logo, about page, extra styles, and other boilerplate code so we've got a nice, clean slate to work with.

With the app cleaned up, we create a quick and simple login form, hooking up fields for email and password. To make network requests, we install and use Axios. We use Vue's reactive method for our form data and bind it straight to the input fields, even pre-filling it to save typing while testing!

The first time we try sending a login request, we run into some issues—like getting a 404 error because we're posting to the wrong endpoint. We fix this by setting Axios defaults, particularly the baseURL and configuring it for Laravel Sanctum (setting withCredentials and CSRF token stuff). This gets us past the CORS and CSRF errors, but there's one more step: fetching the correct CSRF cookie before logging in.

After that, login finally works and we test authentication by making a request to the /api/user endpoint. We see our user data come back, confirming everything's working as expected!

The episode wraps up by noting that while we've proven the authentication flow, our code is messy and jammed into a single component. Next, we'll look into separating this logic into a composable for cleaner, reusable code and better state management.

Episode discussion

No comments, yet. Be the first!