[Live Coding Session] Discovering Laravel Breeze and verify updated email addresses

hello everybody welcome back again to another live coding session i had some audio problems with the last stream so let's see if this goes any better um let's see so last week taylor surprised us with a new laravel package which is called laravel breeze it's a blade and tailwind authentication scaffolding package so we already have jet stream and fortify uh in the laravel 8 release but now we also have laravel breeze which is kind of a successor to laravel ui laravel ui was a like a bootstrap scaffolding package which also had some presets coming from the community so there was a tailwind version of laravel ui but now we have this laravel breeze thing and um i thought it would be cool to check it out see what it does see how it works so let's set up a new laravel project let's open the terminal and let's use the laravel installer installer to create a new laravel project so let's call this one laravel breeze there it goes it's really fast with a new composer too so that's fine let's see what did it install scroll to the top laravel 8.4.1 all right application ready build something amazing let's do that so let's go into this directory laravel breeze and to start let's init a kit repository so we can track the changes let's add everything commit with a message first commit so that's it let's open this project in visual code because that's my main editor so here we have it a default level 8 application with a user model with a web routes file so yeah what you expect from a default level 8 application and let's install this breeze package so composer require laravel breeze and of course this is really quick as well so no additional dependencies just laravel breeze and let's find out which artisan commands it comes with so as it seems we only have this breeze install command which installs the controllers and the resources and that's yeah that's just what we want so let's grab that one and i have a little shortcut for artisan which is called art which is just uh php artisan breeze install hit enter and there it is brief scaffolding installed and we need to run npm install and run dev to build your assets so yeah let's take a quick look in the application itself so as you might expect it installed a bunch of controllers you remember these from the previous package new password controller password reset link controller verify email controller it added a form request login request with some rate limiting so that's that it added something to the route service provider it added this path so this path is used to redirect users after they successfully logged in they get redirected to the dashboard route it added some view components which are the layouts so let's dig into the fuse folder we have apparently a app layout and a guest layout so guest is used for example for the login form so we here we have our login form form with the email address and the password the remember me checkbox the login button so this is just a plain html styled with tailwind css it uses laravel blade components which got introduced in level 7 so check them out if you already and if you're already used using them you probably [Music] discovered this uh this x um what do we call it syntax so yeah we have a bunch of a few files we have some layouts a few components we have a new auth routes file so this is where all the routes are listed and this file gets included in the web file so this web file has a new dashboard route and it includes all the routes from the auth file and i think this is the best way to do it because if you might remember in the previous package in the laravel ui package there was a there was a method i think on the auth facade something like this auth and then routes which was actually a method on the route service provider i think somewhere under the hood i'm not sure um but any and you you could configure it by passing in an array um so you could do something like register false which yeah it works fine but it's this is much better right much more clear what's happening so i think that's a big improvement and then we have a bunch of tests feature tests registration test authentication test so the laravel ui package didn't have any feature tests at least not included there was a community package i think for uh scaffolding the tests but this is this is great so we have first party tests as well so in the composer file it only added the laravel breeze dependency of course and then we have our package.json file for the front-end assets so here we already have two wind ui which is which is nice of course there are still winds laravel mix which i think is included by default in the laravel 8 app and we have alpine so there is a bit of javascript magic going on um if you don't know alpine is created by the same uh guy as laraphel livewire it's a it's like a mix between jquery and view but it's very minimal so it has a few like syntax but you don't you don't need the full view library and it does it has some great helper helper method and syntax so yeah let's not [Music] let's not go in too deep into alpine but it's included we have a default tailwind configuration file with the perching setup we have a font family added and of course here's the layer of or the tailwind ui requirement as well and here's the webpack mix file so to set up the the javascript and the post css with the tailwind configuration so let's dig into the javascript and css first the css it's just plain tailwind setup no metric going on and in the app.js file we have the default bootstrap file yep and it only requires alpine so that's that let's see we need a database right we want to store some users so let's go to the environment file and i already set up a database i call it breeze it's completely empty so let's update the environment configuration file the database is breeze and my username is homestead and the password is secret and while we're at it let's also update the mail configuration file because i use milhock which is this little tool um it traps uh mail locally so uh you might you're might familiar with mailtrap which is an online service it's a it's a smtp testing service mailhawk is something similar but then locally on your machine so to use mailhawk we need to update the host to localhost the port is 1025 and we need to give it the from email address this is a this is a requirement so let's go with um i think the default is hello at example.com yep so let's see if this works i'm not completely sure so tinker and then let's grab the mail config file from hello example yeah this works yeah this is fine this should work so let's install the front-end assets so i don't use npm but i use yarn which is kind of the same thing uh yarn install i don't think it does it matters anymore if you use yarn or mpm yarn was a bit quicker in the past but i think npm has catched up now they are both slow so that's done and then run yarn watch you could run yarn death but i'm more fan of yarn watch so it updates the assets when your code changes it's installing some additional dependencies for the few templates and tailwind so in the meantime let's migrate our database i will open a new terminal screen and artisan migrate it migrated three tables users password and failed jobs let's see let's refresh it yeah there it is and it also of course migrated the migrations table so i can't make this uh panel on the left any bigger but you have to trust me um those four tables are created so here it is still installing the dependencies so before i forget i want new users to verify their email address and laravel has support for that built-in so let's move to the documentation and let's see to get started verify that your user model implements the must verify email contract and then there's a little code example so we need this part right here implements must verify email copy as of level 8 there is now a models folder which i love so we've implemented that interface let's save it we can close this environment file webpack we can close this as well so let's open the terminal again so it failed but it somehow always does that first time you run it at least with yarn so i'll just run it again yarn watch always feels like magic this yarn npm webpack stuff i just always hope it just keeps on working so let's go to firefox so yeah the assets are compiled so let's open uh our new laravel uh application here it is let's make that a bit bigger for you so we have the default welcome page with links to the documentation and lara cast you name it and in the top right you will find a login and a register button so let's create a new account this already looks really great password all right here we go register do you want to say yeah sure save it so here we are logged in and well let's uh let's check out the database users yeah that's me so here's my name email password my email is not verified yet so why is that it's because we need a middleware for that so back into the laravel documentation there is a section called protecting routes so we need this ensure email is verified middleware [Music] so we can use this verified string if an unverified user attempts to access a route they will automatically be redirected to the verification noticed notice route right so yeah let's add it to the to the dashboard route in code go to the web authenticate web routes file so we already have this auth middleware let's add verified as well save it and then hit [Music] refresh thanks for signing up so um it already sent a verification mail i guess let's see let's open mailhawk and there it is from laravel probably from hello example.com we have a new email verify email address hello please click the button below to verify your email address so let's do that and we are in the dashboard again without a warning so let's refresh the database and now we have a timestamp here in the email verified column so to prove to you that this really works let's remove that timestamp let's refresh the page and we are back in this recent uh popup so let's hit it again a new verification link has been sent let's see in mailhawk go to the inbox and yeah they're not lying we've got a new email so yeah this works uh this works fine it verifies registered users we have that uh verified middleware working so one thing i want to show you is how to verify email addresses that get updated by a user so for now i want to add a little settings tab here in the navigation [Music] where a user can update its email address so let's open the dashboard we need to add it to the app layout really well we can close the css and javascript folders here's the app layout and as it seems we have a layout navigation with the application logo the drop down and here is that dashboard link so what i want to do is add another button or add another navigation link to a settings route settings yeah so back in the web routes file let's add settings route settings settings settings so yeah we of course we need a settings view as well so i'm just gonna duplicate this dashboard layout duplicate and name it settings update the title settings and then instead of you are logged in let's um let's give it another message maybe something like this is where you can update your user settings right so now we've added the route we have a few for the route and we have a navigation link at the top so let's refresh the page and here it is settings so for now i only want to be able to update the email address so in the settings view let's add a form here and i'm gonna be lazy i'm gonna copy it over from the registration view so let's grab the complete form paste it into the settings file fix the indentation so we don't need a name right we just want the email address we don't need a password we don't need to confirm it and instead of register i want this button to be labeled update and if you submit this form the action should not be registered but settings so let's do that in the web file let's add a route a post route settings function we want the request and with that request we are going to update the user but first we're going to validate it so request validate and then give it the rules so the only thing we want to validate is the email it's required it should be an email and we want it to be unique so rule unique um the first argument is the table if i remember correctly yeah it's the table and the second one is the email right so this is the email input element i want the value to be the current email so let's give this settings view a user object so in the route file view [Music] we give data with an array user is the current user from the request right so now we can let's make a bit of room the value is the current email of the authenticated user right so let's refresh that settings page and here we have it a form with an email field where the current value is my current email address and an update button so if i hit update it should give a validation error because this email address is not unique anymore because i already used it so let's see if it really works hit update and yeah we have a validation error the email has already been taken which is correct say i post another email address then we want to update the current user so user equals request user and then we're gonna update that user with the email address from the request so request input email and when that's done we're just gonna redirect back so that's it for now so let's see if it works if i change this email address to let's say info and i hit update no validation error and apparently the email address has been updated so let's take a quick look in the database yeah it has been updated so um i'm gonna change it back to my previous email address update and this works fine but this is uh where i see a problem new email addresses when a user is trying to register needs to be validated but if you update your email address you don't have to verify it so if you make a mistake yeah you make a typing error or maybe you you fill in an email address that that don't belong to you it doesn't get verified so i wrote a little package to support that you can find it on github i will post the link in the comment section later on anyway this package is called laravel verify new email which brings support for verifying emails email addresses that gets updated by users so let's install this package for your composer let's grab this line in here let's require it and then we need to publish the database migration because we need an additional table a configuration file and an email view so let's do that here is the migration configuration and view and let's migrate the database before we forget it so now we have a new pending user emails table let's go back to the documentation where is it here firefox so um to use this package we need to add a trade to the user uh model so let's start with that the trade is called must verify new email let's open the user model and add trade right here must verify new email import the class that's it and then instead of updating the model itself we need this new email method so there are a bunch of methods that come with the package and the first one is probably the most important one that's the method that you call when you want to update an email address so let's go back into our web web route file instead of updating the model directly like this we call the new email method and we want to call it of course with the request input so let's replace this with the request input email let's remove the update method yeah so let's see uh what this does i will clean up mailhawk so we have an empty fresh mailbox let's refresh the settings page and say i want to replace this email address with info so i hit update and then it's not updated which is a good thing let's open mailhawk and there is a new there's a new email to verify info i will make this a bit bigger like this verify new email let's open it and there it is verification email let's uh let's verify let's click this button and we get a wide screen which i experienced before i will get to that in a minute but let's take a look at the database what happened uh no let's refresh the settings page i'm sorry so previously my email was my name and now i refresh the settings page and now it is updated to info so let's do that again i'm gonna refr uh delete the message in mailhawk i will show you the database i forgot to show you so now it is info at we've got a new pending user emails table which is empty for now let's update my email address update it's not updated yet so it's still info but then there is a new record in the pending user user emails table which has a reference to the user row the user model which is me and to the new email address and the package also has a method called cat pending email so it's a bit weird that you update the email in the settings page it doesn't update it doesn't give you an error there's no validation error we want to give a bit of feedback to this user and we can do that with that method method so let's go to the settings blade view let's edit if if the user has a pending email let's give it a notification [Music] we've sent a notification email to and then to the pending email let's refresh the page so here you have here you have it we've sent a notification email so now it's obviously uh so now it's clear to the user that uh it should do something to activate this email address and i've discovered before this a little bug going on i don't know if it's a bug or a configuration error but in the verify new email configuration file you can specify the path to redirect the user to when it's verified its email address so previously in in older versions of laravel this path was called home but with this new laravel breeze package it's called dashboard so i will update this dashboard and there's also a configuration setting to to lock in the user after it has verified its email address but this user is already logged in so let's uh change this to false for now i think the problem is in here not in here but i will need to debug that a bit so we've got uh we've got our redirect to the dashboard let's go back to our settings page we send a notification email i can preview that we didn't update the email address yet in the users table we've got this pending user email row with the new email address for the first user model and then in mailhack right here we have that new email verification link please click the button so let's do that and yeah now we are at dashboard page if we go to the settings page the email address is updated and the notification for the verification notification is gone so yeah this works fine now every user needs to up need to verify its updated email address as well so verification for both new users and existing users to prevent type errors wrong email addresses you name it all saves us a bit of time so let's do a quick recap is this new laravel breeze package which was released last week it is something different than laravel jet stream and fortify because it doesn't use live fire it doesn't use inertia it it's actually more like laravel ui like it was uh before except this has tailwind styling which i prefer um i'm much more fan of tailwind than i am of bootstrap what i also like is the use of dedicated routes so there is a dedicated auth routes file which gets included in the web file right here which is a really simple way to include more routes and don't make a mess of your web routes file this is much better than the previous routes method on the service provider or on the auth facade this is a yeah this this is uh this is really better i also like the use of blade components so there are a bunch of components maybe 10 or 12 or something like that so there is a auth card component there's a button component an input component to clean up the blade files a bit so yeah this looks really clean to me it also uses laravel blade components for the layout instead of sections i think this is uh really neat really clean this so laravel breeze is kind of a successor to level ui maybe you can still use laravel ui in level 8 i don't know i didn't try it i didn't try a laravel jet stream either because i didn't start a new app with level 8 so that's a thing i think a few people were confused about this is this is a starter kit so you don't you don't want to move from laravel ui to laravel breeze it doesn't make sense if you've used laravel ui in the past and you've upgraded from like laravel 6 or 7 to laravel 8 you can still use laravel ui you don't have to upgrade to breeze you only use breeze if you're starting a new laravel project and the same i think the same might be true for jet stream but jet stream is much more it has more features than laravel breeze because it also has that team's feature with invites and codes and all that stuff maybe if you if you want to integrate that maybe you can move from ui to jet stream i'm not sure but if you are using ui don't upgrade to breeze it uh it doesn't make sense but definitely use brief on a new laravel project because it's really great it's clean it's got tests which i which i love it's got tailwind blade components um yeah i think that's it for today so uh thanks for watching again um i'm sorry about the audio problems of the previous stream um [Music] i will post a comment below with the links to the repository to the documentation you name it and hopefully i will see you another time another maybe i will do a little jet stream live session to discover a jet stream i don't know but stay safe and i will see you next time bye

Channel: Pascal Baljet

Views: 1,634

Keywords: Laravel, MySQL, PHP, Search, Eloquent ORM

Id: oE7EzIedRAM

Length: 43min 8sec (2588 seconds)

Published: Thu Nov 12 2020