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
06. Making the first request

Episodes

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

Transcript

00:00
So the moment of truth, let's go ahead and create out a login page and send a really simple request down to our back end. OK, so within Nuxt, let's go and create our directory called pages. And inside of here, I'm going to create another directory called Auth.
00:15
And then inside of here, let's create out a view component called login. So here is where we're going to build out our form and go ahead and try to send a request down with the package we've just pulled in. Let's go ahead and build a form out in here. The action we can get rid of.
00:33
Let's go ahead and hook this up. So when we submit this, we call a submit method. In here, I'm just going to add in some input field. So let's add a type of email in here with an ID and a name of email.
00:46
And let's do the same thing for the password as well. Let's change all of these over to password. And then we'll just add a simple button in here to say sign in. OK, so let's go and create this method out.
00:58
So let's call this submit. And let's try and send a request down. So remember, from when we installed this, we can go ahead and extract out functionality like login directly from this package. So this is use sanctum auth.
01:13
And that gives us that login method. Again, let's get rid of that import. OK, so in here, we need this to be async. And then we're going to wait on logging in.
01:22
And login needs to take in all of the credentials that we want to pass down. So we'll need to map these up really quickly with a reactive object. So let's go ahead and create out a form here. And let's make this reactive.
01:36
And then inside of here, we'll go ahead and provide in a pre-written email address and password just to save us a little bit of time. So I'm just going to set that as my email address and password. So now we can just pass that entire form down into login. Let's fix this up quickly because async needs to be over there.
01:55
And we should be good. OK, so at the moment, we don't have these hooked up as a theme model. So let's go ahead and do that. Form email.
02:05
And let's hook that up to form and password. OK, if we head over to the browser, we get a 404 not found at the moment. Just because over in app.view, we need to create out a next page component to render out any of the pages we've created. Once we've done that, we should be able to access our auth login page.
02:21
And we'll create our homepage in just a moment. OK, let's bring up our network tab here. And let's filter by Vetch XHR and try and send this request down. The goal at the moment isn't actually to log us in.
02:33
It's just to make sure that we don't see any cause errors or anything else. Let's go ahead and hit sign in and see what happens. OK, so I forgot to add a prevent on there. Let's go back over to login and make sure we prevent that.
02:45
And let's try that again. OK, let's hit sign in and we get a 404. That's absolutely fine because we know that now cause is working. We're sending a request down to a login page and everything looks good.
02:58
Let's just go over to our API app and just create out a really quick login route just before we go ahead and get Fortify installed. Let's go ahead and just copy this one down and we'll set that as login. And let's make this post because by default that will be a post request. Let's go back over to our project and try this again.
03:18
And there we go. Sure enough, we get a 200 OK. Don't worry too much about this error. It's just because the user can't be fetched because this isn't a real login page.
03:27
But as long as you're at the stage where you can post down to this and get a 200 status, it means that you've configured Laravel Sanctum properly. OK, let's do some tidying up here. I'm going to get rid of this in the query string from before.
03:39
And let's go ahead and create out a really simple homepage in here. So under pages, we'll create out another view component called index. And this will be our homepage. OK, let's get rid of this and let's just put home in there.
03:53
OK, great. So we now have our homepage working. We have a login page working, which we know we can now send requests down to. Let's do a little bit of structuring of our Nuxt application and then we can start to build out this login page for real.
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!