Nuxt 3 Authentication with Laravel Sanctum
Playing
04. Laravel Sanctum configuration

Episodes

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

Transcript

00:00
When we set up Laravel Sanctum for authentication between a single page application and our API, it's best to use the single page application mode of Sanctum.
00:10
This has multiple security benefits and also makes it a little bit easier to manage as well, rather than having lots of generated tokens hanging around. Okay. Let's go ahead and get Laravel Sanctum installed in our API project and let's
00:24
configure it, which is a really important part. Okay. We're going to go down to the SPA authentication mode. Just before we do that, let's go ahead and get this installed.
00:33
We can do that with a really simple php artisan install API command. Let's go over to our API project, open up our terminal, and let's go ahead and run this command. Once we've done that, you'll see that a database migration has been published.
00:47
We're going to go ahead and migrate this, although we don't necessarily need the access tokens because we're working with the single page application mode here. Okay. Let's go over to the single page application section of the docs and
00:59
let's go down to see what we need to do. So the first step is configuring our first party domains. Let's go ahead and find out where they live. So we're going to go over to config and Sanctum, which has been
01:09
published when we hit that command. And let's look for the stateful domain section. Now this has an EMV value that we can modify. So what this will do is it will just combine all of the sensible
01:21
defaults here that are together. So let's go over to our EMV file and we'll just put this anywhere in here. Let's put this down the bottom. Now we know that we're working on api.test.
01:31
So we're going to use this and we're going to use the port here as well. So that's the first step. Next up is adding the Sanctum middleware. So we're going to take this stateful API middleware, and we're going to add this
01:43
over to the bootstrap app file within our Laravel project. So let's go down to where we have our with middleware and our callback, and let's go ahead and add that in there next. Okay.
01:53
So next up are cross-origin resource sharing and cookies. This is incredibly important. The majority of errors that you'll get when you're trying to authenticate with an API come from cause errors.
02:05
Let's go ahead and publish the cause configuration file. So let's grab this command and go ahead and paste this in. And let's take a look at the cause configuration file. Now it's published and see what we need to do.
02:16
Okay. So the first thing, the really important part about this is the paths. Anytime we make a request to our API, we're going to need to add a path in here. We're going to be using Laravel Fortify for authentication since this gives us all
02:30
of the login register functionality, the ability to update profile information. So what we're going to need to do in here is as we go, add in any of the paths that Laravel Fortify registers. I'll go ahead and put login in there for now, cause we're going to look at that
02:45
shortly, but we'll come back to this later and add any more. Okay. So the next part of this is supports credentials. We need to enable this.
02:54
Okay. So let's go and have a look at what else we need to do here. We're not going to be using Axios, so we don't need to worry about setting with credentials to true or setting the cross-site request forgery token value
03:05
to true, so we don't need to do anything there. The next most important step is setting our domain for our sessions. So let's head over to EMV and let's search for session domain. You can see that at the moment, this is set to null.
03:19
Now we're working with just the same domain for each of the API and the client, so we can just comfortably set this to api.test. If you're working with subdomains, you're going to need to add a dot just before what you've done here.
03:32
And that will allow that for subdomains too. Let's just keep that at api.test for now. Okay. So we don't need to do anything else here.
03:40
We might need to come back a little bit later to tweak any of the settings, but our configuration on the backend is pretty much ready to go. We can start to try to send requests from our client down to our backend and see what happens.

Episode summary

In this episode, we walk through getting Laravel Sanctum set up and configured for authenticating a single-page application (SPA) with your Laravel API. We talk about why Sanctum's SPA mode is usually the best choice—it's more secure and keeps things simple, since we don't have to mess with tons of API tokens.

We start by installing Sanctum into our API project using the php artisan install api command, which publishes the necessary files and migrations. Even though SPA auth doesn't really use personal access tokens, we still run the migration just to keep things tidy.

Next, we go through the Sanctum config, paying special attention to the stateful domains section. This involves tweaking the .env file to specify which domains are considered first-party (usually your API's and client's domains). We also set up Sanctum's middleware in the app's bootstrap file so it gets applied to our requests the right way.

After that, we set up CORS (Cross-Origin Resource Sharing), since a lot of API auth headaches are caused by missing or misconfigured CORS settings. We publish the CORS config, update its paths to include authentication endpoints like /login, and flip the supports_credentials option to true so cookies work across origins. We leave a note to add more paths later if we use other Fortify endpoints.

Finally, we confirm that our session domain is set up right in .env, making sure cookies are scoped to the right domain, whether it's just api.test or something with subdomains. With all this set up, our backend is ready for Laravel Sanctum authentication, and we're basically set to start sending requests and watching the magic happen!

Episode discussion

No comments, yet. Be the first!