Okay, let's work on registering users and we'll start by creating an endpoint on the backend. So I'm going to copy the login endpoint here and we'll paste it underneath here. Let's change it to register and let's get rid of everything in here. And since we have validation in here already, let's work with this. So we need the name that's required. The email is required as well. And that also has to be unique on the users table when we're creating a user. So let's add that. The username is the same as well.

So let's add that. The username is the same as well. And let's say minimum four characters and the password is required as well. Let's say minimum six characters and let's also make sure that we have a password_confirmation so we can say confirmed. And this will require that you pass in another field called password_confirmation to make sure the passwords are the same. Okay, so now we just have to make a new User here. User::create, let's say name is going to be coming in from the request. name is, or let's start with email.

User create, let's say name is going to be coming in from the request. Name is, or let's start with email. Same thing. username is the same as well. And one for password. And we just have to make sure to hash the password here. So let's hash make the password. Okay. And let's make sure to import Hash. Okay, cool.

And let's make sure to import hash. Okay, cool. Let's return response()->json(). And let's just return the created User here. And let's say 201, which is a created response. Hopefully I did this right. Let's test it out in our REST client here. So let's duplicate the login endpoint. Let's call it register. Let's change the endpoint.

Let's call it register. Let's change the endpoint. Okay. And let's go ahead and add some fields here. So name, let's say another email is another@another.com. Let me just move this up. We have a username. So let's add that. Another is fine. Let's move this up as well.

Another is fine. Let's move this up as well. And we also need a password_confirmation to confirm the password. And for now, let's make sure they're different to test the errors. So let's go ahead and hit this endpoint. And we do get the correct errors. So let's fix this password here and see if we get the correct response. And we don't. It says username doesn't have a default value. So I believe that's the fillable array on the User model.

It says username doesn't have a default value. So I believe that's the fillable array on the User model. Let's just get rid of this. And let's just say guarded is an empty array so we can mass assign stuff. Okay. Let's try that again. Now we get avatar doesn't have a default value. So I believe that's in my create_users table. There's no default for avatar here. So I'm just going to paste in a default here.

There's no default for avatar here. So I'm just going to paste in a default here. And this is just a generic avatar here. It's coming from Gravatar. So if you want to see that, just paste that in here and you see this generic avatar here. Okay. So we have to migrate this again. So this is our backend, php artisan migrate:fresh --seed. And let's try that one more time. So back here, let's run this again.

And let's try that one more time. So back here, let's run this again. And we're still getting an error. Did I save it? I did not save it. php artisan migrate again. Let's try it one more time. And now we are getting that new User. Okay. So our endpoint is working.

Okay. So our endpoint is working. Now let's wire it up to our frontend. So we already have this register method that we can work in. And let's comment this out for now. And first we want to set the isLoading state to true. And then we want to make a call to the backend. So we can say axios config. And let me just paste in the import for axios config up here somewhere. Let's just put it right here.

And let me just paste in the import for axios config up here somewhere. Let's just put it right here. Okay. And we are going to make a post request to /register. Okay. And we have to pass in some values here. name is going to be name, or we can just leave it off. We have a state for email. We have one for username. We have one for password.

We have one for username. We have one for password. And like I said, we have to pass in an additional field called password_confirmation. And this is going to be the confirm password. Okay. And all of this state is updated as the User types in here. So if you don't remember, the onChange text is updating that piece of state as the User types in the text box here. Okay. So that's good.

Okay. So that's good. Now if it's successful, let's do .then. Let's grab the response. Let's go ahead and grab this alert here. And we'll just alert that a new User was created successfully. Let's comment that back in. Let's say user created. And then we'll say, please log in. So we're just going to redirect back to the login screen.

And then we'll say, please log in. So we're just going to redirect back to the login screen. So we can say navigation.navigate back to the login screen. And we have navigation imported as a prop. I do right here. And from here, we can set isLoading to false. And let's also set the error to null. Okay. Let's go ahead and do the error case. So .catch error.

Let's go ahead and do the error case. So .catch error. And for now, let's just console.log the error.response. And then we'll work on that in a second. Actually, we'll add more here and set the error since we already have a piece of state for that. So setError. And for now, let's do the same thing we're doing in our login method. And we're just setting the error to error.response.data.message. So we'll do the same thing.

And we're just setting the error to error.response.data.message. So we'll do the same thing. Let me check my REST client again to make sure that's correct. It was error.data.message. So if I were incorrect, we do have this message here. But it's pretty generic. And I kind of want these errors here. So we'll work on that in a second. So let's save this. Let's go ahead and make a new User here.

So let's save this. Let's go ahead and make a new User here. And right now the passwords don't match. Let's see if we get anything on our screen. And we do. And I forgot to set the isLoading to false. So let's add that in here. Okay. Save that. Try that again.

Save that. Try that again. Okay. And let me simulate some lag on the back end so we can see. So back to our routes/api.php. Let's just simulate some lag here. sleep(2). Okay. Let's try this again. And we do get the loading spinner.

So again, if you take a look at the REST client and the errors coming back, I just want to show the first error here. So we need the keys here. And I'm only interested in the first one here. So let's start with that. So back to our code. Back to our register screen. Let's grab the first key here. So we can say const key equals. We can make use of Object.keys.

So we can say const key equals. We can make use of Object.keys. And the key is going to be error.response.data.errors right here. So this key right here and the first one. So error.response.data.errors. So this is going to be an array and I'm only interested in the first one. So let's say 0 here. Okay. And then we can set the error to data.errors. And we can say the key here.

And then we can set the error to data.errors. And we can say the key here. And this is an array as well. And it can have multiple messages, but we're only interested in the first one. So we can say 0 as well. Okay. Hopefully, this works. Let's give that a try. So if you hit register here, hopefully we get a better message. And we do.

All of these errors are coming from the server and you can save a round trip if you have client side validation, but I'm not going to do that here. For example, for the required fields, which are all of them, you can just check if there's at least one character typed and if not, then maybe display an alert. So let's do one quickly. Actually, let's do one for the name field. So we can say something like if name.length is less than one, or you can match the server validation if you like, but this is fine for now. Then we can just early return here and we can also maybe use the alert here. Let's grab this and let's say, please enter a name.

Then we can just early return here and we can also maybe use the alert here. Let's grab this and let's say, please enter a name. Please enter a name. Okay. So let me just refresh the screen here. Let's go to register and now we should have client side validation for the name and we do. Cool. So let me just get rid of the sleep on the back end and then we can make our commits here.

So let me just get rid of the sleep on the back end and then we can make our commits here. Actually, I want to add that same error message on the login method as well. So let's go back here. Let's grab the error message here. Let's grab these two. Let's go to our AuthProvider and let's add this in our error here. So we can get rid of this, paste that in, and this should work for login as well. So if I hit login, we do get a better message here now. Cool.

So if I hit login, we do get a better message here now. Cool. So let's go ahead and stop this. Let's make a commit. So this is the front end, git add, git commit, say allow users to register. And then for the back end, git add, git commit, add endpoint for registering users.