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
14. Registering an account

Episodes

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

Transcript

00:00
The sanctum-auth package that we've pulled in doesn't give the functionality to register an account. We're going to have to do this manually. What we're also going to talk about is what's actually going on behind the scenes
00:12
when this package sends a request down to our backend. And we'll take a look at the documentation in just a moment to see what we need to do. Okay, so let's go over and create out this register page first of all. So let's go over to our auth section here,
00:27
create our new view component called register, and we're pretty much just going to copy the entire login page over to this and just do some tidying up. Okay, so let's start with our template.
00:38
To register an account, we're going to need a name as well. So let's go ahead and change all of these over to name. And let's switch the label to name as well. Okay, so most of this we're not going to need.
00:52
The middleware can stay. We aren't going to be able to use this functionality. We are going to have a form, which is going to be slightly different. We'll build that out in a second.
01:02
And when we submit this, we're not quite sure what we're going to do at the moment. Okay, so let's build this form out here. We'll go over to our TypeScript interfaces, and let's define this register format. This is going to need a name, which is going to be a string,
01:18
and we can just switch that over in here. So switch that to register form, and we'll include a name just in there as well. Okay, so our register page should be looking good. Let's add this to our navigation first of all.
01:30
So remember, if the user is not authenticated, we're going to have a create an account link that goes through to register. Okay, let's sign out, and let's go ahead and click create an account. And there we go.
01:45
So something's gone wrong here at the moment. Let's go over to our form, and yeah, type of name. That needs to be type of text. Okay, so when we send a request down to any other endpoint within Fortify,
01:59
not our API routes, because if we remember over in our cause configuration, all of our API routes are already included. What we're going to need to do is manually send a request down. We'll add this register to our paths now.
02:15
Let's take a look at how we would traditionally do this within Nuxt, and then we'll talk about the problem, and we'll refer to the documentation to see this. Okay, so what we can do in here is go ahead and use fetch
02:28
to send a manual request down to register, since this package doesn't contain a register method. What we can then do is pass in the method that we want to use, which is going to be post, and we can pass the body down here,
02:40
which is going to be the form. So this is just how we would send a normal API request using Nuxt. Let's go over and submit this and keep an eye on our network tab and just see what happens.
02:51
So let's change the label here as well. Let's just go and change that to create an account, and let's head over and try this out. Okay, so when we hit register, we get a 404.
03:04
That's to be expected because we don't have our full path in there. Let's just define it out in here manually, and then we'll look at a better way to do this in a bit. So there's api.test.register.
03:15
Okay, let's try this one more time, and now we get a cross-site request forgery token mismatch. So what's actually happening behind the scenes of this package is it's doing exactly what the Laravel documentation tells us to do.
03:29
It tells us to send a request down to sanctum cross-site request forgery cookie, which will fetch out the cross-site request forgery token, store it in a cookie on the client side, and then send this down with every subsequent request.
03:42
That's why usually when we use the with cross-site request forgery token option with Axios, this will get sent down for us. Now, because we're using this package, we don't have any registration functionality.
03:55
We can't use useFetch without wrapping this in a request to get the cross-site request forgery cookie. What do we do? Well, actually, there's a much better way to do this,
04:06
and that is using another composable from this package. Let's go ahead and see how this works. So we're going to pull in, and let's call this sanctumFetch, and this is a composable from this package called useSanctumClient.
04:21
What this will do is it will work exactly like useFetch, but now when we switch this over to sanctumFetch, inside of here, what will happen is it will always request or check that cross-site request forgery cookie for us.
04:37
So just by switching this over, we should now see this work. Let's try this out. So let's give the page a refresh and clear out our network, click on this, and yeah, it's worked,
04:48
but of course we get a 422 because the details we've provided here have already been taken. So for any of your endpoints that exist within Fortify's web routes, always use this composable, useSanctumClient, to send a request down. Once you start to build out your application further
05:07
and you want to send requests to our API endpoints, you won't need to use this because your API endpoints are excluded from cross-site request forgery protection. Okay, so now we've seen an example of how this works.
05:19
We know it is working. Let's tidy this up a little bit because ideally we want our own composable to house all of these custom requests that we're sending down to our back end that are specifically for Fortify.

Episode summary

In this episode, we're tackling user registration since the sanctum-auth package we pulled in doesn't include out-of-the-box functionality for creating accounts. We'll build out a basic register page ourselves and, along the way, dive a little into what's happening under the hood when the package hits our backend.

We'll start by copying the login page over to create a new register view, updating it to include a name field (since we need name, email, and password for registration). After wiring up the form and the TypeScript interfaces, we'll add a "Create an account" link to our navigation for users who aren't logged in.

Next, we'll try setting up a traditional fetch request to register a new user, but we'll immediately run into issues — like CSRF (Cross-Site Request Forgery) token mismatches. We'll take a quick look at the Laravel documentation to understand why that's happening, then demo the correct approach: using another composable from the sanctum-auth package called useSanctumClient. This function works like useFetch, but handles the CSRF token for us automatically, making sure our requests go through without a hitch.

Lastly, we see that registration now works (except for duplicate users) and talk about when you need to use this special fetch method (for Fortify routes with CSRF protection) versus standard API routes. We finish the episode by tidying up and planning to organize our custom requests into their own composable for a cleaner and more maintainable codebase.

By the end of this video, you'll have a working registration form, understand CSRF token flow with Laravel Sanctum, and know how to handle protected endpoints properly in your Nuxt app.

Episode discussion

No comments, yet. Be the first!