Nuxt 3 Authentication with Laravel Sanctum
This episode is for members only

Sign up to access "Nuxt 3 Authentication with Laravel Sanctum" right now.

Get started
Already a member? Sign in to continue
Playing
05. Installing the Nuxt Laravel Sanctum package

Episodes

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

Transcript

00:00
We have quite a few options when it comes to Nuxt authentication.
00:03
And there are a lot of packages that will integrate with OAuth and any other providers. What we want to do though, is pull in a package specifically for Laravel Sanctum. That is Nuxt Laravel Sanctum Auth. Okay.
00:16
We're going to get this installed, do a little bit of configuration. And then in the next episode, we're going to send a test request down to make sure everything is working. Okay.
00:26
So let's go over to the installation section here and let's go ahead and use this command to install this. So again, we're working in our client now. Let's go ahead and pull this in.
00:35
Okay. So once we've done that, this is going to add this to our Nuxt config. If we just wait a couple of seconds, we should see this added as a module. So now this is installed.
00:46
There's nothing really much else we want to do. One thing that we do want to do in here is start to configure this out. And the most important is the base URL. So inside of our Nuxt config, we're going to use the Sanctum option, and we're
00:59
going to set in a base URL here. We know what this is already. It's http://api.test. That is our API endpoint.
01:09
Now we can configure the routes that we send down to. We're not going to do that because these are predetermined if we're using Laravel Fortify. But we can provide a bunch of other options in here, and all of
01:21
them are in the documentation. For example, we're going to be adding some redirect options in here. So for example, on login, we want to go over to the dashboard page within our Nuxt app.
01:34
And we don't have that at the moment. So let's go ahead and get rid of that. And we'll configure that as we get to each step. Now, the package that we have pulled in here has a bunch of
01:42
composables that we can use. Let's just take a look at what that looks like. So let's bring out a script set up here with a lang of TypeScript. And let's come down and have a quick sneak peek at what this looks like.
01:54
So we can extract out a bunch of methods from the useSanctumAuth composable, and let's just get rid of that import to do stuff. So for example, if there was a form on this page, we'd be able to submit login. That would go ahead and send a request down to the login endpoint, and we'd be
02:13
able to handle what happened after this. So that's pretty much what we're going to be doing for the rest of the course. Let's get rid of this from here and let's go and look at sending our first request in the next episode.

Episode summary

In this episode, we dive into setting up authentication for our Nuxt app using Laravel Sanctum! There are tons of Nuxt auth solutions out there, but we're focusing on a package designed just for working with Laravel Sanctum: nuxt-laravel-sanctum-auth.

First, we walk through installing the package in our Nuxt (client) project. Once that's done, it gets added as a module in our nuxt.config. The most important setup here is telling our app where our API lives (the base URL). We set this to http://api.test (which should be your Laravel backend running locally).

There's also some mention of extra config options, like customizing redirect routes for things like login, which we can adjust as we build more features. For now, we keep it simple and lean on saner defaults since we're using Laravel Fortify on the backend.

To wrap up, we take a quick look at what the package gives us: a set of handy composables (like useSanctumAuth) that make it easy to wire up login forms and other authentication features without writing them from scratch.

In the next episode, we'll test our setup by sending our first authentication request. Stay tuned!

Episode discussion

No comments, yet. Be the first!