Laravel OTP Login - Laravel 9 OTP Login

[Music] [Applause] [Music] hello and welcome to tech tool india in this video i am going to explain you about login with otp in laravel 9. to get started with this you need to have a laravel 9 installed in your local in order to know how you can install laravel 9 you can watch a video the link of video is given to description and i have also installed authentication package laravel ui in order to know how you can make login and registration by using laravel ui package you can watch the video the video link is given in description so let's get started with this if you install laravel authentication scaffolding you will get this register and login link in register in the last video we have did we have used the username in order to log in with the system now what we can do as we are taking name username and email address we in order to have that otp verification we need to register a user with the mobile number in order to send the one-time password before moving further in the video if you're coming to the channel for the very first time you subscribe our channel to never miss any video on a laravel so let's get started in order to add any new field in the users table what we need to do we need to create a migration file to add the user state mobile number in your users table right now if you see this users table we don't have any mobile number in the database so let's go ahead and create a migration file in order to create a migration file what we can do we can run a command php artisan make migration and the name of migration is add mobile number in use this table right so in this way it will create a migration to add a mobile number in users table in order to see where your migration file has been created you need to go into a database folder in that we have a migrations folder and there your file has been created if you see the file you will get two function up and down in both the function you can write you know add a column and drop a column so in order to add a column what i want i just want to add field let's say string and the name of the field is you mobile number and this can be a nullable field and i want this to be after username right so this will create a mobile add a mobile number column in the table after username right let's go ahead and in the drop if i drop this particular migration what it does drop column and the name of column would be mobile number the same which we are adding right so that's it let's go ahead and run this migration in order to run a migration we need to run a command php addition migrate as soon as you run this command you see this is migrating and then migrated so this has been migrated let's go ahead and open our database and see if this field has been reflected here or not let's refresh this as you see now after the username we have this mobile number field present in a users table so the next thing we which we need to do in the register we need to have a mobile number field as well so here let's go into the code open the resource file views in the auth we have a register.blade.php just after the username let's add another field which is mobile number right so copy this and i'll paste it here instead of username i'm going to call it mobile number correct so it will be a mobile number right so we have this additional field here let's give it a refresh and then you'll see we have mobile number i just need to change a little bit here so that it looks good i have given it mobile number right you can see we have a mobile number field as well now what we need to change we need to go into register controller and changed in auth we have a register controller with the username what we require we require mobile number here right so we have a mobile number in the validation as well with the username we require a mobile number validation so that it it is a required field for registration cool so we have this here the very next thing which we need to do because it's a mass assigning the data we need to have a fillable property in the users model let's open this model use this model as soon as you open this model you'll see there is a fillable array so it's us allowing the name username email and password with this we need to have our mobile number field as well so we have updated our blade controller and the model let's go ahead refresh this page and another user we need to register here and i just giving any random mobile number right i'm just giving a random email address and in a password i'm going to use a random password so let's register it as you see we are we have successfully registered here so now if i go to database and see the data here let's refresh this you see in a mobile number column we have this mobile number of course you can add some validation while registering like it should be a maximum of 10 here instead of 255 it should be a 10 digit only right let's log out now if you see the login function which we have we have with the username and password so it is going to work because username login we already made in the last video now what we need to do we need to have another login function which use the otp verification and based on that otp in user can login in our system so to do that what we need to do first we need to create a user verification model and a table which holds the which will hold otp and based on that we will verify our users right so for that we need to create a model with the migration let's run this command to make model with the migration php artisan make model will give the name of model as a verification code because it will hold the verification and just pass the dash m and it will create a model with the migration right so as soon as you do this you'll see we have in app models we have verification code model right and then we have our database migrations and this new migration file right so we have created our model as well as migrations so in the verification code stable what we need to do we need to have a user id big integer and it will be a user id so we'll have a user id column the next thing which we require in this table will be our otp so to hold otp we need a string which will name as otp and that's it uh the next thing which we require expire add right so which will tell us when our otp has been expired correct this is how we can use our table this just hold a user id otp and then when that otp will expire cool so let's save this and in our verification code table we need to have this fillable property in order to define that fillable property we need to have a protected variable which in which will be fillable and that will accept an array which will be our user id column name of the table the user id and otp as well as expire set the name of the field is expire at let's run the migration as soon as you run this migration migrate so there is some error in a migration let's see so instead of times times we need to have this timestamp that and mark this field as an enable field so that it will not give this error right let's clear the command and run this php addition migrate now if you see the migration has been successfully created so the catch here is you need to have this timestamp and the name of the field and this should be a label right so let's go in our database and refresh this now if you see we have this verification codes here and if you see the structure we have a user id otp expire set now we have our database and models ready the next thing which we need to have we need to create a controller another controller which will handle our login with otp system right in order to create a new controller i need to write a php attention make command make controller and then in the controller the name of the controller auth otp controller the name of controller would be r30p controller right so the controller has been created let's open the controller in the app http controllers and then we have this controller right so now the next thing which we need to do is open our roots file in that we have to register our roots in order to load the otp login page right to do that what i'm going to do the very first thing here i'll create a group i'll just name this as a controller and in the controller i'll pass or i just need to pass the class of this controller auth otp controller and this will be a class and i'll group this right i'll group this to so that we can access all the function of that particular controller so we have the group now i'll just create a simple get root which will hold slash otp slash login and then the next thing which we need to pass here is to the name of function the name of function would be login simple right that's it i can give it a name the name of this controller otp dot login right so this will written our otp login page it will return the view of otp login page cool name of function would be login and it will not accept anything it just written a view file in order to written a view file we need to have a view file so i'm just going ahead and in the resources folder we use auth i'll create a new file here and name is otp login dot blade dot php correct and what i'm going to do here i'm just simply copying everything from login.blade.php to the otp login.blade.php the things which i am going to change here instead of login i will see otp login right and instead of this root route i'm going to give another route here later just after this and instead of username i'll call it i require a mobile number in order to generate otp and instead of this i'll name it mobile number so that we can have a mobile number to generate the otp right here as well instead of username i just paste everywhere a mobile number as we don't require a password so i'll just give it back i will not give any option of remember me just remove this it will have a login button and then i'm just giving this link to instead of forget password i'll call it login with username right if it if this wants to log in with the username it will go to the login correct so just here and on the login page what i need to have i need to have a link which will see which will simply say login with otp login with otp right in order to give a link here i will give it a login dot what we have given the name for this let's see we have given otp dot login right so we'll call this otp dot login cool and in the controller we'll written here a view file written view in the view we will have art dot otp login cool so we have all set let's go into the browser refresh this page you'll see there is a link login with otp if you click on this you redirect it to the page which holds this otp login in order to get this otp you need to have your mobile number let's little bit adjust the language here instead of login generate otp and instead and here as a placeholder we need to a placeholder and enter your registered mobile number now in order to generate ep we need to have another function call this function this would be a post method and it will a generate function instead of login we'll call otp.generate create this function in a controller so here we'll call it generate otp and to generate the otp what we need to have we need to have a function called generate right and this will be a request accept the form request data so it has a request now the very first thing we need to do here is to validate right validate data in order to validate the data what we can simply write the request and then validate and inside rules what we require we require a mobile number field which should be there and what kind of validation it will it will be a first thing will be it will a required field the next thing will be it should exist and the table name which tables uses table and the column name will be again the mobile number so this will make sure the only registered number should generate otp it will not pass the unregistered number so that's our first thing so it will validate the data the second thing would be generate an otp in order to generate otp what we need to make sure first let's create another function here name generate otp right and here it will only accept the mobile number and based on that it will do written a generated otp so the first thing it will make sure user does not have any existing otp the user will be need to have our user model where right where mobile number should be the given mobile number and the first data call it our user right and the next thing here in the verification code would be user id right and the user will check if there is any verification code or call it latest the latest code it will it will fetch the latest code right if any user has any verification code in our table it will give the latest record out of those and in the latest record what we need to check we need to take a current time we need to make sure one thing here while generating otp if any user has already requested an otp so it will not expire for next 10 minutes in within the 10 minute if the user is requesting again so it should send the same otp in order and avoid generating any new otp so in order to do that what we what we'll do we'll just fetch the latest verification code if the verification code expired time is yet to come then we will return the same verification code otherwise what we'll do will generate a new verification code got it so we'll take the current time in order to take the current time i'm just going to use this carbon now so it will take the current time and what it will do if the verification code if the verification code and if there is a verification code found and we'll check is before right so the current time is before the expiring time then we will just return the same verification code right written the verification code otherwise what we need to do so in order to create a new otp what we need to do we need to have that verification code model and the in that model we'll call it create and then we'll pass an array and just return this in that array what will be there the first thing will be user id the user id will be the user's id and the next thing will be otp right so the otp will be a random of otp will be generated for this and then will have a expire at right will have a expire at column which will be again carbon now and then add minutes so it will add 10 minutes from the current time cool so it will generate a new otp from here so let's call it verification code and this will pass generally to tp and request of mobile number right so this will generate a verification code for us the next thing you can do here is to send an sms with the verification code otp but in this tutorial i am not going to integrate any sms gateway to send this otp what i'm going to do this here is to flash the otp on the screen so that you can enter the same otp and verify that right so what we'll do return with otp written with otp correct so in order to do that we need require otp verifications key right so for that what i'll do i will just create a new file inside the auth folder call it otp verification dot blade dot php right in that what i'll do i'll just copy the same thing you know otp login blade paste it here and now i'll just change few thing here right so the very first thing i'll change here instead of mobile number it should be otp right and then again everywhere we have a mobile number we should have otp and enter one time password enter otp right so we will have this and in here we'll say login let's save this and in otp login we need to give this form a root action right in the action what will pass will give the root of otp dot generate so we'll copy this otp root and then give it in the form right so we have this generate form which will generate our otp and in the function we need to written so we have redirected on the verification screen with the success message which holds the otp so in the otp verification what we need to do here in the card body let's refresh again paste the mobile number as you can see we have generated an otp and the otp is 371782 so we are flashing the data here just because we are not sending any sms real sms you can use any sms apis to send the sms right so next we need to do we need to verify this otp and logged in user right to do that we need to make another route which is for verification right so to do that we'll call it otp login right so it will be our login with otp otp dot get login cool so we have login with otp function let's create this function in our authcontroller let's write down this function so the name of function would be login with otp and then we have so here we need two things one is the user id the second is the otp which particular user has been verifying right so the very first thing which we need to create here is a validation validation for correct data right so to do that what we'll do we'll create a request validate function and in that will pass the rules we require this user id as well as we require this should be a required field as well as this should exist in the users table and the column is id and the second thing which required is otp right so to enter that and to validate we just required it's a required field and then we'll write our validation logic here so what we'll do we'll call it verification code and we'll get it through verification code where user id where user id is the requested user id request of user id and then where for tp is equals to the requested otp right now the similar thing which we have done for generating otp we just need to make sure if this is this otp has been expired so what we need to do here we need to return and redirect on otp redirect to a root the root name is otp dot login and with the error message if not then we need to log in the user so we need to have a user with the help of this user model where id is equals to dollar request of user id right so before going for a login we need to pass user id in the verification form the validation for user id will fail because we haven't passed the user id from here so the very next thing which we need to do here what a user id along with root so we can we can update this route for verification with this user id right so it will be a user id from the url when we are returning let's take this user id here and while returning will pass this user id with user id we pass it in ira the user id will be with this particular function url right cool so we will pass this verification page here on the verification what we need to do we just need to add an input field right we just need a type of this to be hidden and the name of this should be a user id and the value will be the user id coming from the controller you can see if there is a user then we can simply use the auth login function in that just pass this user and as we are not taking any remember for parameters so it will just login them and redirect them to login with otp i'm just entering the you know the mobile number i have generated i'm just copying this let's test with any wrong otp so it's right now it's logging with the wrong otp as well so we need to prevent that in order to do that we'll go ahead and generate the otp and now when the otp verification is there here write down an if condition and if not of verification code so we need a different message and then here in elsif condition we need a expired message right here we'll see otp is not correct right it's not correct and generate otp because it's not expired so it's giving the same otp let's go ahead and instead of redirecting it to the otp login we need to have the similar kind of flash on here the otp verification let's call it alert danger so that we can we can simply because it's coming on from the same request we can simply use this so if i simply redirect this otp is not correct regenerate otp so 209240 if i enter any random otp it's wrong if i enter the correct otp it's going to log in so we have successfully logged in with the otp right now if i go ahead and log in with otp generate it now if you see since we already use this otp it's not giving a new otp until the 10 minutes the limit which we have set is passed so what we need to update again when we validate any otp we need to expire that right away right so here when a user is logged in before that we need to expire the otp to do that what we need to do so let's use this verification code right verification code where i think we already have this verification code here so all we need to do here let's call this verification code update and in the update let's pass this expire at and in that let's pass the current timestamp right so this will update this otp cool so let's go ahead and log in this system now as soon as you logged in and log out the login again with the otp let's generate otp now you can see a different otp right so let's do ahead let's check the database and verify if it is generating properly or not so now if you see so it has a 10 minute difference but as soon as i log in with this now if i refresh this you see this has been expired and has been updated with the current time so this is how you can generate an otp and log in with that in order to do that it's very simple we just need to make sure like it is generated and verified properly you can obviously modify the way we are doing everything but it's the simplest way you can generate otp login still if you have any issues please do write your comments i'll try to solve them if you find this video helpful please do subscribe our channel like this video till the next video keep watching keep learning thank you for watching [Music] you

Channel: TechTool India

Views: 18,022

Keywords: laravel otp login, laravel, laravel otp verification, laravel login, laravel otp example, laravel sms api, otp login, laravel email send, laravel email verification, laravel 2fa, laravel security, laravel 2fa authentication, otp login in php, 2fa login, laravel sms notification, laravel sms verification, laravel 8, laravel login and registration, laravel security tutorial, laravel login system, laravel tdd tutorial, laravel tutorial, laravel tdd example

Id: 6KWMHJtnImc

Length: 37min 9sec (2229 seconds)

Published: Tue Aug 16 2022