Authentication with Laravel Sanctum and Vue
Playing
04. Installing Sanctum

Episodes

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

Transcript

00:00
Okay, time to get Laravel Sanctum installed. Now, I'd always recommend coming over to the documentation to do this just in case anything
00:07
changes down the line in newer versions. We're going to go through all the steps that we need in the documentation, and I'm going to explain to you what each one does and why it's important. Now Laravel Sanctum comes in two parts.
00:20
The first thing is API token authentication for if you want to generate tokens for people to authenticate with your app. That's not what we're going to be doing. We're going to be using the additional SPA authentication or single page application
00:35
authentication functionality specifically to authenticate from our client. We wouldn't use API tokens to authenticate with our client. That's more for things like issuing tokens for people to send API requests. Okay, before we head over to the SPA authentication section, let's get Sanctum installed and we
00:53
can do this with a really simple PHP artisan install API command. Let's come over to our Laravel project and let's go ahead and run this command to get everything installed. Okay, so when we do install this, it's going to publish a migration for us, which we're
01:09
not technically going to need, but I'm going to go ahead and run this migration anyway, and that's going to add the personal access tokens table to our database. Again, that is for the API token functionality, which we're not going to need. We also don't need to add the has API tokens trait to our model because once again, we're
01:30
just using the SPA authentication functionality. Okay, so now that's installed, let's head over to the SPA authentication section and have a look at what we need to do. So the first thing is configuring out first party domains.
01:45
Let's head over to the Sanctum configuration just to see what we have here. So let's open up this config file and let's have a look here. So these are our stateful domains. So this gives us some sensible defaults by default, but we know that we are working with
02:02
a slightly different domain, that is the domain that we opened up earlier. So we're going to go ahead and take this environment variable, head over to our EMV file, and just down the bottom somewhere or anywhere else that makes sense, we're going to go ahead and add in this domain.
02:17
So we know that this is Laravel Sanctum view API, and that's .test, and we could even give the port name as well. So let's say 5173. Okay, so we have configured that domain and that's now going to be included in that list
02:32
of stateful domains that are allowed. Next up, we're going to go ahead and add in the Sanctum middleware. This basically enables the cookies that we have in the single page application to interact with our session cookies within our API.
02:49
So let's head over and add these in. To do this, we're going to head over to bootstrap and app.php, and we're going to go down to our with middleware section, and we're just going to basically add this middleware in and that step is done.
03:03
So next up is probably the most tricky and we might run into some issues later, we might need to update our configuration, but we need to configure cores and cookies. So to do this, we're going to go and first of all, publish the cores configuration file. Let's go ahead and do that now.
03:19
And before we go anywhere, let's go ahead and open this up and see what this looks like. Okay, so in here, we need to update a couple of things. The first one is the paths that are allowed. Sanctum cross-site request forgery cookie is an endpoint that we are always going to
03:32
call before we start to send requests down to our API. Now cross-site request forgery is a method of generating a token, which means that you know that the request is coming from that person. Now we need that and that's in there by default, but we're also going to need to add some
03:48
additional endpoints in here, which will allow us to access things. Now you might be thinking, well, why would we need to do that if all API routes are allowed? Well over in our API routes file, we do have this route here, which we are going to call a little bit later to grab the user's information.
04:10
But because we're going to be combining this with Laravel Fortify, Laravel Fortify registers its login, register, and logout routes in a slightly different way. These aren't typically part of your API, although we can use them. So we're going to be adding things like login, register, and logout to this section.
04:30
We'll add these three in there for now, and then we'll come back and adjust this if we need to later. Okay, so if we come a little bit further down here, the last option here is support credentials. We want to set this to true, because we're going to be authenticating with this API.
04:46
We need to be able to send these over, and course needs to know that these credentials need to be supported. Now if we head over to the Laravel documentation again, you'll see that we need to add a couple of things to our client.
04:57
We'll get to that a little bit later when we start to build up the functionality that we need. But let's go down to the session cookie domain configuration, which is really important. So let's head over to config and session and have a look in here, and let's search
05:12
for session cookie domain. So this is defined as a session domain environment variable, so we can go ahead and have a look for this. And as you can see, by default, this is null.
05:24
We want to set this to the same domain that we're working with. So let's go ahead and say laravel-sanctum-view-api.test. Okay, so we should be just about done with installing and configuring Sanctum. Once we start to try and authenticate from the client side, we might run into issues
05:42
and we might need to come back and adjust some of our configuration. Because authenticating like this touches quite a few areas of your application, like cores, your session stuff, you might need to tweak this as you go. But we should be just about done here, and we can move on to talk about Laravel Fortify.
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!

Episode discussion

No comments, yet. Be the first!