Registering users: Build a Starter Kit With Inertia and Fortify

00:05

just start to implement our features. And we're going to start out with authentication. Kind of makes sense. We need to be able to create an account,

00:13

log in, see the user, so we can build the rest of the pages out. So let's start with create an account, which, obviously, we already have our modal for, which

00:21

we did in the last episode. So let's head over to that register modal and just start to scaffold out a really basic page here. So of course, we're going to have a form in here, which

00:31

is going to submit through. We're not actually going to be submitting this form, of course, because we're working with Vue. Let's just build out a couple of things that we need in here.

00:39

So let's start with the title, create an account. And let's go ahead and add some styles to this really quickly. So we'll go ahead and send the text here. We'll make this 2XL.

00:48

And let's go ahead and make this bold. We'll carry on that font mono theme, and we'll set the text to a gray 900. OK, so let's open up our register page,

01:00

and there it is. That is our create an account header. So just down here, let's go and, in fact, we'll put this header just outside the form.

01:10

And then inside the form, we'll start to create out some containers for each of the inputs. So we'll set a margin on the top of 6 here, and we'll space all of our inputs out with 6.

01:21

So we're going to do this all manually. We can create out Vue components to house all of these, but I'm just going to put these in here and do a lot of copying and pasting

01:28

just so we can get this working. So for registering, we need a name. So let's go ahead and add in the name field here, and let's apply some styles to this.

01:38

So we'll set the text to small. We'll set a font of medium, and we'll set the text to gray 900. And then, of course, we're going to have our input type of text down here.

01:49

We don't need a name for this. We'll hook this up with the ID, and then we'll just start to style this out. So at the moment, it's looking not great.

01:58

OK, so we'll set a width to full here. We'll set padding on the y-axis to 2. We'll set the text to gray 900. We'll set a border to a gray 300,

02:09

and we'll set the text to small as well. So that looks like this, so a little bit better here. OK, so we're going to include some errors here as well. I'm going to do this all now, and then we can just

02:18

copy and paste everything over. So this will be the longest part of building up these forms. So we'll set a margin on the top here of 2, and then under here can be our errors.

02:28

So let's just say this is an error, and then in here, let's style this up. So this is going to be a text of small, text red 500, and a margin on the top of 2.

02:40

So that's basically what each of our form fields are going to look like. Now we can just pretty much just copy and paste this entire thing down, and we should be good to go.

02:47

Now, of course, we don't have any errors at the moment. We don't really know where they're coming from just yet. OK, so let's copy and paste this down. So we've got a name to register.

02:55

We've got an email address, so let's swap that over for email, and let's do the same thing for our password as well. So password and password, and we need a password confirmation as well.

03:10

So let's just copy this one down and say confirm password, and this is password underscore confirmation, and we'll talk about that in just a second. In fact, let's look at that now.

03:22

So we know that when we installed Fortify, we have these actions. If you need help while you're implementing these features, you just go over to the validation rules

03:31

so you can see what this requires. Now, email has a password, sorry, has the specific password rules which come through from this trait, which

03:40

also exists within your project as well, so you can modify this. So you can see that this needs to be confirmed. So you could get rid of that if you didn't

03:47

want a password confirmation, but with Laravel, the convention is that whatever the field is called that needs to be confirmed has a underscore confirmation as the name.

03:57

So that's why we've named that password underscore confirmation just in here. OK, so now that we've got all of these fields on the page, let's finish up with a button really quickly just down here,

04:07

and then we can start to submit this through. Let's create a button with a type of submit in here, and let's call this create an account, and let's add some styles really quickly to this.

04:17

And again, once we finish styling this, we can use this everywhere. So flex width full, and we'll say justify center, and we'll set the background to blue 500,

04:28

give it some padding on the x-axis, give it a little less padding on the y-axis. We'll set the text to small again. We'll set the font to semi-bold, text to white,

04:38

and that should be just about it. There we go, really simple button. OK, so with this, let's go and just start to submit this through.

04:47

We'll open up our network tab, and we'll check what's happening. So we'll go ahead and create a form, and we can do this using the use form directive from Inertia.

04:56

So let's import this from Inertia at view 3, and all this allows us to do is build up a form in here with some default values if you've not worked with Inertia before or if you're fairly new.

05:07

So we know that to register a user, we need a name, we need an email address, we need a password, and we need a password confirmation. So all of these we can now hook up with vModel.

05:20

So for all of our inputs, we're just going to say vModel and form, because that's what we called it up there, and name. And we can just do the same thing for each of our inputs.

05:32

So let's pull this down, form email, and same thing for our password and our password confirmation. Password, and then down here, same for the password, confirmation.

05:45

So now as we type in here, this form is going to get filled up with all of these values. What we can then do is just make a request to our back end by submitting this form.

05:55

There's a submit method on this form. So when this form submits, so we can say vOnSubmitPrevent, we basically want to just submit this form through. So we can say something like form.post,

06:06

post through to a particular location, and then we can provide any Inertia-specific options through to this as well. So we can actually do this all in line,

06:14

and we can post through to the register route that's given to us with Fortify. Now where is that? What is it called?

06:20

Well, we can just go ahead and open up our route list. So let's go and say route list, and let's look in here for register. We know it's not going to be a get request,

06:30

because we don't need to actually get anything. We just want to post through to the register, and this is the name of the route. So in here, what we can do is still use our route helper.

06:41

So we can say route and register, and remember, that's going to pick up the specific route name via Ziggy, which we installed earlier. Let's try this out and see what happens.

06:52

So I'm going to go ahead and pull up my console here, pull up my network tab. Let's pull this just to the side, so it's a little bit easier to see,

06:59

and let's just hit Create an Account. OK, so we've got an error, first of all. Let's just have a look at what is going on here. And register is not in the route list.

07:08

OK, so let's have a look. Ah, yeah, so it looks like that's not a named route. So that's probably one of the only ones that isn't named. So let's go ahead and just do that to forward slash register

07:19

or named in Fortify. So we're going to have to provide the URL for that one. OK, let's try this again. So we're going to click Create an Account,

07:27

and sure enough, this goes through to our back end. Great. Now, the reason that we're getting this error is something that we neglected to set up

07:34

when we installed Fortify, and that is registering the service provider. So if we come over to our Fortify service provider under App and Providers, this goes ahead and puts everything

07:47

in place. So this is going to go ahead and say what class or what action registers new users. There's a few other things we can configure in here,

07:55

and we'll be adding some stuff to this later. But we didn't, over in our app, go ahead and register this. So let's do that now. That's really important, of course.

08:04

So let's go and put in our Fortify service provider into here, and that should now work. So let's go over and try this again. Hit Create an Account, and there we go.

08:15

It should have sent a network request through to register. Now, nothing's happened because we, of course, are validating within that action that we've already seen.

08:23

So now what we need to do is pick up them errors and show them on the page. So let's tackle that first of all. And within Inertia, when we have a form,

08:32

this form now contains all of them errors. So to demonstrate that, if we just say form errors, what we should see is all of the errors in here. And we just need to extract them out,

08:43

create a couple of if statements, and show these on the page. So to do this, we are going to go down to this section here where we implemented our errors,

08:50

and we can just do a simple vif on here. So we can say if form errors and what's this one name, then we want to show this with the error in here, which is just going to be form errors and name.

09:06

So now we see the error, great. So we're going to just repeat this for every single one, and then we're good. So let's copy and paste this down for email,

09:14

and of course, switch over what we're accessing. We'll do the same down here for our password. And I don't think we need this for the password confirmation because the error comes through for the password,

09:25

but I'm going to go ahead and add it in here just in case. Okay, there we go. So we see all of the errors on the page now, great. So when we fill this in now and validation passes,

09:36

then we should see a successful request, and that will actually sign us in. So let's go and just fill this in as we normally would. So I'm going to enter all of these details,

09:45

and these are not password fields, so it's probably a good idea at this point to change these to a type of password. And let's just refresh this.

09:57

And once we've registered, let's check our network tab and see what we get. Okay, so we've got a error here, which is absolutely fine. What this has done is on the back end,

10:08

it's redirected us over to the home page, which we don't actually have. We don't have a root called home. So this is controlled.

10:15

If we just go over to our config under Fortify, if we look at our home, I think it's not called home, it's called root service provider. So this is our home page.

10:25

So our root service provider is included with Laravel, and we have this constant called home, which is where we want to be redirected to when we log in, register, and a bunch of other actions.

10:35

So if we open up the root service provider within our project, what we can now do is change this over, and that will be reflected

10:42

with the Fortify functionality as well. So we're just going to switch that over to the home page. Okay, so if we give this a refresh, we're technically now, I think, authenticated,

10:50

although we're not showing this, we're going to do that in a moment. But if we come over to our database, I am registered. So I'm going to go ahead and delete this account,

10:58

and we'll come over and re-register now. So I'm going to enter my name, email address, password, hit create an account, and there we go. So we're redirected over to the home page,

11:10

the modal disappears, and technically we're now authenticated. So before we go on to anything else, there's a couple of things that I want to do here.

11:19

The first one is the create an account button and disabling this when the form is actually submitting. So what we can do in here is we can disable this on a particular condition,

11:31

and that condition is when this form is actually submitting. We don't want to have a user click on this, have a potentially slow network request, and then have them have to click it again

11:39

and then potentially register duplicate accounts, which wouldn't happen, but they might see an error. So we can actually bind in disabled to when the form is processing.

11:48

So we can use the processing property from our inertia form to programmatically disable this. And then what we could do is just add a style in here. So we could just say with Tailwind,

12:00

when this is disabled, we want to set the opacity to 50. Now let's just try this out. We're going to come over to create new user, and I'm just going to add an artificial sleep here

12:09

of say three seconds. What this will do is it will just stop this from processing for three seconds, and we'll actually be able to see this working.

12:17

So I'm going to go ahead and delete the user account from the database, go over to create an account, and just type my details in again. And what we should see now is that delay of three seconds.

12:27

The form processing value will be set to true. This will disable, and the styles with Tailwind will detect whether this is disabled, and it will set the opacity to here.

12:38

I can't click on this again until it finishes, and then we go through and we're registered. So just something that we're going to add to every form so we don't end up with potential duplicate clicks,

12:47

and it's good practice to get into the habit of disabling form buttons while you're processing something. Okay, so we're going to head over to create new user

12:55

and get rid of that artificial sleep, and now technically we are now signed in to our account. The last thing we're going to do just before we go is set the page title for this.

13:05

Now we can't see page titles for this unless I open up a new tab, but technically this is still the homepage. Now even when we're working within a modal,

13:14

we can still use the head component from Inertia. So let's pull in the head component to set this inside of our modal. So we could do that in the modal

13:24

or we could do that outside of the modal. It doesn't really matter too much. So I'm going to set a title here of create an account, and what you'll see is when we go back over to the browser,

13:36

this is now set to create an account. When we're not on this modal, it switches back over to home. We can now create users in the database,

13:45

but now that we're signed in, we need to show that the user is actually signed in here. So let's head over to the next episode and swap this state around when we are signed in.

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Episodes

Transcript

Episode summary

Episode discussion