Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
17. Registering an account

Episodes

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

Transcript

00:00
So to register an account, let's first of all go ahead and create out a new view for this. We'll go ahead and create out this view component, call it register,
00:09
but we can pretty much just copy everything we have in the login page over since it has a very similar structure and we'll be doing pretty much the same thing. OK, so now that we have got this created, let's just tidy up what we have here. We don't need errors because they are going to directly come from our request to register
00:31
and we do want a form, but we just want to add to this. So let's go ahead and add in a name that we're going to register with. And of course, we'll have an email and a password that we can choose. OK, so let's go ahead and get rid of this method here,
00:42
tidy up the template and we'll register as a route. So let's go and call this register. And all we need to do here is swap this over. But let's just, yeah, we'll go ahead and add that in there now, even if we don't have that.
00:56
And basically, we're just going to copy one of these over and add this as a name. So let's switch this over to name and we'll do the same for form name, errors name and errors name there. And we should be OK.
01:12
I would just want to change this to name this to name and we should be good. And this needs to be text. OK, I think we're just about done. Let's go ahead and register this as a route.
01:21
So once again, we'll just go ahead and copy this down and we'll call this register. Let's give that name register. And of course, we'll pull in that register component, that page. So over in the login page, let's go down to where we have that message at the bottom to register.
01:39
And let's add in a router link here, set that over to that page. And of course, we'll be able to click on that. So the name here is register and we should be good. Let's head over and try this out.
01:50
And yeah, the moment looks like we've probably done something wrong here. Let's just have a look. OK, so properties of name. Let's go up to our register page.
01:59
And yeah, I think it's due to these errors. So let's go and create out a ref in here to hold them errors. And that's just going to be an empty object. So this whole flow is pretty much going to be what you do
02:14
when you want to hit any other endpoint in your application. We're not counting registration inside of our use auth because that's solely going to be to authenticate the user. Any other requests like registering a user or
02:27
submitting any other form that does something will just be entirely separate from this. OK, let's just change this button title over quickly to register. And we'll also get rid of this or say already have an account. And we'll set this up to be a router link, of course, through to our login page.
02:49
So let's say name login and let's say sign in. OK, great. I think we're just about done here. We can click to sign in if we need to.
02:58
All right, let's go through the steps of registering an account. And like I said, this is all going to be very manual. So let's go ahead and make sure we import Axios in here. And let's go down and create out that register function.
03:12
So let's call this register. We've already got that hooked up to our form. And let's just try and send a request down and then figure out whether we need to set our cross site request for tree token here when we do this.
03:24
So let's go and post down to register. We'll pass our form in. Then we'll do something. And what we want to do here is authenticate the user and then go ahead and switch the dashboard.
03:36
Now, they'll probably technically already be authenticated because we will get that cookie back once we've registered because this whole process behind the scenes in Fortify will automatically log the user in. But we won't be authenticated on the client side because we wouldn't have attempted that
03:53
to set our state. So we'll do that in here in just a minute. Let's go ahead and just catch any errors that we've got here. And that will be our validation errors as well.
04:02
And while we're here, we'll just console log these out. OK, so what we're going to do just to make sure that this is working is come over to our application section and make sure we get rid of our cross site request for tree token specifically.
04:13
So we've got no token in here now at all. So keeping up our network tab, let's go ahead and hit register on this and see what happens. OK, so we got a 422. It looks like everything is all good.
04:25
And if we head over to our application, you can see that cross site request for tree token has been set. OK, so let's go ahead and catch these errors, first of all. So we want to basically take any errors that we get here and store them inside of here.
04:39
I'm just going to pull these together and we want to do exactly the same as we did earlier. So we're going to take the response from the error, grab the status and compare that to 422. And you can handle any other errors here if you need to.
04:53
I'm going to set the value of that ref to any of the errors that we get back. So we've already seen this before. So now that we've done that, we should be able to see some validation errors. Click register.
05:04
And yeah, there we go. The email has already been taken. Now, you'll also notice that we've got the password field confirmation does not match. I'm not going to include this.
05:13
I'm going to show you now how to change this over inside of our API. So remember a little bit earlier when we installed Fortify, this gave us these actions and this Fortify directory. The create new user action is what we want to modify.
05:27
You can see here that it contains everything you need. So if you need to change this up to include any other data, you can. Password uses this password rules method just here. And that goes ahead and just returns to us any of the rules that we need.
05:40
And this is inside of a trait. So you can see that this is open a new file here. And that trait isn't just included at the top here. So you'll just want to go into that trait, modify anything you need.
05:51
In my case, I'm going to get rid of confirmed and we should be good. So now when we register, that error goes. But of course, this email is already taken. OK, so we're going to keep the database open just to check and make sure that everything
06:02
has been created. So let's register out a new account in here and hit register. Nothing happened. Let's go up and check our network tab just to make sure.
06:12
And everything looks good. And we've got a 401 unauthorized, which should be OK. We'll deal with that in a second. So at least the user has been created.
06:21
So that's good. Let's delete that and go back. And now what we want to do is once we have registered an account, like I said, attempt authentication, which will set our state.
06:29
And then we can also redirect that user as well. OK, so to do this, let's hop back over to our client. And in here, we now want to attempt. So let's make sure we pull this in from our use auth composable, and we're going to go
06:45
ahead and attempt authentication. And once that was successful, which it should be because we've just registered an account, then we want to go ahead and redirect them somewhere. So we're going to redirect them over to the dashboard, which, remember, is not protected
07:00
at the moment. We're going to look at middleware a little bit later, but they'll be landed on their dashboard. And you can make any further request on the dashboard to show what you need.
07:09
All right, let's try this again. So once again, just because we've sent that request, I'm going to get rid of the cross site request for retoken. And let's go ahead and register an account here.
07:18
So let's switch this to Mabel. Hit register. There we go. We're logged in and we are redirected.

Episode summary

In this episode, we build out the user registration flow for the app! We start by creating a new view called Register and, since registering is quite similar in structure to logging in, we copy over much of our login page as a starting point. Then, we update the register form to add the usual fields you'd expect—name, email, and password—tidying up the template and setting up routing to make it accessible.

Next, we connect the registration route and link it from the login page, so users can easily switch between signing in and creating a new account. We handle form submission with Axios, sending the data to our back-end, dealing with potential validation errors (like duplicate emails), and making sure these display nicely for the user.

A few small bugs pop up (like errors related to missing props), but we fix those along the way. One thing we highlight: after the registration API call, Laravel Fortify usually logs in the user behind the scenes, but our client needs to update its state, so we trigger an attempt to authenticate right after sign-up. Once that's in place, the user is redirected to their dashboard if everything goes smoothly.

We also make a quick detour on how to tweak Fortify's registration logic if we want to adjust password requirements or remove the need for password confirmation.

By the end, we've got a working registration process: users can sign up, are automatically logged in, and sent to their dashboard—ready to use the app!

Episode discussion

No comments, yet. Be the first!