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
15. Moving over to a composable

Episodes

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

Transcript

00:00
Now we know how to send data down like this with the cross-site request forgery cookie enabled,
00:05
let's go ahead and create out our own composable to house all of that additional functionality not provided by this package. Let's go ahead and create a directory called composables, and in here we'll create out a TypeScript file called use-auth. This will be our own composable which will expose things like the ability to register, update our profile details,
00:27
and all of that stuff. Okay so in here we're going to expose this use-auth composable, and in here what we can essentially do is define out any of the methods that we want like the ability to register. So let's go ahead and do that now and just console log and say register just so we know that this is hooked up and then we'll move everything over. So over in our register
00:50
page what we're now going to do rather than do all of this stuff in here instead we're just going to pull out our own composable. This will be automatically registered with NUX so we don't need to import this. Okay so down here we're going to go ahead and invoke register and let's wait on that even though it doesn't return a promise at the moment and just check what happens. Okay so
01:12
yeah let's just have a look here we actually need to export this so let's make sure we return that register function from our composable so we can use it. Okay open up the console and let's hit create an account and there we go that is now moved over to our own composable. So I'm going to go ahead and pull this over to here we'll go ahead and make sure we pull in sanctum fetch at the top
01:36
like we did earlier. We'll actually need to do this directly within the composable so let's go ahead and say sanctum fetch and again use that sanctum client and the credentials that we want to pass down or the form that we want to pass down is going to be our register form so we can type in that in there as well and we can pass that form down. So now that we've done this we can now go
01:59
over to register and we can pass in the form directly into this register function that's going to take the form we know it's a register form and it's going to pass it down as normal. What we can then do is return this so we can fetch any errors out of it later. Okay let's try this out and make sure it's actually working. I'm going to come over and delete the user that I have in
02:18
the database here and let's try and register an account and see what happens to this state of our app as well. So let's go ahead and pull the console down just in case and hit create an account. Okay so we've got an error here let's just have a look we've got a 422. I have a feeling if we just check out our network tab we have a password confirmation field. We can customize that over
02:40
in our API by heading over to the password validation rules section under the fortify directory that gets created over in our app. That'll be under app and actions and fortify. So if you open up this file you can go ahead and just customize any of these rules. Okay now that we've done that let's try that again and see what happens. Okay I'm going to pull this
03:00
down hit create an account and that should have worked great so we are now registered. Let's just give this page a refresh and you can see that automatically we're signed in because the session has now been set when we register an account this has gone ahead and registered us. Now there's one problem of course what we need to do is once we do click that
03:21
register and everything was successful we want to redirect or refresh the user. Let's head back over to our client and see what we can do directly after we do this over in our register page just here. Once we've done this we essentially want to refresh the user and refetch them out and then we want to redirect somewhere since this is our own custom functionality and we can't configure it.
03:46
The first step is looking at how we refresh this user. Once again what we can do is pull in a composable from the package that we've pulled in and this will allow us to refresh the identity. So let's go ahead and pull in refresh identity and that is from the usanctimorph composable which we've already seen and let's pull in the right one and we should be good again get rid
04:10
of this import at the top. So now we can immediately invoke this and this will send a request to fetch any of the user's details. So as soon as we've registered we want to refresh the identity that will take the API request data that we are returning from our API and it will hydrate whatever state we have. Okay let's go over and try this out so I'm going to go ahead and sign out
04:33
head over to the database and just delete this user and let's go over and try this again. Okay so let's create an account here and I'll get rid of the dev tools so we can see this. Let's hit create an account and there we go you can see sure enough the state has now been updated because what's happened is that refresh identity will have sent a network request down to refresh
04:54
that data. The last thing we want to do is just redirect the user which we already know how to do so we're going to go ahead and use navigate to and we can just navigate anywhere in our application. Let's just say that we want to go over to the dashboard as soon as the user is registered. Okay let's try this one more time and we should be good. So let's go over and let's create an
05:14
account. Now this hasn't worked at this point purely because we deleted the user in the database this would have signed the user out but it wouldn't have updated it on the client side so if you do come across this error I'm pretty glad this came up you want to just manually get rid of the laravel session in your network tab. Okay let's give that a refresh hit create an account and you
05:34
can see we are of course refreshed we're getting back the user details and we are now redirected over to the dashboard. Just before we go there's one more thing that we want to do over in our composable and that is just get rid of the base path here because we're using that sanctum fetch functionality this will automatically use the base url for us so we can just exclude that altogether
05:55
saves us having to either hard code that or manually put in any config. Okay let's try this out just one more time get rid of the user in the database come over and make sure our network sessions are clear and let's try this one more time. Okay so create an account and you can see sure enough it still worked.

Episode summary

In this episode, we're taking the registration logic out of our page components and moving it into its own composable to keep things organized and easier to maintain. First, we create a new composables directory and set up a use-auth.ts file, which is going to hold all of our authentication-related methods and logic that aren't already handled by the package we're using.

We start simple by defining a register method in our new composable, hook it up to the registration page, and make sure everything is connected by logging to the console. Once that's working, we move the real registration logic over, making use of our existing sanctumFetch function, and pass the registration form data to it.

Along the way, we debug a validation error (that 422 status!) and show how you can tweak the API validation rules if needed. After getting registration working, we make sure that when a user registers, their authenticated state is updated right away. For that, we bring in a function to refresh the user identity and call it after a successful registration.

Finally, we add a redirect to the dashboard after registration, do some cleanup, and check for any lingering sessions that might mess with our workflow. We end with everything buttoned up: registration is handled in a reusable composable, the user gets signed in and redirected, and our codebase is a lot tidier!

Episode discussion

No comments, yet. Be the first!