Installing Fortify0:00
Okay, let's take a look at using Fortify. We've already seen it used together with Jetstream, but in the next few videos, we'll use it by itself without Jetstream. Remember, Fortify is the backend implementation for a bunch of auth features. We'll build a basic, unstyled version of Jetstream. Let's go ahead and install it on a fresh Laravel app. Before I install it, let's go ahead and take a look at our routes. So, php artisan route:list, and we'll do the compact version. You'll see that there are only two routes here in a default Laravel app. Let's go ahead and install Fortify. As always, Composer requires it.
Let's go ahead and install Fortify. As always, Composer requires it. Let's go ahead and install the Fortify service provider. That published the service provider as well as the actions and the migrations as well. Now we can take a look at our routes here. Let's run that command again. Now you can see a bunch of new routes here for all of the auth features. We'll start with registration and login in this video. I think there's one more step here. We have to migrate still, so let's migrate.
I think there's one more step here. We have to migrate still, so let's migrate. I believe there is one more step. We have to add the service provider to the providers array in config/app.php. Let's look for providers. It's right here. Let's put it down here. We should be good now. There's also a config here which has all the features which you can turn off or on. I'll turn this on in the next video. We'll start with registration and login.
Configuring Register Routes2:00
I'll turn this on in the next video. We'll start with registration and login. Let's take a look at registration here. That's the features array. Fortify is just the backend implementation. It only has controllers and routes set up. We have to tell it what views to use. Let's run the route:list command again. Let's look for register. There should be two routes here. I have an error. Sorry, I forgot to put class here.
There should be two routes here. I have an error. Sorry, I forgot to put class here. Let's run this again. Let's look for register. There should be two routes here. We can see that we have a GET request for the showing of the register form and a POST request to actually perform that action. Let's go ahead and add this to our Fortify service provider. The one in our project in the boot method. Let me comment this out first. Let's try going to /register.
Let me comment this out first. Let's try going to resources/views/auth/register.blade.php. We get this error. Note this is using short closure syntax in php 7.4. We should get a different error now saying that the view is not found. There we go. Now we can make that view in resources/views/auth/register.blade.php resources/views/auth/register.blade.php resources/views/auth/register.blade.php Actually, what I want to do here is make a layout first before we do this.
Creating Layout Components4:00
resources/views/auth/register.blade.php Actually, what I want to do here is make a layout first before we do this. If you look at Jetstream, I'm going to switch to that project, you'll see that there are a few layouts here too. If you go into the layouts folder, you'll see that we have one for non-logged in users called guest and we have one for logged in users. They are both making use of slots here. We'll do the same thing here. We have to make a component and make use of Blade components. I'm going to make a new component, php artisan make:component. Let's make one for guest layout. Let's make one for app layout as well for logged in users.
Let's make one for GuestLayout. Let's make one for AppLayout as well for logged in users. Let's go ahead and go into that component. The class file is going to be in app/Http/Views I believe or not Http should be in Views or view. Then we have view/components/GuestLayout and AppLayout. Actually, it's already named layouts.guest, which is where I want to put it. Same for the AppLayout. Let's add that in our views directory. Let's make a new one. Sorry, this is the Jetstream project. We want to do the same for our Fortify project.
views directory. Let's make a new one. Sorry, this is the Jetstream project. We want to do the same for our Fortify project. That's why it was named like that already. We don't need the constructor, so let's get rid of that. Let's add the correct folder here. Let's do the same for guest layout. Let's paste that in and make sure it's layouts.guest. Now we can make that in our view. Let's make a new folder. layouts.guest.blade.php Like I said, this is going to be unstyled. I apologize in advance.
layouts.guest.blade.php Like I said, this is going to be unstyled. I apologize in advance for it being super ugly. Let's call this Fortify example. Let's put a div here. Nav goes here for guest layout. The slot can go in here. Let's just name it slot. Let's just duplicate this for the app layout as well. Let's duplicate this. app.blade.php For now, we'll just change this to app layout. Now we can go back to our register view and we can use that new component.
Building Registration Form6:40
For now, we'll just change this to app layout. Now we can go back to our register view and we can use that new component. We can say x-guest-layout and we can close that out. Let's just put an h2 in here for register. Now we can have our form for signing users up. Let's make a new form. Let's leave the action blank for now. method equals post.csrf token. Let's just see if this renders first. It does. We are extending our layout, so that's cool. Let's take a look at the endpoint. Let's open up our route list again.
It does. We are extending our layout, so that's cool. Let's take a look at the endpoint. Let's open up our route list again. Actually, there's no route name for it, so we'll just use the endpoint here. It's just a POST request to /register. Let's say /register. Let's just make a quick form here. We just need the name, email, password, and password_confirm. Again, this is going to be completely unstyled, so it's going to be ugly. Name, input, text. This one's for name. ID equals name. Name equals name. Make sure you name it name for this.
text. This one's for name. id equals name. name equals name. Make sure you name it name for this field because the controller expects this field to be passed through. We can say value as well and have the old value in there. Name. It's also auto-focus this. It's the same for email. This is going to be email. input type equals email. This should still be name. Don't need auto-focus for this one. Next is password.
This should still be name. Don't need auto-focus for this one. Next is password. This one will be password. Let's just get all of them. Password. That looks good. The last one is passwordConfirmation. I believe the name has to be password_confirmation. Let's just rename this. The type is just password. We actually don't want the values for the password fields.
We actually don't want the values for the password fields. Let's see if this renders. It does. I still need the submit button. One more. I don't think I have to put type="submit". Maybe I do. We'll see. The controller should be in place. If I did everything correctly, this should work. Actually, let me just paste in the errors here. Let's just add something here above the form that displays the errors if there are any. Just checking the error bag if there's
Let's just add something here above the form that displays the errors if there are any. Just checking the $errorBag if there's any errors and displaying them here if there are. This should result in an error if I don't put anything. It does. Let's see if it actually works. I'm going to fill this out. It looks like it does. We're logged in, but the default place it redirects to is /home. We don't have a route for that, but I want to change that. You can change that in the RouteServiceProvider right here. Home. Let's make it dashboard. We'll make a route for that as well, similar to how we have in Jetstream.
Adding Dashboard and Logout10:40
Home. Let's make it dashboard. We'll make a route for that as well, similar to how we have in Jetstream. Let's look for our dashboard. This is the app layout. Let me just grab this. Actually, no. I don't need to grab this because it's going to be super generic anyways. We just have to make it here. It's going to be in the views directory directly. Dashboard.blade.php. Let me just paste it in since we have the X app layout already. Let's just say this is the logged in view. Let's grab the route definition in our Jetstream project.
in view. Let's grab the route definition in our Jetstream project. Go to our routes file and space that in. We don't have Sanctum in here, so I'm just going to make use of the auth middleware. We'll take a look at the verified middleware in the next video. That looks good. If I go to dashboard, this should work. It does. Cool. Let's add the logout functionality. In Jetstream, this would be in the navigation dropdown. Let's look for logout here. There it is.
In Jetstream, this would be in the navigation dropdown. Let's look for logout here. There it is. As you can see, it's a form because it's a delete request. It's using some JavaScript here to perform that delete request so the user can logout properly. Let's grab this and let's put it into our app layout. app.blade.php. We'll put it here. We'll make a UL, LI, and an anchor link. Actually, this one in particular is not an anchor link because it's a form. Paste that in. We don't have these blade components. We're just going to change it to an anchor link. Let's change this to anchor.
Implementing Login and Customizations13:20
That's what we'll work on next. Before we do that, just note that there are still actions available, just like I showed you before in the Jetstream videos. You can modify these if you need to. For example, for this one, if you want to customize the registration process, you can just modify this over here. Let's take a look at logging in. Back here, let's look for login. Same thing here. We have to define a login view in our Fortify service provider. Let's add the login view here. Let's go ahead and make that view. I'm just going to duplicate this one and change it. login.blade.php. Let's say login.
I'm just going to duplicate this one and change it. login.blade.php. Let's say login. And the endpoint is login. Let's see if there's a route name for that. And there doesn't seem to be. So I'll just stick to the actual endpoint name. Slash login. We just need the email and the password here, so we can reuse this. And email and password. Don't need this one. Change this to login. And I think that should do it. Let's see if this renders first.
There it is. And we can try again. login. And it does work. Cool. Now, if you take a look at the Fortify config. So let's go to that. You'll see that there are a few options for or one option for changing the username. So say, for example, you wanted to use a username instead of email. You can just change this to whatever field you want. So, for example, if we use the name field, we can change that. And we just have to change our login Blade instead of email. It's going to be name now. So let me just change this quickly. Actually, let me just duplicate this. Comment it out.
email. It's going to be name now. So let me just change this quickly. Actually, let me just duplicate this. Comment it out. This one is going to be name. And this is name as well. And now we should be able to log in with the name field instead of the email field. Login. Now the name is Andre. Password is password. Login. And that works as well. Let me just put that back as I prefer email. Actually, I'll comment it out. And put the email back. And make sure to revert this as well. And one more reminder
And put the email back. And make sure to revert this as well. And one more reminder that I already did in the actions video is that you can customize your auth pipeline. So let me go back to the Jetstream project. And I believe it was in JetstreamServiceProvider or maybe not sure which service provider it's in. But you can do the same thing. So yeah, this. If you want custom functionality for logging in, you can just hook into the pipeline here and add your own custom class like we did here with this one over here. So you can still do this in Fortify. This would just be in the FortifyServiceProvider. I'm not going to
custom class like we did here with this one over here. So you can still do this in Fortify. This would just be in the FortifyServiceProvider. I'm not going to do that again because it works the same. But you would put it in here in the boot method. Oh, sorry. Not here. In here. So I'll just put it in there. But I'll leave it commented out. So in the next video, we'll take a look at the email verification process.
