uses Laravel Sanctum with a Nuxt project using the nuxt-auth package. Now, this is an updated version, because previously, there wasn't a specific Laravel Sanctum provider.

The version that we're going to be pulling in is version 5, which is currently in development. But we can actually use this now. So previously, we had to do a few workarounds.

Things didn't really quite work as we wanted them to. But this is a much better solution. So we're going to take this in two steps. The first step is going to be getting the API set up,

getting Laravel Sanctum pulled in. We're going to start completely from scratch. Then we'll build our Nuxt app, and we'll look at how we can authenticate.

So the first step, then, is just an empty directory where we can put both our API and our client. Let's start by just building a new Laravel project. And I'm just going to call this API.

OK, so that's pulled in. Let's go into the API directory. And for the purpose of this course, we're just going to run phpArtisanServe locally.

The reason that we're running on localhost here rather than using something like Valet or Homestead is there's a little bit of extra config that we need to set up for that.

But for now, if you are following this and just want to get this set up so you know what to do, just use phpArtisanServe. Nothing wrong with doing that while we're testing this out.

OK, so let's go back into the Nuxt Sanctum directory and back into API. And let's get our migrations set up. So over in EMV, let's just switch over my database here.

I'm using Postgres. And let's switch the database over, which I've already created. That's just called Nuxt Sanctum.

I have the username. For me, it's just Alex Garrett-Smith. And the password is empty. So we can come over now and just run phpArtisanMigrate

just to get the default migrations created, which will, of course, look like this. OK, so next step, I just want to create out a user. So I'm going to use Tynker here.

Of course, you can use Tynker well if you have that app installed. I'm going to go into Models and User and just create out a new user here just to test this out with.

So the name here is just set to Alex. And of course, the email address and finally, the password, which by default is the plain text string password.

But let's go ahead and just make sure with bcrypt. Great, so that is now the user in the database that we can use to authenticate over on our client. OK, so next step is just get Laravel Sanctum installed

and configured. And then we can move over to Nuxt. So let's just go over to the documentation just to follow each of the steps.

Of course, we want to require this in with Composer, first of all. Publish the config and the migrations. We're not looking at API token authentication here.

But we'll go ahead and run phpArtisanMigrate anyway just so they're created in there if we need them later. OK, so the next thing that we need to do is just come over to our app.

And let's go over to config and cause. And let's come down. Now, we've already got Sanctum cross-site request forgery cookie in here.

We're going to be creating out an example API endpoint to log in. So we don't actually need to add any more paths to this. But if you're using something like Laravel UI

or similar behind the scenes, you'll want to add in the login routes to the paths here. But the most important here is to set supports credentials to true.

Next thing we want to do is come over to config and session. And if we come all the way down here, we want to set the session domain to local host. So let's go to EMV.

And let's just maybe add that under session lifetime. That's the local host. And then if we open up config and Sanctum, we want the Sanctum stateful domains to match our client.

So again, over to EMV, let's just put this down the bottom here. Let's set that to local host and 3,000. That's going to be the domain and port we're

going to be running for our Nuxt client. That's really important, or authentication just won't work. The last thing we want to do is over in routes and API, before we forget, just make sure that we switch this out.

This is the endpoint that we're going to be using once we do successfully sign in to authenticate. So let's go ahead and create this as auth Sanctum,

using Sanctum instead of the standard. OK, so when we actually sign in to our application, we need a controller or just a route that actually authenticates us.

So let's just create this out now really, really simply. So let's go and create out a controller. And let's put this in auth. And let's just call this the login controller.

Of course, like I said, if you're using something like Laravel UI or Breeze, this is going to be slightly different. But I'm going to create this out myself now,

just to kind of keep this really simple. So let's just make this invocable, because we don't really need a method in here. And let's, of course, take the request information

in so we can authenticate the user. It's just going to be the exact same way we'd normally do it with auth attempt, passing in just the credentials that we get from the client, which

are going to be the email address and the password. Now, I'm just going to quickly wrap this, because if we get failed authentication, we need to tell the user or handle this on our client

somehow. So I'm just going to throw a authentication exception inside of here. That might not be the right thing to do.

But let's just do that, just at least so we know the email address and password have not been accepted. And I think we'll just leave it at that.

Let's register this out in Roots and API. So let's create this out as just login. Doesn't really matter what we do here for now. And let's reference that login controller

that we just created. So we can hit this endpoint, which we'll need to configure within Nuxt auth. And that should work.

Great, so that's pretty much our API setup. We might need to come back to it a little bit later if something else goes wrong. But let's go into the base Nuxt Sanctum directory.

And let's use NPM to create a new Nuxt app. It doesn't matter how you create this. But let's just go ahead and call this client. OK, so let's just follow this through.

And we'll use JavaScript here. NPM is our package manager. I'm going to pull in Tailwind CSS, because that's what I would normally do.

We want to put in Axios as well. We can install that later, but it makes sense just to pull it in as part of the installation progress.

We won't use any linting tools for now. We won't use any testing. And we'll set this to universal SSR and no JS hosting. And we'll pull in jsconfig.json.

And I'm just going to ignore the GitHub stuff for now, the Git stuff for now. So let's just wait for this to install. We'll run it, and then we'll start with pulling in Nuxt auth.

OK, that's done. Let's go into that client directory. Let's run npm run dev as we normally would. And we can come over to the browser

now and open this up to see our new project. So that's just localhost and 3,000. And we should see that building. OK, that's it.

So let's go to the Nuxt auth documentation and just go through the kind of normal installation process for this. Now, like I said, we're using version 5 here,

which will give us that Laravel Sanctum provider. So we want to make sure we do an npm install with a save exact on Nuxt.js and auth next. So this is the kind of next version of this.

And let's just open up a new tab here in client and pull that in. Now, we don't need to pull Axios in because we've already got that as part of the original or the initial Nuxt build.

But we do need to go ahead and put in the auth next inside of our nuxt.config.js file. So let's come all the way down. See, we've already got Axios in there.

Let's pull that in as well. Now, the great difference between this version and the last version is over in our store, we don't actually now need to create an index.js file.

Previously, this would kind of kill the installation or the build process. We don't need to do that anymore. So that's a really nice improvement on version 5

to start with. OK, so we've got, of course, some auth options that we can provide. We are going to be doing that.

So let's go down just underneath here and provide them out for now just empty, just to get us started. And let's just kind of think about our login page.

So let's go over and create out a new page within Nuxt. Let's just call this login.view. And let's just start to build this out as we normally would. OK, so for now, I'm going to keep this really simple.

I'm just going to create an anchor called login. I'm not going to create fields or anything like that. We'll just keep this really simple and have this invoke a method.

So let's create out a method in here just called login. And let's just log on that just to make sure that's working. And let's go and just do a click prevent on this. So we'll just hard code the details for now.

And then you can fill this out with the UI that you want. OK, let's go over to slash login. There is our login page. Obviously, let's bring up our console

just to make sure that this is clicking through. And sure enough, it is. Great. OK, so now we really just want to configure this

to point to our Laravel API. So let's say strategies in here. And we'll configure the Laravel Sanctum strategy. And let's set the provider to Laravel slash Sanctum.

So this is the name that we'll reference when we actually get to logging in. And we just need to provide the URL to our application, which we know is just HTTP local host and port 8000

since we're running this locally. Now, I don't know what's happened here. Let's just rerun this and come over. Now, we know that this is running on local host.

Our server for our API is also running on local host. So both of the domains match. And we set the Sanctum stateful domains to local host 3000. And we also configured this so local host

was our session domain as well. So let's just remind ourselves just so we don't get kind of too caught up in this. So Sanctum stateful domains is local host 3000.

And our session domain is local host as well. So that will enable this to work really nicely. Now, the good news is that's pretty much all of the configuration we really need to do.

We can actually just start the login process now and just see this hit our API. So inside of login, let's go ahead and reference the auth module.

Login with, so we can specify Laravel Sanctum. And of course, you can call that whatever you want. And then we just want to pass the data down. So I'm just going to pass in the data

that we added in Tynker earlier. So that's my email address and my password. That's just the plain text password. So let's go over, open our network tab

and keep an eye on this. So let's hit this. And it looks like that completely failed. So let's just make sure this is running.

And let's try that again. And there we go, great. So this looks like it's actually working now. We get a 204 back from cross-site request for tree cookie.

That setting, if we head over to application, the cross-site request for tree token in here, we can kind of get rid of all of these and just verify that that is pulling everything in.

You can see that's working, including our Laravel session. This is failing at the moment. So if we go over, we don't actually have a login page.

It's API slash login. So this is the point where you might want to start to customize this over in nuxt.config.js. So in our case, what we want to do is also specify

the end points that we want to use. This is pretty similar to past versions. So for example, we can say for the login end point, we want to hit this URL.

Now the URL that we give is just relative to the URL we've provided in here. So we don't need to give the full path. We just need to say API slash login.

You can also choose the method as well. So if for whatever reason you're using a get to log in, you can do that as well. Now the default for getting the user's information,

which is under the user key, is exactly what we have at the moment. So we can kind of leave that one out, but we'll take a look at that in a minute.

So we've set the URL. Let's go back over to the browser and try this out again. Let's hit login. And there we go.

Now at the moment, it looks like we've got a 405 method not allowed. So let's come over to our API routes. And of course, make sure we change that to post.

Come back over and try this again. And okay, so we got a 401 here, unauthorized. Now that means that of course, my email and my password are not correct.

Let's just double check my email. My password should be fine. Let's just check our login controller. I think I know what I've done.

Yeah, so the point of this check would be to say, if this does not work, you probably notice that if you are watching along. So let's try this one more time.

Third time lucky. We should get a 200 back for this, which is great. So now we are successfully kind of authenticating with this endpoint.

Now user at the moment, we're still getting a 401 unauthorized. I think that is because, well, I know that's because we've forgotten a vital step

in actually setting this up. Let's go over to kernel. And for our API routes, we want to bring in the insure.

I think it's front end requests are stateful middleware. So let's bring that in and it should be, yeah. So that looks like, yeah. So that's from the Laravel Sanctum package.

That's really important to actually make sure that we can actually send these cookies down and be authenticated. So let's just clear out our network here

and let's go back over to the network tab and hit login. And sure enough, as well as logging in successfully, we're now getting back my user's information. And now technically within our app,

if we just give this a refresh and keep an eye on network, we are now signed in. So of course, now that you have everything set up, you can just start to build this out as you want.

So for example, we could come over to the base layout. So let's come over to our layouts and default. I'm gonna get rid of all these styles. We could have something in the navigation now to say,

if auth logged in, and then if we are signed in from the auth package, we can grab the user and the user's name. Let's try that out.

And there we go. Sure enough, there's my name. And you can log out. You can do pretty much whatever you want now.

So that is the new Laravel Sanctum provider from NuxtAuth, which makes things a lot easier. If this is your first time pulling this in and getting this set up with a Laravel API,

some things can get a little bit tricky. You might find yourself having to configure things in a slightly different way, but that is the basics of getting this set up.