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.
17 episodes•1 hr 1 min

Overview

Learn how to build a full authentication boilerplate with Nuxt, Sanctum and Fortify.

This course covers everything you need to get started with authentication with Nuxt and Laravel. We’ll start by setting up a Nuxt project and configuring Laravel Sanctum, then add the ability to register, sign in and sign out.

We’ll also cover some TypeScript tips, protecting pages with middleware, and using Vue composables to keep our code tidy.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!