I feel like we need to talk about authentication, because we have talked about using components as our pages. We haven't used any controllers, and the typical Laravel applications use a controller to, well, do everything. So let's implement a login page for our application, but we're going to do so using Livewire components. And so we're going to start inside of our routes, because I want to essentially take everything that is considered part of the dashboard, and I want to protect that. So we're going to finally uncomment our protected routes, but let's simplify this. Let's just say that this is going to be protected with the auth middleware.

So we're going to finally uncomment our protected routes, but let's simplify this. Let's just say that this is going to be protected with the auth middleware. We will replace all of the routes inside of this closure for the group, but let's give this route a name of dashboard. And while we're here, I also want to name our default route that displays our article index, and I want to change this, but not necessarily change it, but let's just call it home, something that's nice and easy. Let's clean this up a little bit, and okay, I'm happy with that. We're going to leave this file open, because we will be coming back to define a route for signing out.

We're going to leave this file open, because we will be coming back to define a route for signing out. Now, let's create a new Livewire component, and we can just call it Login, and I guess I should have defined a route for this component as well. So let's do that, I guess, right here. After our default, we'll have a GET request for /login, and we want to route this to our Login component that is inside of app/Livewire, and then simply the class. That's all that we have to do, although let's give it a name of login, and let's test this out inside of the browser. Now, we need to change our layout, because we have a link for the admin dashboard, and

out inside of the browser. Now, we need to change our layout, because we have a link for the admin dashboard, and we only want that visible for users who are signed in. But if we attempt to go to the dashboard, we can see that we are redirected back to the login. So everything is working as far as that is concerned. Of course, we don't see anything for our login, because we haven't implemented anything. So let's open up the view, let's also open up our class, and logging in is pretty simple. We need an email, so we'll have our email property. Let's initialize that as an empty string, and then we also need the password, and we

We need an email, so we'll have our email property. Let's initialize that as an empty stream, and then we also need the password, and we also want to validate these things as well. So for the email, we want to validate to ensure that it is required, but we also want to be sure that it is an actual email address. Now, of course, this isn't going to check if this is an actual valid email. Somebody can type in something that will look like an email address, and really, that's all that we need in this particular case. We don't want anything more complex than that. And then for the password, we want to just ensure that we have a password to work with.

We don't want anything more complex than that. And then for the password, we want to just ensure that we have a password to work with. And since we're here, we can just go ahead and implement all of the functionality. So we can say that we will have a method called authenticate, to where the first thing we will do is validate our data that we have, then we will attempt to authenticate our User. So we will call the attempt method, we will pass in the email and the password. And if that is successful, then all we need to do is redirect the User. But in this particular case, we are going to use the redirect()->intended(). We have talked about redirect()->intended() when we talked about redirecting. Well, now that we can actually sign in, we can use that method.

We have talked about redirectIfAuthenticated when we talked about redirecting. Well, now that we can actually sign in, we can use that method. But let's also specify a default. And I think the default could be simply the dashboard. So if someone signs in normally, then they will be redirected to dashboard. If they tried to access something prior to signing in, then they will be redirected to whatever that resource was. However, if it's not valid, then we need to tell the user that authentication failed. So we can have another property, we can call it loginMessage. And we can just say incorrect email and or password.

So we can have another property, we can call it loginMessage. And we can just say incorrect email and or password. We don't want to supply a lot of specific information, just something generic. So let's define that public loginMessage, and we'll set that to an empty string. So this is our LoginComponent class, this ought to work just fine. All we need to do is work with the email address and the password. We validate the information, we attempt to sign in using that information. If it works, then great, we redirect the user. Otherwise, we just tell them that, hey, the information that you provided is not correct.

Otherwise, we just tell them that, hey, the information that you provided is not correct. So we can close that. Now, I'm going to cheat and paste in the majority of the form because, well, this is a sign in form. We need a field for the email, we need a field for the password, and a button to submit those values. That's it, there's really nothing here. And I didn't even want to watch me type that out, so you're welcome. But I didn't include any of the Livewire things.

And I didn't even want to watch me type that out, so you're welcome. But I didn't include any of the Livewire things. So for the form, we want to use wire:submit. And we are going to call the authenticate method as the action here. So that will kick off the authentication. If it works, then we, of course, are redirected. If not, then our login message will be displayed up here. But then we have our email field, which all we need to do is set wire:model to email. And we essentially need to do the same thing for the password field.

which all we need to do is set wire:model to email. And we essentially need to do the same thing for the password field. We'll set wire:model to password. Of course, the validation errors are set up and ready to go there. And we don't need to do anything for the button because the form is going to submit and execute the authenticate method. Although I do see here at the top, this is not login article, this should just be login. If you can't tell where I pulled this form from, well, now you kind of know. So in the browser, we can see we have our login form,

If you can't tell where I pulled this form from, well, now you kind of know. So in the browser, we can see we have our login form, we have the email address and the password. Let's go ahead and let's test this out somewhat. So let's have something that's not even an email address, and then we'll provide something for the password. If we attempt to sign in, we can see that the email field must be a valid email address. Okay, fine. So we'll have some valid email address, we submit the form, and

Okay, fine. So we'll have some valid email address, we submit the form, and now we can see that it fails, incorrect email and or password. Now, before we go further, I want to go ahead and hide the admin dashboard link. Because I only want that visible when the User is signed in. So I think that is inside of app.blade.php. And yes, here it is. So all we need to do is surround this with the @auth directive. Let's add the @endauth, and that should be fine. Back in the browser, we can see that that link is gone.

Let's add the end auth, and that should be fine. Back in the browser, we can see that that link is gone. So now, let's attempt to sign in. My user is user at user.com. The password is password. Whenever we sign in, we should be redirected to the dashboard. And there we go, we have our links. If we go back to our home page, we can see we have home as well as admin dashboard. But now we need some way to sign out.

we can see we have home as well as admin dashboard. But now we need some way to sign out. So let's first of all define that route. And we can do this in a couple of different ways. I'm going to use a GET request. The URL will be simply /logout. And we don't necessarily need a Livewire component for this because really it's just a simple action. We sign out, but we should redirect to some place. And I think it would be perfect to just redirect back to

We sign out, but we should redirect to some place. And I think it would be perfect to just redirect back to the home route. And of course, we need a link for this. So let's open up the admin view. And here we have our menu. But I don't want the log out link to be included in this list. So what I'm going to do, this div contains our menu. Let's change that to flex and justify-between. Then let's take this ul element.

Let's change that to flex and justify between. Then let's take this ul element. Let's just copy it and paste it. One of these items because the other is just going to go to /logout. And then the text will be Logout. So now we have a link inside of our dashboard that we can click to log out. That should redirect us back to our home. And that's perfect. But let's do this. Let's test attempting to go to a protected page.

But let's do this. Let's test attempting to go to a protected page. Like this is the edit page for the article with an ID of three. So this should redirect us to our login page. We will sign in and then we will be redirected back to the edit page of that article. There we go. So the redirect works and that is perfect. Now one other thing I noticed, whenever we went to the login, the title is just page title.

Now one other thing I noticed, whenever we went to the login, the title is just page title. So let's open up the login component once again. And let's add the title attribute. And we'll just say login. And of course now we see login as the title for our page. So as you can see, implementing something like authentication is extremely simple and straightforward because as I've said many times, this is still Laravel. We have all of the tools that we would normally use within a regular

straightforward because as I've said many times, this is still Laravel. We have all of the tools that we would normally use within a regular application except that now it's just kind of flavored with Livewire. In fact, I dare say it's a little bit more simple with Livewire because we only have to define a single route, one to actually go to that component. And then the component is responsible for handling all of the other actions that the component needs to do, such as handling the user inputs, determining if it's correct. And in the case of our authentication,

such as handling the user inputs, determining if it's correct. And in the case of our authentication, actually attempting to authenticate the user. Livewire is fantastic. It simplifies the way that we can develop applications and not just normal applications, but very modern applications. And that's it. I hope you enjoyed this video. If you did, please give it a thumbs up. And if you want to see more videos like this,

If you did, please give it a thumbs up. And if you want to see more videos like this, make sure to subscribe to our channel. And as always, thanks for watching. And I'll see you next time. Bye. Bye. Bye. Bye. Bye.

Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye.

Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye.

Bye. Bye. Bye.