Flutter OTP Login Using NodeJS API

[Music] welcome back to snippet coder and we are back with another video in this video we will learn how to indicate otp login with flutter application using node.jsf api so this is our application so you can see here we have login with mobile number and your mobile number we will send you otp to verify so here we will enter the mobile number so now if i click on the continue you can see here we have that verify odp screen so here we have received the otp you can see here from messages 2002 that is the otp so if we select here that otp will be automatically selected and here if i click on the continue you can see here we are getting the success message so in case if i change it to any other otp if i click continue it will say invalid otp so before starting the video if you are new to our channel subscribe the channel by clicking the subscribe button and click the bell icon to get notified about our latest videos [Music] so we are going to use this package in our application that is otp generator and this is the node.js package so this is otp generator is a simple one-time password generator and can be used as a password generator and it is simple to install we have to just run this command npm install otp hyphen generator then we have hyphen iphone save so that it will save in our package dot json file then here we have to run the command to generate the password and here we have the arguments like length and we have to specify the length of the otp and then we have the optional parameter first one is a digit by default these are the true does it mean we have to put any digit in the otp then we have the alphabet in that case we have to put the alphabet in the otp then we have the upper case and that also will be used for putting the first character as a upper case then we have the special character to include in our otp so let's move to the code part [Music] so we are using the same api which we have used in our previous video if you have not watched that video you can watch the video and that is regarding our login and register api and there we are going to implement a two function for the otp first one will be the login otp and second one will be the verify otp first of all we have to add the package here and we will run our terminal here we will put the command mpm install otp generator hyphen iphone save so it will add the package so the package has been added so now let's see in our package.json file and here you can see we have that otp generator so now we will open our users.service.js file and there we will add our imports for this odp generator and here we will get the object constant otp generator is equal to required and here we will put otp generator and the second one we are going to use our crypto is equal to require crypto then here we will create one variable constant k is equal and this will be our secret key and that will be used for generating the hash for validating our otp and all and here we can put anything like we are going to put otp secret key so now we will create one function here and we will go to the bottom here we will get the function async function and name of the function is create otp and here we will pass the parameters params then we have the callback and here we will get one variable constant otp is equal to here we will call otp generator dot generate and here we are going to make the otp for the four digit and here we will put four then we don't need any alphabets then here we will put alphabets false then we don't need any upper case we will put uppercase false because by default these are true in the package then we have the special character we will make it as a false then here we will create the hash for our otp so that we can expire the otp after certain period of time so that user can't use the same otp as many as time and here we have to create some variables first one we have to create constant ttl is equal to 5 into 60 into 1000 and this means 5 minute in the millisecond for our otp that means after 5 minutes this otp will get expired then here we will put constant is equal to date dot now plus ttl that means from current date from now till five minutes that audib will get expired then we have to create that format for our hash here we have constant data is equal to then here we have to put the parameters parents dot phone that means the phone number dot then we have to put here otp then here we have to put the expiry date expire then here we have to create the hash constant hash is equal to crypto dot create hmac and this will create our hash in the format of sha 256 format here we will put sha 256 and here we will pass over key which we have created above this one then here we have to update it with our data and the data we are passing here this one then we have digest in the hex format and this will create our sha-256 hash of that data then we have to create our full hash here we have full hash is equal to dot expires and this one we are going to send to our user then here we will write our console.log your otp is and here we will pass our otp and this will print our otp and from here we will return callback and we will pass here null as a first parameter because that will be our errors and the second one will be our full hash so this hash will be used when we have to verify our otp then we have to pass three things first we have to pass our phone numbers then we have to pass our otp then we have to pass our hash key then only our otp will be verified in our api and here we have to also call our sms function send sms that we will cover later on when we do our integration with our flutter application and here we will get one more function that will be used to verify our otp and she will create async function verify otp and here we pass our parameters params then we have the callback and from here we will separate our hash value and the expiry date from our parameters which we sent from our flutter application and here we have let hash value expires is equal to params dot hash dot split and we will split from our hash value because here you can see we are just sending full hash in the format of hash key then we have the expiry date on the basis of this expiry date we will check if that otp is expired or not and here we will have let now is equal to date dot now then here we will check if now is more than pass in and here we have to pass expires and from here we will return callback otp expired and from here we will have let data is equal to params dot phone dot params dot otp then we have expire and from here we will create our new calculate hash and on the basis of that we will compare both the hash values if it is true then only that means that odb is valid as it is not and here we have new calculate hash is equal to crypto and from here we will create hmac sha 256 then here we have the key then we have the update and from here we will pass the data new data which is coming then we have the digest hex and from here we will match our both the values and here we have new calculate hash is equal to hash value this one which is coming from the api then we will return here callback null then we have the success and the else condition we will return here callback invalid otp so what we are doing here we have created two function first one is the create otp and what it will do we are using the otp generator utility npm package and from here we are generating the otp then we have our expiry date for the 5 minute for that otp and for that we are just creating the data here in the hash format by the data of paris dot phone number then we have the otp then we have the expiry here then we have the hash value we are getting here with the hash of this data then we are just creating the full hash that is hash value then we have the expiry date that one we are just sending to our api via api to the flutter application and before that we will send sms also to the device then we have the second one that is verify otp and then here we are just extracting our hash value and the expires then here we have the variable for date now then here we are just checking if the date time now is more than our expiry date then we are just returning here otp expired and in the else condition we are just creating one variable for the data and we are just creating a new hash value and then we are comparing the new hash value with the data of the phone then we have the otp then when the expiry date then we are just checking here if the new calculated hash value is equal to the hash value which is coming from the verify otp that means otp is valid and here we are returning a success as we are returning here otp invalid so now let's move further and we will add this value in our routes and for that we have to first go to our user.controller and here we just call our functions which we have created in the service and here we have to create the first function that is exports dot otp login is equal to request response next and from here we will call user services dot and here we have the user service dot create otp and we have to call this function and we will copy and we will paste here and from here we will return request dot body as a parameter first parameter then we have the callback here callback we are having error and results and here we will check if error then we will return here next error in the else we will return here response dot status 200 dot send and here we have the message success and the data we have to pass the results which we are getting here so what we are doing here we have created the odb login function in the controller and here we are just calling our user service dot create odp and here we are checking if any error then we will throw the error else we are just calling the response dot status 200 where the message success and the data which we are getting from our service that is our hash value that we are passing in the data here now we will create one more function and here we have exports dot verify otp is equal to required response next here we are calling user service dot verify otp and say we are passing request body then we have the callback here error then we have results and same here we will check if error then we will throw the error here return next error else condition we are just calling here response dot status 200 dot send and here we have the message here success and then we have the data here results so one thing we forget in our user service that is we have to export both these functions and we will put here create otp the second one is the verify otp so now we will move further and we will add both the controller function of this login otp and the verify otp in our routes and here we will just copy this we will paste it to time and just we will add here otp login and here we will change it with our user controller.otp login and the second one is our verify otp we will copy and we will paste here so now we will go to our index.js file and there we have to add both this url so that it will not ask for the authentication key and all and here we will go to the index.js file and we will copy this we will paste here here we have to put the route here first will the otp login and the second one is the verify otp so now our api is ready so now we are going to test this api in our tender client so that we will make sure the api is working fine and it is generating otp and it is also returning the hash key to our user and also we will verify the same hash key with our api so for that we have to just run the server here we have nodemon js so if there will be any error it will throw the error here now we have there ready to go database connected so we are not using any database here and here we have to open the thunderclient and here we will open the new request we will put here localhost colon 4000 that is a port we are running here api and then here we have to call the first one that is the otb login and here we have to pass here otp login then we have the body here so here we have to pass the json content and content we are going to use here is the phone and if you go to the services you can see here we have the parameter for the phone here and we will pass the phone number here and we are just putting a dummy phone number 981111 and now if i click on the send request we are getting here unauthorized so now let's see what the issue is so here we forget to put the endpoint as a users and also we have to change it to post request so now if i click on the send request you can see here we are getting our otp that is 0035 and we are getting here data that is our hash data and we will copy all this so now we will open one new request before that we have to save this request so now if i click on the new request and from there we will just verify this request and for that we have to copy this url and we have to paste here we will change it to post request and here we have to change the route here and the route name is verify otp and here we have the body and in the body we have to pass here three things first one is a phone number then we have to pass here otp and also we have to pass the hash key and we have to make sure the phone number we are using the same one then the otp then we have the hash here if we click on the send request we will get here invalid odp because we have not passed anything so now if i put here this phone number if i again click on that send request we will get here invalid otp and here we i if i put a valid otp and if i click on a send request again we are getting a invalid otp because we have not passed the hash key so now we will copy this hash key and we will paste here so now if i click on the send request you can see here we are getting success here that means that otp is valid here so if i change the hash key and if i click on the send request you can see here we are getting invalid odp that means it is matching the hash key and it is not getting validated that way it is giving us that error message so now if i change it to the proper hash key and again if i click on the send request you can see here we are getting success so in case if i change the otp here and hash key will be the same now if i again click on the send request we are getting here invalid odb because that hash key which we have created here for that validation that is not getting matched that's why it is giving us the error so now let's move further for the flutter application to have the integration of this api with the flutter application and there we will indicate the otp reading and all so this is the plugin which we are going to use in our flutter application the name of the plugin is sms underscore autofill and what it will do whenever we receive any sms it will autofill that sms in our application so basically in the ios there is no need of any any special requirement or anything because that sms will be autofilled by default but so in the android also we don't need any permission but this pack is very useful in the android because there it will autofill that sms on the basis of that whatever the otp we are getting that it will fill it and we are going to use this spin field auto fill and there it will fill that otp on the base of the sms but in this tutorial we are not going to test on the android because that requires some special permission for our sms and that will be according to this one android sms constraint and for that we have to make sure that sms is not longer than 140 bytes and also it will contain one time code that the client send back to the server to complete the verification flow and also sms will be end with the 11 director hash string that identify your app and example of the sms will be like something like this but in our sms provider we don't have this 11 character hash key so that for that reason we are not going to test on our android application but it will work perfectly fine because i have already test this code with the another sms provider and it is working fine but in the case of our this tutorial we are going to test in our ios and there it will autofill the sms so now let's move to the letter application to start doing the code part [Music] so first of all we will design our application and in the design we are just going to design our login page and here we will create one file here and the name of the file will be login underscore otp underscore page dot dot file and we are going to make it as a stateful visit login otp page and here we will create some variables first one is a string mobile number is equal to and we will initialize with empty then we have the boolean type of is apa call process is equal to false and this will be used in our snippet coder util and that package also we will add and first of all we have to go here also in the packages in the puffs pack and there we will add two package and these are the package we are going to use sms underscore autofill then we have the snippet coder underscore utils and here we have our wizard for the build and we will change it to safe area and here we have the child and we are going to use this careful wizard then we have the body here and we are using here progress hod then we have the child here and we are going to create that visit here login ui and we will get the metadata create method login ui and here we will add in async call and we will pass our variable is api call process then we have the opacity and we are using a 0.3 then we have the key here and we are putting a unique key so now we will create our login ui visit and from here we will return column visit and the main access alignment we are using here main x alignment dot center then we have the children's here and we are using here image dot network and here we have the image for our icon which we are using here and that we have already uploaded to the server we are just putting here the path then we have to give the height here the height we are giving here 180 and then we have the fit here and we are using here box fit dot contain so we will just open the emulator to see the design side by side before that we have to link this page login otb in our main dot dot file and from here we will remove all the unnecessary code which is not required and we will change it to login page we will remove this one and we will import the file so now let's run the emulator to see the design side by side so we are getting one error here and in the android we have to update our minimum sdk version 218 to make this plugin that is sms autofill to make work in the android and for that we have to go to our android folder then we have our app folder there we have the build.gradle and from here we will change the version of minimum sdk to 19 now let's run the application to see is it working or not so here we have our application and you can see here we are getting the icon here so now let's move further to design side by side after this we will add one more visit here so now we will add one more visit here and we will put a text visit with a text login with a mobile number then here we have the style here and we are using a text style here we will put font size 20 then we have the font weight and we are using a font weight dot bold here you can see text is coming but we have to do some padding and all and for that we have to wrap it with our padding wizard here we have the padding and we are using here for the top 10 then we will have to make it in the center and we have to wrap with our center widget so now you can see here text is coming in the center then we have to put here the size box for the spacing here we have the size box and the height we're using here a10 then we have to create one more text visit and we will put here enter your mobile number we will send you otp to verify the style we are using here textile font size we are using here 14 and we will wrap it with our center we will put a constant so that because this is not going to change that's why we have to put a constant now you can see here text is coming for that one also then again we have to put a size box with the same height of 10 then here we have to use the row wizard because we have to put two text box here first one is a read only with our country code and the second one is the text bus for entering our mobile number and here we are going to put main access alignment we are using a main axis alignment dot start then we have the cross access alignment and we are using a cross section alignment dot center then we have the children's here and the first one we are going to use a flexible visit and here we with the child and we are putting a container the height we are going to use 47 the width we are going to use a 50 then we have the margin here and we are using a constant edge instead from left to right and the left one we are putting a 0 then we have the top putting at 10 then we have the right 3 bottom 30 then here we have the decoration part and we are using a box decoration and border radius and the border radius we are putting a border radius dot circular 4 then we have the border here and we are using a border dot all color we are putting a color start in gray color so now you can see here box is coming here but seem like there is a padding issue and all and here we have to wrap this our row wizard with our padding and here we will put from left to right from left we will put 20 on the right in the top we will put a 0 then we have the right 20 in the bottom we are putting is zero so now you can see here text box is coming properly so now we have the child here and here we are using a text visit text and we are putting a text as a country code nine one then we have the style here and we are using a text style color we are using a color start black color then we have the font weight and we are putting here font weight dot bold you can see here text is coming but we have to put the text in the center and we will wrap it with our center visit now you can see here text is coming properly in the center and we will make it as a constant here then after that we have to use here one more flexible visit and that will be used for our mobile number and all flexible visit and the flex we are going to use the five that means the space which is it is going to consume will be around five then we have the child here and here we are using the text form and here we have the max line one max length 10 then we have the decoration part and we are using here constant input decoration and the content padding we are using it as instead dot all six and then we have the hint text and we are using a mobile number then we have the enable border and we are using a outline input border and we are putting a border side border side we are using here color colors dot gray color then we have the width here and we are putting it so now you can see here we are getting here our text box with our width and all so here if i remove this one you can see here that count is not coming for that number of text but we have to show here that's why we have put a max line and that max length then we have our border here and we are using a outline input border and a border side we are using here border side the color we are using a color start in gray color and then we have the width here and we're using a one then we have the focus border and that also will be the same we will copy this and we will change we will put here and here we put focus border and here if i click on the text box you can see here focus border color also gray if i change it to some other color to right so now if i click on the text box you can see here that focus border color is red now we'll change it back to grey now then we have the keyboard type and here we have that keyboard type text input type not number previously if i click on that text box you can see here we are getting the full text that full keyboard for that all the keys now if i change it to number and if i save here so now if i click on the text box you can see here we are just getting our keyboard for the number keyboard then here we have to put that on change event and here we have string value and here we will check if value dot length is more than nine and then we will fill this mobile number is equal to value and we will save it so now we will put our button also submit button and after this padding visit we have to put here center visit for our button we have the child here and we are using a form helper dot submit button here we have the text here continue then we have the on tab event that we will cover later on once we have that api service ready and here we have our border color and we are using a hex color and we will put here border color and we are using it somewhere around green color same we will copy here we will use the same for our pd color also the background of the button then we have the text color and we are using a hex color and we are using a black color then we have the border radius and we're using a 20. so now let's save it and here you can see we are getting our continue button so once user click on this continue button it will move us to our verify otp verify screen so now you can see here our screen is looking very nice here we have our icon here then we have the label for login with mobile number then we have our enter mobile number we will send you otp to verify then we have our country code then we have our mobile number and here we have the counter for the mobile number then we have a continue button so now let's move further to design our otp verify screen also [Music] so now we will create our verify otp screen and for that we have to create a new page here and we have to go here in the lib folder and here we will create new file otp underscore verify underscore page dot dot file and we will make this page as a stateful widget here we have otp verify page and from here we will pass two parameters first one is a final string nullable type of mobile number then we have final string nullable type of otp hash and this hash will come from our login api and we hit our login api then it will return us the otp hash so that otp hash we have to pass in our otp verify api and here we have this dot mobile number this dot otp hash and here we will get some variables so first one is string type of underscore otp code is equal to null then you have a final end type of underscore otp code length is equal to four then we have our boolean typo is api call process is equal to false then here we have our build visit and for that we have to go to our login otb and we will copy that code and we will paste here this one we will import and this ui we will make a new function with our verify otp ui and we will make this function here and from here also we will return column visit and and now we will go to our main.dart file to link this space so that we can see the design side by side now we will reload the application so here you can see we are getting here blank page so now we will design our page here and here we have our column wizard and we will put here main access alignment main access alignment dot center then we have the cross axis alignment and we are using a cross hex alignment dot center then we have the children's here and the first one is our image the graphic which we are going to show here and we are using an image dot network and we will put the url here because we have already upload the image over there then we have the height here and we are using a 180 then we have the fit here and we are using a box fit dot contain so now you can see here that image is coming here and here we have to put that text here and we are going to put here text visit otp verification and here we will wrap with our padding and here we have only top 20 and here we have the style here and we are using it text style and the font size we are using it 20 then we have the font weight we are using a font weight dot bolt then here we have to put our size box for the spacing and all and here we have size box height we are using here 10 then here we are using text visit enter otp code sent to your mobile slash and this will be the line break and here we have the country code then we have hyphen then we will put here the mobile number which we pass from our visit that is visit dot mobile number so here we don't have any mobile number so that's why it's showing in null and here we will put the max line to 2 so here we put the max line to 2 so you can see here that text is coming below that line alignment and now we have to make this text in that tower center for that we will put it text align text align dot center you can see here text after the line break is coming in the center now and here we have the style also and we are using a text style and here we have the font size 14 and we will wrap this text visit with our center visit now you can see here that icon plus that label is coming in the center now so here we have to use our sms autofill utility that package and for that we have to put here pin filled auto fill so it is coming here so now we have to design it and first first of all we have to wrap it with our padding visit here we have the padding and we have to change it from left to right and all 25 then we have 0 25 0. you can see here we are getting a little bit space from the left and right hand side so now here we will do some decoration pattern on we are putting here underline decoration here we have the text style and we are using a text style font size we use using a 20 then we have the color here and we are using a color start black color then we have that then here we have the color builder and we are using it fix color builder colors dot black dot with opacity 0.3 now you can see the difference here that lines are coming little bit in the light way if we comment this code so now you can see here by default the lines are very thick and here we will put current code and we will assign with our otp code then we have the code length and we are assigning with that otp code length then we have that encode change event and here we'll check if code dot length is equal to underscore otp code length then here we have to enable our keyboard and all and here we will put focus scope dot of context dot request focus and here we have focus note and also we will assign our otp code is equal to this code now after this we will put here spacing here and here we have constant size box and the height we are putting at 20 so now we will put the button here and the button code we will copy from our login page and here we will copy this one and we will paste here now you can see here we are cutting the button here continue and we can also change it to verify so we have to write some more code here for that autofill of the otp and on and for that we have to create our function here we have to override our overwrite void in state and here we have super dot in state and here we have to create one variable focus note my focus note and we will put it late and here we will initialize it my focus note is equal to focus note then we have my focus note dot request focus so when this screen will be load it will show that keyboard and all then here we have to write sms autofill dot listen for the code dot call what it will do it will just listen for the otp and then it will auto fill that and here we will add our dispose function and all and here we have added it overwrite white dispose and here we have sms autofill dot unregistered listener so it will stop listening for that otp unknown once the otp is verified or once this page is disposed then we have to also dispose our my focus note dot dispose then here we have to put super dot dispose so our ui for our odb variation is also ready so now let's move further to have the implementation of our ap service with the api which we have created in our node.js for the otp login and the otp verification and all [Music] so now we will create our model file and for that we have to go to our lift folder and here we will create one new folder that is models and here we will create new file and we will name it as a otp login response underscore model dot dot file and here we will create the class otp login response model and here we have to create the constructor and here we'll create two variables late final string message then we have late final string as a nullable data because in the case of any error this will not come in the data and here we have required this dot message required this dot data and here we have otp login response dot from json map string dynamic json here we have message equal to json message and we'll copy this and he will replace it with the data so now we'll create one function here outside the class and here we have otp login response model otp login response model and here we will pass our string str and here we have login response model dot from json and here we will decode the json json dot decode here we will pass str and here we will import dot convert library so now we will move further we will create one api service file here we have api underscore service dot dot file and here we have class ap service and before that we have to create one more file here that is config.file config dot dot file here we create class config here we have to add the variables static constant string api url api url is equal to and here we have to put the ip address if we are doing testing from the local and this is my ip address and here the port number then we have to copy this and paste here and paste again here and we will name it as a otp login api and this one will be otp verify api and here we have slash users slash otp login and this is the endpoint for our api then we have the user slash verify otp otp so now we will come back to our ap service file and here we have to import that our package for package http slash http dot dot as http and here we will create one variable static where client is equal to http dot client then here we will get one function static future otp otp login response model and we will name the function as the otp login and here we will pass mobile number and we will make this function as async here then here we have to pass that to our request header and we will get map string string request headers is equal to and say we will get the object here content type application slash json then we have where url is equal to uri dot http here we have to pass our url config dot api url and here we have the endpoint config dot otp login api then here we have to get the response where response is equal to await client dot post request and here we have to pass the url then here we have the headers request headers then here we have the body here and here the body we have to make with json encode here we will create phone and we will pass the parameter of mobile number because this is the parameter which we use in our epa also while testing the phone as a parameter then from here we will return otp login response and we will call this function and we will change it to otb login response json and we will call from there and here we pass response dot body so what we are doing here we have created one function for otp login and from here we are just passing over mobile number then we have our request header and we are passing a content type as application json then we have creating our url here with that url dot http and here we are passing the api url then we have our otp login api then here we are just creating the response with client.postrequest and here we are just passing the url then we have the headers here then we have the body here with json encode phone and we are passing a mobile number on the parameter then here we are returning the response which we are getting from the server that is otp login response json response dot body so now let's move further to have another function that is verify otp and we will copy this function and we will paste here and here also return type will be the same and we will change the function name as a verify otp and we need two more variables here first one is a string mobile number then we have string otp hash then we have the string otp code and here we will change the api to otp verify api and here the object we have to change it to phone and we have to add two more first one with the otp here we have otp code then we have our hash and here we have otp hash the rest of the things are same here and we are doing everything same except we are just passing two more variables and we have changed the api here so now let's move further to indicate this abs service with our ui and for that we have to go to our login page and here we have the button for submit button in the login page and here we will check if mobile number dot length is more than nine then we will proceed further else we will not we'll put here set state and we will make that api call process true so that it will enable our loader then we have to call here api service dot otp login and here we have to pass the mobile number then here we have the then request here we are getting the response and here we will change our api call process to false so that loader will stop loading once that data is loaded then here we will check if response dot data is not equal to null then we will call here navigator dot push and remove until here we have the context then we have the route here and we have to put here material route material page route then we have the builder here and here we have to call otp verify page and from here we will pass two things first one is our otp hash and that we will get in our response.data then here we have the mobile number that we are just assigning with our mobile number so now reload the application to see this login page is working or not and before that we have to change our main.dart file with our otp login page now reload the application so in the login page we will console our response which we are getting and we will put here print response so now reload the application so now if i put any mobile number here 98111 so now if i click on the continue so if i go to the debug console we are getting a response but here we have to we are getting in our model file and here we have to change it to the json encode and all so here i will print the response in the message and data both so now if i reload again so now if i put here 981111 and if i click on a continue you can see here we are getting success and also we are getting the hash key also that means our api integration working fine and here also you can see we are getting the mobile number which we are passing from our login screen to this verify screen so now let's move further to have integration of that odb variation in our screen of that odp verification screen and for doing that we have to copy this code and we will paste there and here we will do some modifications first one we have to import this file then here we have to change the function to verify otp then here we have to pass visit dot mobile number then we have to pass here and here we have to put the explanator visit dot otp hash then here we have to pass the otp which is entered by user and here we'll put otp code and here we will check if response.data is not equal to now then we will call here form helper dot show simple dialect and this is the utility we are using from our snippet code utilities and here we have the title we are putting a shopping app then we have the message here we are picking from response dot message so whatever mess is coming from the response here we have the ok button then we have the on press event and here we will close our popup navigator dot pop and text same we will do in the else condition as we are doing just that testing part but in the real app you can redirect a user to the home page once it is successful and here if the data is not nickel to null then you can redirect to home page and here in the else condition also we will show the message so now reload the application to see that is working or not so here we have our login screen and here we will put the any mobile number so now if i click on the continue you can see here we are getting the verify screen now if i put any odb number now if i click on the verify so here we are getting some error so now let's debug the application to see what the issue is so we have to go to the aps service file so here the issue is you can see here so we have mistyped the endpoint and we have to make it users here now we will reload the application to see is it working or not so again if i put any number so now if i click on the continue you have the otp screen if i put any otp number here so now if i click on the verify you can see here we are getting invalid otp so let me reload the application again so now let me show you that so here is our apa service so now if i put any mobile number and i will check the otp what is getting generate so here if i put any mobile number so now if i click on the continue so the new otp is 6421 so first i will put the invalid one now if i click on the verify we are getting here invalid otp so now if i put the valid otp i will put here six four two one now if i click on the verify you can see here we are getting success here so that means our api integration is working fine with the flutter and that node.js api [Music] so in our application we are using this sms gateway that is msc 91 and we are using that for the sms catway and here the plugin for that in the node.js we have to just install this in our node.js api and after that we have to do the integration integration very simple we have to create one variable with that required msd91 then we have to pass the api key then we have to pass a sender id then we have to pass a route number so you can accordingly change your keys and the sender id and everything over here according to a requirement if you are using this sms provider else if you are using someone else sms get get way then you can use their code for that integration and all then we have to call this line of code to sending the sms so now let's move to the node.js api to have the integration of that sms gateway so here we have our application node.js application so now we will go to our users.service.js file and here the code for that send sms and before that we have to install the package so now that package has been installed and here we have to create that variable then you can do the changes as per your requirement then we have to call this code and here we will put this code and here we have to pass the mobile number that is coming from our params dot phone and here the message that we have to need to send and we will copy this one and we will paste here there is no need to change anything else a part of this so now let's move to the last step of that tutorial and here we will do the final integration testing with the real device in the ios because in android we are not doing any testing because we don't have that particular template which is required by this plugin to have that autofill of that sms just to show the demonstrate how that autofill is work i have to go to that ios device to show the demonstration over there [Music] so now our application is working and here we have to put the mobile number so now we will click on the continue here we are getting that screen for verify otp so here you can see we have received the otp 5197 and we will select from here it will autofill so now if i click on the continue you can see here we are getting success so that's all in this video i hope you like the video don't forget to subscribe to the channel like comment share i will come back soon with another awesome video thank you for watching the video [Music] you

Channel: Snippet Coder

Views: 18,695

Keywords: flutter otp verification without firebase, flutter otp verification, flutter otp autofill, node js otp verification, otp verification using node js, flutter phone auth, phone number verification node js, flutter tutorial, flutter widgets, flutter app development, flutter sms autofill, flutter sms verification, node js sms verification, nodejs sms api free, nodejs sms authentication, flutter mobile number validation, flutter mobile login, flutter login with mobile number

Id: KbF6uVMGDxg

Length: 47min 42sec (2862 seconds)

Published: Tue Nov 02 2021