Laravel Jetstream Login with Email , Username or Phone Number Tutorial

hello Rion this is Yamin and in this tutorial I am going to show you how we can let a user login using either email username or phone in laravel Destiny and I will show you everything from the very beginning so first of all I've created fresh laravel project so let me just close this and let's go to our folder over here then we'll create a laravel project over here let's open a command prompt and let's say here our project name will be laravel login let's say let's press enter and it will create a laravel project for us so I'll just fast forward the video for now so here you can see our project creation is complete and here you can see the project folder Lara will log in so right now let's go to our project directory so here we are going to say CD laravel login So currently in the we are in the project actually so let's run our project ESP artisan serve so let's go to our browser let's say over here this and this is the first created laravel project so right now let's go and add Justin authentication over here so for it we will go to opposite directory again and let's open another command from here and right now we'll install Justin in our project so we are going to say over here composer required larave Hill slash jet stream press enter and it will install Justin in our laurable project so I'll again fast forward the video so Justin installation is complete so right now we'll install Library so for it we are going to save PHP artisan stream clone install Live Wire and we'll again press enter so here you can see Library installation is complete so right now we'll open our project using Sublime Text or 4D result so here we'll go to our project directly and our project name was laravel login which is this sum so select folder and let me just close the previous project so here we'll first directly so right now first of all in our project we will directly go to our here this database folder then we'll go to migration and then we will go to the users folder or user table over here so here we want to let the user login using either username email or phone number so for it us we'll use this name as a username so since the user will use name for login so the name should be unique so we will add unique before the name and we also want the user to be able to login using phone number so we'll also add phone number over here so stop email we are going to server here phone so we have name email and phone column in our user stable so right now let's save this and we'll go back to our Command Prompt over here and this time we are going to say mpm install and we'll say npm run build after that we'll see over here PSP Edition my gate so this will make it out user table in the database so let's over here this Paterson my gate we haven't created any database but we still say can see over here PSP Artisan my gate we let our Command Prompt created database for us so we'll press enter is version migrate and it will say the database login does not exist would you like to create it we'll say yes press enter and migration is complete so right now let's go to our exam this is my admin and we will go to our laravel login database so here you can see login it's the database so and if you go to the user table here you can see name email phone number field over here so right now if we just run our project again and here you can see we have the login and registration field so if you click registration so here you can see we have name email and password fill over here so what we'll do is that we will add phone number fill over here so for it we'll go to our project folder and then we will go to our resource views and inside views we will go to auth and inside auth we have register.play.php and over here let me just copy the email field from here and inside the register.blade.ph will paste the copy the email field and paste it over here and instead of email we are going to server here phone so here everything will be phone and the type over here instead of email the type will be text or let's just server here type will be number and require autocomplete okay we'll remove this auto complete username so yeah so right now if you save it then if we now refresh here we have one more extra field for phone number so right now in order to let the user insert the phone number in the database table we need to make some changes so here first of all we will go to app the inside app we have action and inside action folder we have 45 folder and inside 40 by folder here you can see create new user dot PHP and over here first of all in the validation let's add the phone number field so let me just copy the name over here and let's paste it over here and here stop name will say here phone and here since we are using name and phone number for logins so we need to make that unique so here let me just copy this from the email from here so let me just copy this and we'll paste it over here for phone like this and let's also do the same for the name as well and after this will go down and over here you can see email equal to name email password we are actually from here we are actually inserting data in that address table so here we are going to say phone equal to input phone so right now we also need to do one more thing that is uh we need to go to app then we need to go to models and inside model here you can see user.php so here we also required to add the phone number field over here protected fieldable so we need to add phone over here let's save it so right now let's go and try to register with the phone number let's just refresh here and let's give a name let's keep a random email let's give a random phone number let's give a password and confirm password and if you click register we should be able to successfully register okay single port stream password okay I need to combine the model so let's just keep a come about here let's save it again then let's refresh here okay we are about to successfully log in so let's check our database table let's refresh our user table and here you can see name email phone number okay everything is fine let me just zoom in so that you can see here you can see name email and phone number to it so we are able to successfully insert phone for registration so right now we need to do is that being able to login using both email phone and username so for it we need to modify our login page so let's go back to our code and we'll go to views resource views and or after that we'll go to login.blade.php and over here you can see that level for email so here over here you can see value over here value email which is these fellow so instead of this one we are going to say email slash username slash phone we can just say it like this save then refresh here you can see email username or phone so right now we need to do a few more changes and that is here input type cannot be email we'll say over here text and hello it will be let's say over here value ID it will be let's say login name let's just say over here login name so here the value will be login name and name will be login name as well login name and let's remove this Auto Complete auto focus username okay so right now let's save this so after this if you want to login using either email username or phone number we need to go to our app then or not app we just first of all we need to go to the config folder and inside config here you can see 45 dot PHP so if we go down inside the 45 dot PHP here we can see username equal to email so we cannot see over here email since we dropped only on to login using email so here we are going to say login name which we just mentioned over here in the name value over here you can see login name we'll just mention it over here and after this we need to make a changes in a different file so here we need to go to apps then provide us and inside provide us we have jstim service providers so we need to go to Justin service provider and here we have a public function boot so if we want to add any condition for login then we need to make changes inside this jstream service provider so first of all let me just go to the gisting documentation so let's over here laravel chest in documentation and we'll go over here Lara will adjusting documentation and from here we will directly go to these features and here you can see authentication we'll just click over here and then if we go down uh here you can see customizing the authentication process so here it says that if you want to make any changes for login then you need to make some changes in the system service provider so here it is giving us some code that we need to paste inside the public function boot which is this function here you can see so after this we need to paste some code so here from here I'll just copy this code from here 45 to this semicolone so I'll just copy this and paste it after this delete user using whatever so we'll paste it over here and here you can see that dollar user equal to user email so it will let us the user it will let the user login using email but we also want to add phone on name right so for it what we'll do is that let's just press the enter over here what we do is that we need to add a few more condition let me just copy it and here you can see request email in stop email we need to server here login name okay let me copy this again and after this we'll give this Arrow sign then we'll show over here or fire wh W will be capital and here instead of email we are going to server here name then if we just copy this Arrow sign over over here and we will say over here stop name will say here phone and we'll put it like this then we'll add this fast so right now let me just explain so over here what we are doing is that first of all whatever the user is writing over here it will check whether it is email name or phone it will check if it's email if not it will come over here check if it's phone or if it's username or if it's phone if it's matches then it will come to this if condition and check if the password is okay or not if password is okay then it will send the user to the dashboard and since we are using 45 authentication so we need to add this four line over here you can see user model request packet hash and this laravel 45 at the top of our adjusting service provider so we'll just copy this then we'll paste it over here so right now we will be able to login using name email or phone number so let's just refresh over here I hope I didn't miss anything and let's first try to login using email the Yamin at the top gmail.com which was the email and let's give the password click login okay where I want to successfully login using email now let's try with our name or username so the name was Yamin so let's say here Yamin let's give the password then let's click login okay the login using username successful so now we will try to login using phone number so let me just copy the phone number from here copy it and we'll paste it over here then let's give the password click login so we are able to successfully login using phone number as well so this is how you can make or you can let the user login using either phone email or username in laravel Justin I hope this video was easy for you thanks for watching and if you want more tutorial like this then make sure to subscribe this Channel and I'll see you in the next tutorial

Channel: Web Tech Knowledge

Views: 1,968

Keywords: laravel jetstream, laravel, login with email or phone number laravel, laravel login with username, laravel login with username or email, laravel login, laravel login and registration, laravel login with username instead of email, login with phone number in laravel, laravel jetstream customize login, laravel tutorial, laravel jetstream tutorial, how to make login system with phone number in laravel, laravel jetstream login with email phone or username

Id: g8eoTYQG288

Length: 15min 53sec (953 seconds)

Published: Mon Mar 27 2023