Okay, let's take a few moments to familiarize ourselves with Jetstream and what it's actually doing, and then we'll configure it and set it up for our particular needs. You can see in the app that we've created, there are two routes at the top here. One is login, the other is register, and this is the Jetstream logo, which is indicating that Jetstream is creating and controlling these pages for us. You know what, why don't we go ahead and register myself, so luke@laracasts.com, and let's just quickly create ourselves a password, and we're taken straight to the dashboard, logged in as Luke Downing, as you can see here. And we can completely customize this experience, which we will in the near future, but for now, let's go ahead and jump into the profile section,

And we can completely customize this experience, which we will in the near future, but for now, let's go ahead and jump into the profile section, where we'll see some of the features that are on offer by Jetstream and its underlying package, Fortify. So, for example, we can update our profile information, our name and email address. We can update our password. We can enable two-factor authentication. We can manage browser sessions across different devices, and we can delete our account. Now, already, there are things to think about. When you delete an account, what should happen to all of the forum posts you've created, all the comments you've created?

When you delete an account, what should happen to all of the forum posts you've created, all the comments you've created? Do those just get deleted? Do they get assigned to a guest user? So, in the back of our minds, we can already be thinking about the complications of something as simple as deleting an account. But before that, let's focus on what is actually providing these services. What happens when you update your profile information? Well, Jetstream is the UI layer. So Jetstream will say, okay, I'm a view application.

Well, Jetstream is the UI layer. So Jetstream will say, okay, I'm a view application. I'm an Inertia view application. I am going to send the data that you enter to Fortify, to the routes that Fortify provides for me, and it will handle the actual work under the hood. And that's the distinction between Jetstream and Fortify. Jetstream is pretty much just a UI layer, either Livewire or Vue and Inertia, and Fortify is the workhorse that's actually computing and working out how to update profile information, how to enable or disable two-factor authentication,

and working out how to update profile information, how to enable or disable two-factor authentication, how to manage browser sessions. You can see that's the case if you jump into the codebase. Go to the app directory, and under Actions, we have two subdirectories, Fortify and Jetstream. Now, under Jetstream, there is only one class that we can edit, and that is DeleteUser. What happens when you delete a user? And you can see by default, well, it will delete the profile photo for a user,

What happens when you delete a User? And you can see by default, well, it will delete the profile photo for a User, if they have one. It's going to delete the API tokens, and then it will delete the User itself. So, later down the line, when we need to start thinking about what happens to a User's posts when they delete their account, this is where we'll come. This is what we will edit. But if you take a look in the Fortify directory, well, now we have what happens when you create a new User,

But if you take a look in the Fortify directory, well, now we have what happens when you create a new User, what happens when you reset a User's password or update a User's password, what happens when you update a User's profile information? So, you see, the actual workhorse is Fortify. Jetstream is the UI layer. And that explains why in the config directory, we have Jetstream.php and we have Fortify.php. I hope that makes sense, and I hope you understand what the distinction between these two packages are.

I hope that makes sense, and I hope you understand what the distinction between these two packages are. You install Jetstream 90% of the time, but Fortify is the workhorse behind the scenes. If we jump into the Jetstream.php file and come down to this features array, you can see that we can enable or disable the various features that Jetstream ships with. Now, I'm not interested in terms of privacy at the moment. We're not going to have a third-party API either, and, yeah, I'm not interested in teams,

We're not going to have a third-party API either, and, yeah, I'm not interested in teams, but profile photos is very interesting. It'd be cool to support custom profile photos so that they show up when you create a post, when you comment on a post. So I'm going to uncomment this line here, and we likely need to run php artisan storage:link, although you'll see because I installed using laravel new and the Laravel installer, it's already done that step for me.

although you'll see because I installed using laravel new and the Laravel installer, it's already done that step for me. With that one line unchecked, we should be able to jump back into the profile section, reload, and, yeah, you can see we have this photo available here where I can select a new photo. I'll choose this profile pic of me, click Open, and there we go. Let's go ahead and click Save, Refresh, and sure enough, here is my profile photo at the top right. So pretty cool.

and sure enough, here is my profile photo at the top right. So pretty cool. Jetstream allows us to easily update things like a profile photo, manages the storage for us, and if you don't want to store your profile photos locally, then you can alter the profile photo disk here and change it from public to something else, an option that suits your particular requirements, but I'm fine with leaving it as that. I'm also pretty sure that inside the updateUserProfileInformation,

but I'm fine with leaving it as that. I'm also pretty sure that inside the updateUserProfileInformation method, if we go down to photo, you can see that it's setting a max size of 1 MB for those photos, and they have to be either JPEG or PNG. So, again, if you wanted to update that, let's say we wanted 2 MB, 2048, we can absolutely come into this updateUserProfileInformation action, and alter to suit our requirements,

update User profile information, and alter to suit our requirements, but I'm quite happy with 1 MB. I don't want profile photos taking up all of my server space, so 1 MB sounds perfect to me, and the restriction of JPEG and PNG also makes a lot of sense in this instance. If we now jump into the Fortify.php configuration file, note the features that Fortify is offering. For example, what happens if I turn off the update profile information feature? Well, if we jump back in here and refresh,

For example, what happens if I turn off the update profile information feature? Well, if we jump back in here and refresh, you can see that just completely disappears from the profile section. I can no longer change my name, email, or profile photo, but if I return that to an active feature and refresh again, here we are. So, very easy to enable or disable different parts of the Jetstream UI. The one I'm interested in is this email verification. One of the biggest problems when it comes to forums is protecting from spam, from bots that sign up and just hit your forum with posts that make no sense or comments that make no sense.

from bots that sign up and just hit your forum with posts that make no sense or comments that make no sense. It's a constant battle between developers and bots. However, by requiring emails to be verified before people can post data, before people can create posts or create comments, well, we might save ourselves from a little bit of hassle, and seeing as Jetstream has email verification built in, it makes sense that we'd use it. In order to make use of this, we'll need to uncomment this line. We'll also need to jump into the User model,

In order to make use of this, we'll need to uncomment this line. We'll also need to jump into the User model, and note that at the top here we have this commented out contract called MustVerifyEmail. Let's go ahead and uncomment that, and we'll implement it on the User. So, implements MustVerifyEmail. If we come back to the application and try to visit the dashboard, well, we're taken straight to this page which says, before continuing, you need to verify your email. So, this is evidently some middleware that sits in the web stack,

before continuing, you need to verify your email. So, this is evidently some middleware that sits in the web stack, and it's going to check, have you verified? If not, I'm redirecting you to the email verify route. Okay, let's go ahead and click Send Verification Email, and as I imagine would happen, we are going to crash, and that's because we've not set up any form of local mail client that we can make use of. Let's fix that. As you'd expect, Laravel has support for many different mail drivers,

Let's fix that. As you'd expect, Laravel has support for many different mail drivers, and you can choose the one that makes the most sense for your needs. You configure this from the .env file at the root of your application, and you can see the default is SMTP, but we don't have an SMTP server set up locally, and that is exactly why we're getting the exception in the browser. Now, if you want, you can change this to log, and all of the email sent from your application will just go into the app logs under storage.

and all of the email sent from your application will just go into the app logs under storage. However, I really like the offering by Beyond Code, Hello!, which is basically just a client that will intercept mail and then show it in a nice HTML format. So here is the Hello! application. I can click Go to Settings. I'm going to copy the data here, jump back into our app, and I'll replace all of this mail with the configuration from Hello!. I'm going to change the username here to framerate, like so,

and I'll replace all of this mail with the configuration from Hello! I'm going to change the username here to framerate, like so, and with that set up, we should be able to come back to our application, refresh, hit Resend on the verification email. We no longer receive that exception, and if we jump back into Hello!, sure enough, we have received an email asking us to verify our address. I can go ahead and copy the link. We'll jump back into the application and paste that in, and we are now verified.

We'll jump back into the application and paste that in, and we are now verified. I can go to the dashboard, and I should imagine if we open our database in, say, TablePlus, and I go to the Users table, yeah, sure enough, here is our user, and note that the EmailVerify column has been filled out, which is why we're now able to see the profile page rather than being taken to that Resend verification email link. All right, almost there.

rather than being taken to that Resend verification email link. All right, almost there. The last thing I'd like to do in configuring JetStream, at least for now, is to switch out the logo that JetStream ships with with our own logo, and if you jump into the code base and head to the Resources directory, depending on whether you're using Vue or Livewire, will depend on where this logo is. In our case, it's going to be under JS and Components, and you'll see there's an ApplicationLogo.vue file.

In our case, it's going to be under JS and Components, and you'll see there's an ApplicationLogo.vue file. So all of the components here have been published by JetStream for us so that we can completely customize the look and feel of the application. You're not stuck with the defaults. You can change everything. So this is the JetStream logo, and I've already gone ahead and in the public directory under assets, I've dropped in the logos from our designer, Adrian, so I'm going to go and replace this SVG with an img tag,

I've dropped in the logos from our designer, Adrian, so I'm going to go and replace this SVG with an image tag, and I'll set the source to be /assets/framerate-analog.svg. Let's see how that looks in the browser. Yeah, here we go. We have our framerate logo. Now, it's not altered up here at the top left. I believe that's because that is the application mark component instead. It's supposed to be like the smaller variant. So I'll switch this SVG out with an image

It's supposed to be like the smaller variant. So I'll switch this SVG out with an image where we set the src to /assets/symbol-analog.png. I might ask Adrian for an SVG later on, but for now, there is the png application mark. That works well. I do believe that if we log out and go to the login or register routes, yeah, we're still using the old logo here, and that's because this is the authentication card logo.

yeah, we're still using the old logo here, and that's because this is the authentication card logo. So again, I'll replace this SVG with an img tag where I'll set the source to be /assets/symbol-negative.png. Hopefully now, yeah, there we go. Maybe negative is the wrong one. I think symbol-analog was the one I was using before. There we go. Much better. We're actually getting a little bit of blur around there.

There we go. Much better. We're actually getting a little bit of blur around there because that png isn't high enough resolution. So for now, let's go ahead and use the framerate analog instead just to get rid of that nasty pixelation. That's much better, and we should now be able to also go to the register route and see very much the same thing. Yep, we do, which means we're pretty much configured as far as the logo is concerned, and we're ready to start actually building the application.

as far as the logo is concerned, and we're ready to start actually building the application. We'll dive into that in the next episode.