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.

Episode summary

In this episode, we walk through installing Laravel Sanctum and setting it up for use with a single-page application (SPA). We start by consulting the Sanctum documentation, making sure we're following the latest recommended steps. The video explains the two main use cases for Sanctum—API token authentication and SPA authentication—and we're specifically setting things up for SPA authentication.

We run the Sanctum installation command, migrate the database (even though the personal access tokens table isn't needed in our scenario), and skip adding the API tokens trait to our model, since that's not relevant to SPA auth.

Next, we configure the stateful domains so our frontend can communicate with the backend securely. We update our .env and Sanctum config files to include the correct domain (with the right port if needed), and talk about why certain domains need to be listed as “stateful.”

Then we add the Sanctum middleware to make sure cookies are handled correctly between our client app and API. We dig into the CORS configuration, ensuring our SPA and API can talk to each other and that the right endpoints (including those Fortify will add later, like login and register) are whitelisted.

The episode wraps up with adjusting session cookie domain settings to match our configuration, making sure everything lines up for authentication to work smoothly. We mention some common troubleshooting steps, since getting SPA authentication working with Sanctum can sometimes require tweaking these settings later. Once everything’s in place, we're ready to move on to integrating Laravel Fortify in the next episode!

Episode discussion

No comments, yet. Be the first!