Flutter Email OTP Verification - Part 1

welcome back to record and we are back with a video in this video we will talk about how we can indicate the email OTB system in our affiliate replication so this our flutter application you can see here we have the option for the email ID so if I click on the content it will say required now here if I put any invalid email ID it will say invalid email ID so now if I put any valid email ID snippet coderate outlook.com so now if I click on the continue you can see load is loading it will send OTP so here we have the screen for verification code here we have to add the four digit code which we have received in our email ID so now let's go to our email panel so for the email we are just using our fake email that is ethereal so here you can see we are getting the registration OTB so if I click here OTP which we receive so now if I put any invalid OTP here if I click on the continue it will say invalid OTB so now if I put your valid OTP that is 3759 if I click on the continue it will say success that means our OTP system working perfectly fine 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 your latest videos thank you [Music] so in our node yes we are going to use two packages first one is a node mailer and this will be used for sending the emails and the second package we are going to use this that is OTB generator and this will help us to generate OTP so now let's move to our node.js application there we will write our node apis and all so here we have two folder we have created in the project first one is for our API and second one is forever replication so I will go to our CD API folder and from here we will just install the package that is npm I express and this will be our Express server so I've already created the video on how we can create our node.js API from the basic and all you can watch the video if you have not watched the video I will put the link in the description so now we have to add both the packages here we will copy this one and we will paste here so now we will add another package we will copy and we will paste here so now both the package has been created here you can see here and here we will initialize the node.js API project also we will write here npm initialize and we'll press enter here so project has been initialized and we have already added all the required packages also so now we will create some folders here first folder we will create here is services then we have our controllers then we have our routes so now we will start adding the files there and before that we have to also create our index. JS file that we will write later on before that we have to create a new file inside our services folder and we have to create two files one is for our email and second one is for our OTV service and all first of all we will write here for the emailer and here we have emailer dot service dot JS file and here we will create the object for our node mailer is equal to require and we will put the package name here node mailer and here we have to create one function and that function will be used for signing the email and we will write here async function send email in the parameters we will put your params then we have callback [Music] and here in the params we will have our model file and all then we will create one object for where transport is equal to node emailer dot create transport and here we have our host name here for that email we are just using our third party library that is for our sending my emails and all but that will be a fake emails you can use your own SMTP here but here in the video demonstration we are just using third party fake email and all and let me show you so this is a service which we are going to use this is ethereal and this will be used for sending emails and all and that will be fake emails and this is our username then we have password so we are going to use this one here the host name every configuration is mentioned here we can just copy this code also and we will paste there so now we will have the options here and we will write here where mail options is equal to we will create the object here first one will be from that means the mail is coming from which email ID we have to put here I put here snippet coderate gmail.com then we have two that will be the email ID where we have to send out DB and we will write a params.email then we have our subject subject of the email and we will have perhaps dot subject all these information we will send from this function and this service we are going to consume in our OTP service class here we have text forums dot body then here we have to call this method transporter Dot send email and we have to pass this mail option and here we have the Callback function error error info and here we will check if we have error then we will pass here call back error in the else and we will put your vector here in the return also we will write return callback and we'll pass a null info dot response so to distinguish our callback function inside our call function we have two things one is error the second one will be our result or response you can say that's why we are putting a null because our error is null here and we are passing here response and from here we will write module dot export is equal to object and we will export this method here if we not do this one then this function will be not accessible anywhere so now what we did here we have created one method that is send email and here we have params then we have over parenthesis like parameters and then we have the Callback here then we have our transporter we have created one variable that is transporter and we will calling as a function that is not emailer DOT create transport and we are creating the transport here by putting your host port number then you have the authorization details and all then we have our mail option we have from from where we are getting the mail then we have two then we have the subject here then we have our text here and then then we have our we are calling here function that is transporter dot send email and we are sending the email on the basis of this mail options and we are checking if we are getting error then we are returning an error in this condition we are returning here information which we are getting the response from our function and then we are just exporting here so now we will create another class and we will name it as a [Music] otp.service.js file and here we have to create two function first one is used for our sending the OTP and the second one will be used for verifying the OTB here we have to create the object for OTP generator is equal to require and we have to pass the package name here that is OTP hyphen generator then we have constant crypto and this one also required for our keys and all I'll pass a crypto then we have to create one key here that will be our secret key we can put any key here we are putting as a test one two three then we have to call the email service here email service is equal to require and we have to pass our email service here services slash image service so now here we have to create the functions first one will be our async function send OTP and we have our params callback then here we have to create one variable and there we have to generate our OTP here we will write here OTP generator Dot generate and we are going to create that four digit OTP you can create according to your requirement here we are just using here digits we will put here this true then here we have to create a time for how much time that OTP will be alive so that after that time it will be expired I will have constant TTL is equal to 5 into 60 into 1000 that means it will be for 5 minute expiry here we have constant X pairs is equal to date dot now and we will pass this time here that means token will be expired from date now till 5 minutes and we have constant data and we have to create some data for this OTP to validate that OTB is linked with that email ID and all yeah we will have your perms dot email then we have dollar sign then we have dot then we have dollar sign OTP Dot Sperry expires then here we have to create the hash and on the basis of that hash key it will be validate that OTP will be for that particular user and all I will have constant hash is equal to crypto dot create hmac and we are using a Sha 256. then we add the key here and we'll put your update and we have to pass this data dot Digest and we are using a hash key so what it will do it will create the hash key for us by using this crypto and we are using it this method that is create hmac and we are using here SSH 256 encryption here then we are passing our key here this is the key which we use you can use any good key and because we are using it we are just doing the testing here that's why we put here test one two three but you can put any secure key here and we are just updating this data with this crypto and all and we are converted into hash key so now we have the full hash that will be passing our response hash is equal to this hash dot expires and here we have to write our OTP message OTP message will be this one dear customer OTP is the one time password for your login and this OTP will be this one so now here we have to call our emailer also we will write a where model and we have to create the object which we have to pass in our email service write your email and we will map it with our params DOT email then we have our subject we will put here registration OTP then we have our body and we will use here this OTP message and we can validate here we required this body subject and email that we are creating here so now what we have to do we have to call here email service dot send email and we have to pass this model and here we have error result and from here we have to check if error we will return here call back error in the else we will call here return callback null full hash so what we did here we have created one function for signing the OTP and we have params and callback and here we are just generating our OTP here and for generating the OTP we are using here digits and we are just using four digit number then we are just creating the expiry date and all then we are creating the data for our hash and all and in the full hash we will send in our response so that on the basis this response we will validate our OTP and all then we have the params for our model for our emailer and all and we have email ID then we have subject body this one is the body then we have our email service we are calling as send email and we are passing a model then we are checking here if we are getting any error we will call back here error and by default we are just calling a null and we are sending the full hash key that hash key user has to store in the application and later on when we are verifying the OTB we have to call this OTP plus that full hash so that on the basis of that it will validate the OTP is valid or not so now we have to create another method and we will name it as thing function verify OTP here we have params callback then here we have to create a hash value expires is equal to params.split [Music] and we have to put a dot because here if you see in the full H we are just passing two things first when the hash key then we have one expired time so here we have both the values X hash value and expire because here the hash is the first value and that's why we put here expire is the second value here and here we have to put one variable now is equal to [Music] date dot now here we'll check if now is more than parse intent we have to pass here the value expires then we will return here call back OTP expire so in our verify OTP we will get email OTP and the hash key on the base of that we will get the data here and then we will match both the hash Keys here here we will write let data is equal to here we have our params DOT email dollar sign then we have problems dot OTP then we have dot forums dot expires this will be this x pair so now we will create here one variable that is let new calculated hash is equal to crypto Dot create hmac and we will use everything same here sha 256 and we have to pass this key also then we have update data dot digest hash so now here we will only check here if new calculated hash is equal to Hash value then we will return a callback error will be null and we'll pass a message success by default we will return a callback invalid OTP so what we did here we have created one function that is verify OTP and we have params and callback then we are getting the hash value expired from our product slot hash by splitting with DOT then we are creating the date now and then we are checking here if the now is more than our expiry date then we will call here callback OTP expired that means our OTB has been expired then we are creating a data here with that panels dot email then we have parent thought OTP then we have our expires then we are creating the new variable that is new calculated hash and on the basis of the same keys and everything we are verifying here if our new calculated hash is equal to our hash value which is coming from then we are returning here success my Niles we are just returning your invalid OTP and from here we will return module Dot exports and we will return here create send OTB then we have our verify OTB so now we will move further and we will create our controller file and all and here we will write OTP dot controller dot JS file first of all we have to import our OTP service OTP service is equal to require and we have to give the path here dot dot slash Services slash OTP service and here we will have exports.otp login is equal to request response index and here we have to call our function which we have created over there in our OTB service you have send OTB and here we have to call here OTP service dot send OTP and here we have to pass our request dot body then we have a callback error or results and here we will check if error then from here we will return response dot status 400 dot send and here we have message error and data will pass in this error and by default we will return your response dot status 200 and then same we have to do here we will copy this and we'll paste here and here in the data we will pass here results so what we did here we have just created one function that is OTP login and then we are just calling our otbs service by calling this function that is send OTP and by passing a request.body all the parameters coming over there then we are checking here if we are getting any error then we will return your error with the status code 400 in by default we are returning here result and a status code as a 200 and we will change this to success so now we will copy this one and we will paste here and same way we will call here verify OTP and rest all will be same here and here also we will change it to verify OTP so here we are just calling our verify function above we are just calling as send OTP so now we will move further and we will create our route file here we will write the file Here app dot routes dot JS here we have constant OTB controller so we are using a pattern of light we are having all that our data access layer or anything in our service file then we have our own controller file and that will be for our business logic and all and here we have to import our controller file put here dot dot slash controller slash OTB controller then we have constant Express is equal to require our Express server then we have constant a router is equal to Express dot router then we have router dot post and both the requests will be our post request and the first one will be our slash OTP login and here we have OTP controller dot OTP login whenever user call over API that is OTP login with a post request this function will be called here same way we have to do for the verify also OTP verify and this one also we will change it to verify OTP then from here we will just export model dot exports is equal to a router so what we did here we have created two router here first one is forever OTP login and the second one is for our OTB verify and here we are just calling a controller.otp login and the second we are just calling a verify OTB so now we will move further and in the in index.js file we will call our routing and all first of all we have to create that Express and we will call here require Express then we have app.use and we will call it Express dot Json then we have app.use and we have to call our routing and all slash API when we have required dot slash routes slash app route so now we will start our server and we'll put here app Dot listen and we have to mention a port number here we are using a 4500 function and we will write a console.log server started so whenever we run our application this fancy will come that is server started that means there is no issue in our application everything is working fine so now let's run the application and see is it working or not and here we are using node mode node mod and we will put here Js here we are getting some crash here and let's see what the issue is so here the issue is we forget to create a variable that is app is equal to express this one we will save here and you can see we are getting servers started so now we will open our Postman and scene is this API is working or not here we'll put our localhost and the port number we are using here 4500 we have slash API slash OTP hyphen login this one we will change it to post request and here we have body and in the body we will just pass our email ID we can put an email ID here test gmail.com this one we will convert to double quotes So now let's click on the send and let's see is it working or not so here you can see we are getting message success and we are getting this hash key also now let's see in the email we are receiving the email or not here you can see we cut the email that is sent to test.gmail.com and the subject you can see registration OTP now if I click here you can see we are getting this OTB also but this OTP is coming with our digit plus our alphanumeric also that we can change in our application and let's see why it is coming in the alphanumeric so here we put the digit true but here we have to put some more thing like uppercases as if false then we have special character false then we have our lowercase alphabets false so now let's do again and let's see for 2tb now we are getting so if I click again on the send now let's go to the message and if I click here now you can see we are getting the OTP only in the digit not in any alphabetical node now let's verify our OTP also by calling the verify API and for that we have to copy this one and we have to pass here hash then we have our OTP first we will put the invalid OTP and let's see and we will click here send but here we have to change the path also so new OTP has been generated so we have to copy this that one and we have to go there again and we have to No Doubt appear and we will put one more digit as a invalid now in the end point we have to copy this one and we have to paste here so now if I click on a send request and let's see so here we are getting invalid ODB because the OTP we have added the invalid so now if I click remove air 2 and let's press send here so now you can see we are getting a success because the OTP we have entered is valid so now that means our apis are working perfectly fine so now let's move further and we will create our flutter application and there we will integrate this API so this is how you can validate your emails with that OTP and all so I hope you like the video don't forget to subscribe Channel like comment share I will come back Sunday another awesome video thank you watching a video

Channel: Snippet Coder

Views: 2,535

Keywords: flutter email otp verification, flutter tutorial, flutter tutorial for beginners, flutter course, flutter email sender, flutter email authentication, flutter email otp verification firebase, flutter otp verification, flutter otp verification without firebase, snippetcoder, snippet coder, node js email otp, nodejs email verification, node email verification, nodejs otp login, node js otp verification, node otp authentication, node otp, nodejs otp

Id: yajCpu3slzI

Length: 26min 8sec (1568 seconds)

Published: Wed Aug 09 2023