Laravel Breeze Login with email or username

Hello friends welcome so here we are in the Twitter and the signing we can choose the sign in with Google with the table or the phone or email or the username from or account and now I want to customize the brace package from darnold so when we login to login either with a username or email so let's get started from scratch I'm going to create a 11 project and let's say a little bit new custom Breeze and we need to install also the breeze here so in the driver documentation we can run the composer require database slash Breeze so first we need to navigate in the custom Breeze and let's paste that in then say PHP Breeze install okay I'm going to choose the plate and let's say yes for best testing and then we need to and the PHP address on my grid npm installed and npm and I'm going to run the npm install and npm Rand Dev because the migration number and after the um with the change the user migration and add the username field on Pitt so let's run the npm will start first okay well then the FP and PM run death but first i'm going to open this project with PHP storm okay and then let's then run the mpa run Dev okay let's open the project here and I'm going to zoom it like this and now let's add the username field also when we register so for that in the PHP store I'm going to open first the migration so let's search for users and I'm going to copy the image because also the username is going to be string and unique and let's say username close this let's open also the user mode and in the protected fillable add the username here let's close and now we need to modify the register blade first I'm going to open the out ER dot PHP in the routes and for the ridge so we can see we have this registered user controller and let's open that we have the create method which return in the author register and let's open this plate but before that I'm going to add also the validation for the username in here and let's say username is going to be required string not email okay Max and unique to the user and let's add in here when we create add also the username good let's close this and now let's open the register blade I'm going to close this one as well and here we have the resistor blade I'm going to copy the email field here input and paste it right here I'm going to say a username and let's select all the email and replace with username also in the value it's going to be username with capital type is in the bit text and I'm going to remove all the required we have here just to test the validation first and let's come here we have the username if I say register yeah we have the username if it is required so let's register with the zone and for the username I'm going to say oh and one more thing we need to run the migration now because we change so for that let's open the dot EnV file and here we have the database name which is based on the project name but I'm going to remove because I have a breeze database name and now let's run the PHP or design migrate and we're going to say fresh here and now let's say John again and John though for the username John email or John Doe dot com for password for the email and for the password and without the password and also password and we are logged in good log out and let's say login again with John Doe and add the password Now log out and let's work with that I have also the username ability to login and let's open the path inside the routes for the login we have the authenticate session controller and this is going to return the alpha login so we need to change that to add also the probability for the username and let's open that so login blade and here I'm going to say email or username and let's select all the image I'm going to change the name or the input and I'm going to say input type here in the value I'm going to say emailer user name like this the type is going to be text and here for the errors I'm going to say let's say first I'm going to add the email and also the username because we are going to validate either the email or the username based on the choice and with that we are going to work on the controller here on the store we don't have any logic the logic is inside this login request as you can see we is calling here the request and the authenticate method so let's open this login request we has the function authorized written in true then we have the rules for the email okay then the authenticate method good now originally the form request would look using the email but we change data input type and the authentication method does not know that the request variable so essentially we've got to figure out if we are dealing with a username or email and then only validate or email or the username value slot both of them so for that what I'm going to do I'm going to add the protested property here set scroll up and let's say protected dollar sign input type and now I'm going to do other special form request function here name to prepare for validation so at the end and without that function protect it function prepare for validation and now with this will set up some data before we validate this method and here now I'm going to say dollar sign this input type we created is it available with I'm going to call the filter bar and here I'm with that we are this input and input type we are inside the request and now I'm going to check this if is the valid email I'm going to say filter validate email and if that is okay the default is going to be email otherwise it's going to be the username like this so what this does is checking for the user inputed an email or some other string and if it's email we say he made it otherwise with say uh use the username if the user input in the input type string okay now also we need to add the email or the username variable in the request array for that and we'll just call this immerse and I'm going to merge the dollar sign this input type property with dollar sign of this input input type okay input the app like this so this one is adding email or the username variable in the request array by default we have the input type but we need email or username so it's inserted here and now let's scroll up to the validation and here we have the email required string and email also we need to add here the if this exist or not and why we don't have here so if this exists on the users and on the email but it's not going to be required always it's going to be required only if we don't have the username because if we have username we are going to log in with username so for that I'm going to use the required without username and now let's copy this and paste down there and save the username now is going to be required without the email which means the username is going to be required only if we don't have the email and the username is already the best email and also we're going to check if we have that in the users username like this then on the authenticate instead of adding the email we need to add this input type here so which means either the email or the password or the username sorry and also here Pro validation dollar sign this input type and I think we are okay now let's come here and refresh let's say login and let's remove that so let's open the login blade again and I don't want the required and also the required in here let's come and refresh let's say login and now the image field is required when the username is not present and the username field is required when the email is not present let's add something here login now the selected username is invalid so it's got the validate the string here for the username but for the email if we type email here so let's say so I think is going to validate the selected email is valid okay if we type the correct John though and invalid the password login yeah this condition does not master our records also if I say John at dot com and some fake password it's not now if I add the correct password login we are logged in very good let's log out and let's login with a username by saying Joel though and the password and let's say login yeah we are logged in very good so here is how we can use the email or username in here the login with laravel Breeze that's it about this video friends I hope you enjoy and see you in the next one all the best thank you very much

Channel: Code With Tony

Views: 7,541

Keywords: laravel 10, laravel tut, laravel tutorial, laravel auth, laravel breeze, laravel custom auth, laravel customize authentication, laravel custom breeze, laravel tutorial for beginners, web dev, vuejs, laravel authentication system, laravel 10 tutorial, laravel customize breeze, laravel custom login, laravel login with username, username

Id: KLfhOThb4sQ

Length: 15min 32sec (932 seconds)

Published: Sat Feb 04 2023