Laravel Breeze Tutorial | Learn how Laravel Breeze Works | Enable Verification with Laravel Breeze

what's up developers and welcome back to a new video where we will dive into laravel breeze quick pause do you want to support the channel and want me to continue on pushing content well you can support the channel on patreon right now you'll get benefits such as a private discord group where everyone is helping each other out with their coding issues if you are interested to join the link will be in the description down below up until larval 8 we have used the larva ui command to pull in an authentication scaffolding in larval i've got a complete video on larva ui and how it works but ever since larval 8 came out the developers released something which is quite similar to larvae ui called larval breeze larval breeze is an optional authentication scaffolding that you can pull in through composer you can obviously create your own authentication system but why being bothered doing that if you can simply pull in a package created by the developers itself now larval ui has been deprecated and larval itself does not recommend you to use it anymore larval breeze on the other hand is a lot better to use nowadays and in my opinion a huge advantage is the fact that it has been built with tail and css in the front end part in this video we will be setting up larva breeze and we will go over the functionality and files that will be added inside your project besides that we will also be enabling things like forgot password and so on to save us some time i've already created a complete new larval project where i have not added my database connection but it does have my mail track connection now laravel briefs can be installed in pretty much the same way as larval ui which is true composer so if we open a new terminal in visual studio code and right inside of the cli we can simply say composer require a package from laravel forward slash breeze and we're also going to put it in as a depth dependency so let's say space double dash dev that's hit enter alright as you could see it has been published but this command will not pull in the authentication scaffolding itself since we need to run the breeze command to finalize it now let's run the php artist command first and let's roll up to the p section right at the top you will see a new command right here called breeze calling command which will install all necessary views routes controllers and other resources that are needed for larval breeze so what we can do is to perform this command by saying php artisan breeze colon install let's hit enter alright you'll see that brie scaffolding has been installed successfully so what we need to do next is to run npm install so let's say npm install double ampersand npm run dev what this command will do is building our assets because like i said before it is using tailwind for the front end part so that needs to be built as well so let's hit enter and this might take a second but it will be done pretty fast i'll cut the part out where it's installing and i'll see you back once it's done alright as you can see our assets have been compiled successfully so what we can do right now is to open the routes folder and let's open the web.php file now let's scroll down and let me make my terminal a little bit smaller usually new routes are defined inside the web.php file and you will see that laravel breeze added a new route in our file right here and a new require right below of it the route of our first endpoint will be forward slash dashpoint and whoever has used larval ui before knows what the forward slash dashboard endpoint does but more on that later on now the most important thing right here is the require which will go to forward slash auth.php so that should be a route inside the same folder right here you can see a new file called aunt.php so let's open it and see what's going on right here now inside this file you will find a total of 14 rounds that are being added inside the web.php file with this piece of code right here so it's requiring everything that's happening over here now all these routes have an association with authentication you will find the foreslash get route to register the show page we have the post request for the four slash register endpoint that has a store method so that will basically store the user we will have a get login which will create the login page we have the login post which will store the locked end user inside a session all those other routes right here are needed for a successful authentication scaffolding now inside every route you'll see that a controller is being called right here but they're not all the same so let's open the app folder in the root of our directory http controllers and you'll also see the route right here so there should be a odd folder which is actually true so let's open it and that's mainly done because larval breeze does not want to make it clustered and add all controllers inside the controllers folder in here you will find a total of 8 controllers where logic happens inside your application what i want to do next is going over all these files and making them work but before we do that we need to make sure that we set up our database our database credentials and migrate our migrations so inside the cli let's perform the mysql command and in order to create a new database from mysql we simply need to say create database called larval underscore breeze let's hit enter and one row has been affected so our database has been created but we do need to set our database credentials inside the emv file in the root of our application right here right inside of the db section that we have right here you can see that the database name is larval breeze the user is root and the password is empty now i only need to add a password here of dari1234 which will do the work for me let's save it and let's close off this file because we don't need to use it anymore now by default larval applications comes with a user model and migration larval breeze does not make any changes right here the migration file can be found inside the database folder in the root of a directory migrations folder and it's the first migration the create users table now it has a schema called users so a new table the table has a unique id which will be auto increment it has a name it has a unique email address which is a string it has a timestamp of when a email address has been verified it has a string of the password it has the remember token and it has the default timestamps now the user model on the other hand has to interact with this user migration once it has been migrated the user model can be found in the models folder inside the app folder where you will have a singular user.php module at the beginning of this file you will find three traits right at the beginning that we honestly don't need for this video so let's skip them now right below our trades you will find a property called fillable which is protected and what this property does is telling our application that whenever a user wants to register an account the name email and password needs to be filled in when they want to create their account right below our fillable property you will find a hidden property right here where we are telling our application that whenever we are trying to output a user to the browser you should exclude the password and the remember token when you want to exclude something like the name you can just go right after the remember token and add single quotes and say name and whenever we try to get a specific user the name will be hidden as well now let's undo it because we do obviously need to show the name but thinking about the user's migration there isn't really something in particular that you want to hide expect from the passport and remember token now finally you will see a property called casts right here at the bottom which is telling our application that the email verified at should be casted to a day's time now we're finally ready to migrate our migrations inside the cli let's first perform an exit to get out of my sql then we can simply say php artisan migrate and as you can see all of our migrations have been migrated it's time to move on to our controllers i want to go over the files in a logical order whenever you reach a new page you usually start off with the registration parts right so let's open the register user controller that we have now let's start off with this file the first method that you will find right here is the create method which is a method that will simply output a view to the browser as you can see it's simply returning a view from the odd folder with a register that played the php file let's open it let's scroll down open the resources folder views folder the odd folder where we have a register that played the php file most views inside laravel breeze have been built out of a set of components at the top you will find the logo that is being printed out followed with a component called odd validation errors which will basically put out the errors that you have whenever you try to register an account now this component can be found inside the components folder in the views folder so let's open it which is the fourth one the odd validation errors now there are two main reasons why it has been separated from the actual code the fourth one is reusability you can simply use the current component that we have open where you validate for errors in different files by just passing in let me open it again this piece of code right here so this component can be reused inside the login page let me go back one more time without using this piece of code on the login screen if you have used larval ui or any other video where you need to do something with your session this code might seem a little bit familiar to you in order to interact with slot attributes larval adds these properties at the top of your screen with the name of errors down below you will find an if statement where it will loop over the errors and if there are any errors it will print them out in an unordered list as list items now let's go back to our register.blade.php file now before we actually move on let's actually open this page inside the browser and see where this is coming from inside the cdli let's say php artisan serve all right let's open our localhost and let's navigate back to the browser we don't need our larval.com tab so let's paste it right here let's click on the register link inside the top menu and right here let me zoom in a little bit we have our logo which is coming from this piece of code right here so the component application logo we have a label right here with an input field which is simply coming from inside this form where we have a div with a label component for the name so let's go back which is referring to this specific name and we have a input field with the id of name type is text and it is for our name the same thing is being done for our email address right here for our password and for our confirmed passwords which you also can see right here now once a user enters his name email address password and confirm password it will be redirected to the let me open the register user controller again to the store method that we have right here now it's accepting the request as an argument and the first thing that you need to do is obviously validating the request which is being done at first so the input fields that we have which is the name email and password will be validated right here on required string the maximum amount of characters the email should be an email and it should be unique on the table users now the password should be unique as well it should be confirmed and it's calling a package called rules this allows you to centralize the expected validation behavior for a password finally once a user has passed all requirements it will create a new user right here but it will also hash the password from the request the next thing that you will see is something that is quite new which is the event that is being called right here what this will do is sending you an email verification that your email has been registered to this platform now the logic behind this event will go through the providers folder right here let's open it where you have a event service provider right here you will find and send email verification notification class so let's right click on it and let's go to the definition right inside of the handle method right here you will see that it is checking if the current user is verified or has been verified already if it has it will send back a email notification right here to the user now let's close off this file again because we don't need it we don't need the event service provider as well and let's open the register user controller again now once a user can be registered or has verified their account the login method will be called with the current user because they need to log in and they will be redirected to the route service provider colin collin home now if we right click on raw service provider and go to the definition you will see that there is a constant right here called home which will redirect you to the forward slash dashboard endpoint so let's say that you want to change up your dashboard endpoint and you want let's say a forward slash account endpoint you can simply change it up right here now let's test it out let's close off this file let's navigate back to the browser and let's create our account let's say that my name is dari my email is info at darinozar.com and i have a very secret password that you will see in a second let's confirm it let's click on register all right we have been redirected to the forward slash dashboard endpoint which means that it has reached this part of the code so it has been validated an event has been triggered and we have been logged in now let's think about it has the event actually been triggered we have not verified our account and we have been redirected to the forward slash dashboard endpoint let's navigate back let's open mailtrap and you will see that my inbox is still empty now i've got an integrated database inside visual studio code that you will find inside my sidebar so let's open it let me refresh it and i have a larval breeze database right here now let's open the users table you will find one row which is the information that we just have entered but our email verified ad is still empty by default laravel briefs turned off the email verification and wants you to add it yourself it wants you to enable it right on the middleware from the route and adding the class inside the model let's navigate back to our project directory by clicking on the explorer tab now let's open the web.php file right here and it's actually very simple to enable verification as you can see right here the middleware method is accepting an array but it only has one value inside of our array which is called odd so what we can do is to go right after odds add a comma and pass a second value inside our array which has a name of verified this should do the trick for us there's one more thing that we need to do and that's adding a new implementation inside our user model so let's scroll up again open the user model scroll up to the class user and right after authenticatable add a space we should add a new implements space and what it needs to implement is the must verify email contract that you will see as the first use statement right here let's save the file i still have my users table open so let's navigate there let's select the user that we have right here and i don't want it so let's click on the trash can right here and i'm sure that i want to delete this row all right we should be able to register our account again so let's navigate to brave open our local host and let's actually log out let's go to the forward slash register endpoint add a name of dari email of info at darinozar.com and a very secret password alright now let's click on register and as you can see it's asking us to verify our email address through our email inside the verify email endpoint and you even have the option to resend a verification token now if we navigate back to mailtrap you will see that we indeed received a new email called verify email address with a button right here that we can click on to verify our account before we verify it let me quickly show you where this file is coming from if we navigate back to our controller you will find a file inside the controllers folder called email verification prompt controller let's open it in here you will find an invoke method and an invoke method is simply a controller in larval that only has one action that needs to happen in our case it will check if the user has verified right here then it's performing a ternary operator down below so if it is true it will redirect the user to the forward slash dashboard endpoint so our route service provider colin collin home if it's not true it will show the aud verify email page in our case we are not verified yet so we simply need to click on the button but before we do that once again let's quickly dive into the verify email blade to see how that works let's scroll down inside our project and let's open the verify email.blade where you have a message here what they are thanking you for signing in which is let me show you this piece of code then it's telling us that a new verification link has been sent it has a form with a csrf token and a button right here a button component with the text of resend verification email so let's change this up to resend now save it and it's time to verify it let's navigate back let's refresh this page you'll see that our button has been changed to resend now click on it it's loading and a new verification link has been sent to the email address you are provided during registration so let's test it out we have a new email right here that's a verify our email address and as you can see we are logged in inside the dashboard where we have verified our email address remember in the beginning of this video i showed you an email verification add column in our database let's actually see if that has been changed let's open our users table let's run it to get our new column and right here the email verified add has been added a minute ago we've been on with the registered user controller the verify email controller now let's focus on everything that is related to login starting off with the authenticated session controller we have seen that once we register and verify our email we will automatically be redirected to the dashboard so what we can do is to log out click on log in you will see that the user is able to log in with his email address and his password and there's also a remember me functionality built in there's also a functionality where you can get your password back or you can basically reset your password excuse me and we have a login button once a user enters his credentials and clicks on login a post request will be performed inside the controller where the logic will be checked now let's navigate back to our code editor and just like the register controller there is a create method right here that simply returns the login page of our authentication scaffolding which is this page now if you scroll down you will see a public function store now this method accepts the login request as a parameter now the login request file can be found inside the request folder the odds folder where you have a login request.php file now this is a simple request found that you can create through artisan with the make column request command this class extends the form request as you can see right at the top which will basically validate incoming request with your login endpoint if we scroll down you will see that it has a rules method right here which allows you to reuse validation rules it has a public function authorized right here which is standard set to true and this property checks whether a user is authorized to make a certain request or not if we scroll down you will find the authenticate method which is probably one of the most important methods that we have inside of our code if we navigate back to our authenticated session controller you will see that inside the store function it is the first method that's being called now let's see what's going on right there right here you will see that it starts off by calling the ensure is not rate limited method when creating an authentication in larval you don't want the user to enter the wrong password over and over right you somehow need some kind of check on the number of requests that are being performed from the same ip address that is basically what raise limiting essentially is doing it will check the number of requests per unit time which is defined down below right here this is also called throttle now let's right click on our insurer is not rate limited and see what's happening right there the first thing it does is checking the number of attempts and it's passing in two parameters right here which is this throttle and the number of five keep in mind that it has an explanation mark right in front of it meaning that this should not be true the first parameter right here so this throttle is the number of requests that have been performed with a specific email address the second one so number five is the maximum number it can handle larval sets a default of five and i personally find it quite a lot now once a user has entered their password three times incorrectly the throw validation exception right here will be called and what it is saying right here is that the email is unable to handle a request for 60 seconds let's actually test it out let's navigate back to brave let's refresh the page let's add our actual email and let's add the wrong password so let's just enter something login that was number one number two one more time which is number three and it will not show the exception and three items it only shows it once you request it another time so let's do it one more time and let's click on login and right here you will see that we have a plus minus one minute it took me a while so there are only 38 seconds left before we can attempt it again i personally think that this is low as well i've seen sites that handle domains having a 15 minute block but you can simply play around with it by adding a higher rate limiter now let's navigate back to our code editor and let's open the authenticated session controller right below our authenticate method you will see that our request will be put inside the session and it has the regenerated method chained to it which means that it will generate a new session identifier which is needed once a user logs in again finally if a user is logged in correctly right here it will redirect you back to the forward slash dashboard endpoint now before we test this out in the browser let's actually add a dd right above our authenticate method with the request that we have this allows us to see what's going on behind the scenes let's navigate back to brave let's add our actual password let's click on login now let me actually zoom in a little bit right here you will see our request so let's open it let's open the parameters tab where there are three items inside our array the first one is our underscore token which is our hidden csrf token we have our email and we have my very secret password right here now there's also a session array right at the bottom right here let's open it we have our id we have a name we have our attributes so let's open it which is the underscore token that has been set inside our request right here we have our flash and previous which we don't need and a handle which is telling us that our session will be available for two hours now let's navigate back to the code editor and let's remove our die dump let's save it let's navigate back to rave refresh this page now let's continue on and right here we have been logged in now there's also a logout functionality like i've showed you before so let's click on it what this will do is going back to the destroy method right here once again it has a request that is being passed in it's just deleting the session token that we have now if we navigate back to brave and try to log in you'll see a remember me checkbox right here let's see how that works inside our users table you will find a column right here called remember underscore token this token makes sure that users stay logged in until they manually click on the log out button so let's navigate back to brave let's try to log in let's sell info darwinozar.com i have my password click on the remember me checkbox log in navigate back to visual studio code let's refresh our table and right here you will see that the remember token has been filled the last functionality that is available related to login is the forgot your password now let's log out one more time and it's getting kind of funny right now click on login instead of logging in let's click on forgot your password as you could see we've been redirected to the forgot password endpoint where it's asking us for an email for a reset link this page is being called from the password reset link controller that we have it's right here let's open it it has the create method once again with the forgot dash password blade now if you scroll down you will find a store method where the logic of our forgot password will happen now inside the validate method right here it is just validating one input field which is the email down below you'll find a new object called status which is equal to the password vasat that has a sent reset link method that will send an email with a token to the email that has been entered inside the input field or as you can see right here it will only send it to the email of our request if the status has been set to true so an email has been sent right here it will equal return back with a status or the input field with an error as you can see inside the ternary operator right here now once again let's test it out let's navigate back to the browser let's add our password right here let's click on email password reset link we have been prompted with a we have emote your password reset link so if we open mailtrap you will see a new reset password notification email which will expire in 60 minutes now it has a reset password button and once we click on this page we will be interacting with a different controller let's click on it and i'll show you afterwards what will happen let's click on reset password right here you will see that we have been redirected to the reset password endpoint which has a token or whatever attached to it now let's navigate back to the code editor where you will find a new controller called new password controller let's open it and let's see what's going on right here inside the create method you will see that it's returning a view to the reset password page where we're currently on but it's also adding an array to the endpoint of our entire request where we are currently on so which will basically be our underscore token and our email let's navigate back so the first part right here is our token then we have a question mark email which is info darwin.com this page will be handled from the store method once again where it's validating and i don't think that i need to explain it one more time but let's take a moment for a status variable or object right here it's interacting with the password facade and it's specifically using the reset method now what this method will do is attempting to reset the password of the user by the email the password and the password confirmation and the token that has been passed through if it can which mostly is because you only need to enter a password it will hash the password and create a new remember token of 60 characters now the last thing that we need to do is to navigate back to brave and change our password so let's add a new one click on reset password and as you can see our password has been reset alright enough to agree it's time to finally move on and change up some things in larval breeze i want to start off at a basic level and that's changing up the larval logo right here to my own logo as i've said in the beginning there is a component inside our application inside the components folder called application logo this component is being used throughout our entire application meaning that if we add our image right here it should be changed throughout our entire authentication scaffolding right here you can see an svg but don't worry this does not mean that you can't use a png or jpg i want to add a png right here because i want to show you how simple it is since the default is an svg i've got my logo on my desktop so what we can do is to store it inside the public folder so right here create a new folder inside our public folder called images let's right click on images and reveal it in finder all right let me go to the site now let's open it and i've got my logo right here and i want to drag it inside my images folder now since we're working with a png and not an svg we don't need the code right here so we can select it all and simply remove it what we are going to do is to create an img tab with a source of larval blade snippets we are going to call the asset function which has a pad of images forward slash logo.png let's also add the alt of application logo and i want to add a default width of let's say 100 pixels and let me close it off with a forward slash greater than sign let's actually align this on the line below which makes it a little bit easier all right now let's save it let's navigate back to the browser let's refresh this page the larval logo has been replaced with our own logo if we go to our forward slash register endpoint our image has been changed on the register page because it's using the same exact component alright on to the next thing on most web pages users have a username and an email so let's add a username to our user model migration and registration screen we need to start off by modifying our data layer so our migration in order to add it inside the fillable property of our model we do need to have the column first so i don't want to add it inside the current migration because we already have a user inside our database so what i want to do is to create a new migration that will add one column to our users table so let's open a new tab inside the cdli let's say php artisan make me a new migration called add underscore username underscore 2 underscore users underscore table plus also associated with the users table by saying double dash table is equal to users hit enter all right it has been created so let's open the last migration that we have inside the schema we're simply going to create a new table with a data type of string the column name will be in single quotes username and right after the parentheses we're going to chain the unique method to it because our username should be unique when a user wants to log in what we can do now is to save it inside the cli run php artisan migrate as you can see it has migrated the add username to users table let's open our users table let's refresh it and right here you will see a username column added we can actually fill the data right here so let's say code with diary and let's run it as you can see it has been updated now the real magic does not happen inside the database but it happens inside the controller instead of writing new logic we could simply modify the registered user controller so let's go back to our code let's go up let's open the registered user controller and we do need the store method right here what we need to do is to make sure that we validate our username inside the validate method right here so right after our name let's add a new key of username the value will be an array our username is required it is a string and it has a maximum amount of characters of 255. finally we do need to make it unique on a specific table so comma unique colon users now right after this line of code we do need to add a comma all right our error is gone right now now down here you will see that it's performing an elegant query so to create a new user so we need to modify it here as well well what we can do is to say well our username can be grabbed from the request username we haven't defined it yet but we will do it in a second before i actually forget it let's open the user model i tend to forget these small things a lot lately and right inside our property fillable right after the name we need to tell our database that username needs to be filled in once a user tries to register an account all right what's next well we do need an extra input field inside our view so let's navigate back now let's scroll down to our register.blade.php file and what we actually can do is duplicating the entire name block with the comment and let's paste it right below let's replace the comment with username we have a label which is not for the name anymore but for the username and the value is username as well save it let's navigate back refresh it and you will see our username right here it does need a little bit more margin at the top so what we can do is to add a class to our div of mt-4 now we have an input with a name of name so let's replace it with username the type is text and the name is username again and the value is username and before we actually test this out let's quickly navigate back to our controller so our register user controller above our validates let's add a dd of the request save it let's navigate back to brave let's refresh the page and let's create a fake account of test the username is test the email is test gmail.com it has a password let me quickly add it let's click on register we have our dd right here with a method of post which is alright so let's open the request parameters and right here you can see that the username has been passed through correctly with the value of test so what we can do right now is to navigate back remove our dd save it navigate back to brave refresh the page and as you can see our request has been sent right now let me zoom out let's verify it in mail trap verify our email and we have been sent to the dashboard endpoint now let's test it out in the database so let's open the users table let's run it again and as you can see our username has been filled in now the last step is modifying our login blades because we currently if we log out log in we're still not able to log in with our username because email is still visible right here so let's scroll down to our view open the login.blade.php we have a section for our email address right here which needs to be changed to username the label is not for email anymore but for our username and the value as well the id over input is username the type is not email but text and the name is username and i've almost forgot the value so let's say username as well save it let's navigate back and refresh it all right it has been changed to username we're not completely done yet since we need to tell our login request that we're dealing with a username rather than an email so for the last time let's navigate back to visual studio code let's scroll up and open our login request and let's start off with the rules method right here because we're returning our email and password now it's not email anymore but it's username it is required it is a string but it's not an email now if we save it and scroll down to the authenticate method you'll see that it's trying to attempt a authentication login with email and password now password is alright but email should be replaced with username copy it inside the validation exception it's sending back an odd fill with the email which should be once again replaced with username if we save it and let's actually close off all files because we are almost done right here navigate back to brave log in with our second account so test my password is dari1234 explanation mark login and as you can see right now we have logged in with our username and password this was it for this video if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button

Channel: Code With Dary

Views: 1,748

Keywords: laravel breeze menu routes and full mvc, laravel breeze tutorial first look, introduction to laravel breeze, laravel breeze api, laravel breeze step by step, what does laravel breeze do, laravel 8 authentication breeze, customize laravel breeze menus anf forms, laravel 8 breeze vs jetstream difference, how does laravel breeze works, laravel breeze for beginners, laravel breeze explained, laravel, laravel 8, learn laravel for beginners, learn laravel breeze

Id: APs8QwFxZBo

Length: 40min 38sec (2438 seconds)

Published: Mon Dec 06 2021