How to send OTP using React and Firebase | One Time Password | ReactJS

hello everyone welcome to study automation in this video we will create otp application where you will enter mobile number and then once you click submit after that you will receive one otp and then you have to put atp here and then you have to click submit it will validate will say you validated successfully so this is what we are going to create in this video so let's get started now here we have firebase so we will achieve this particular thing using firebase and react.js application so first we will start with react.js and we will then we will come back to firebase so for that let's create application react.js application and i believe you have already installed node.js so you can test using node hyphen v and then npm hyphen v so these two commands should run after that you can install react create react app so by doing that you can simply say npm install hyphen g and then create react app this library you have to install globally i'm i have already installed this one so now let's directly create the react application so i can write npx create react [Music] app and then i can write here otp app dev otp app down click enter now it will take time to complete your project template so let's wait for that okay meanwhile we can create firebase project so you have to just write in google [Music] firebase.google.com and after login you will see something like this page then just click here get started now you have to create your project click on create project and here you can enter any project name so let's say i can say otp otp app this is my project name and you can see since this should be unique so it is taking by default this one just click continue and then what we have here we have to disable this analytics for this project just click down and then we can click on create project after that our otp app demo project is creating inside firebase so firebase basically we use to send otp notification now project is ready we can click on continue after that you will see dashboard and here we have lot of things available just what we need to do is we need to click on web you can see ios android and then web and unity for game development so we can click on web now here it will ask us to enter the application name app name to register so i can say otp app this is your internal registration just click on register so you can manage more than one project together in your otp app demo now after that you will see something like this kind of code this is very useful we can hold we can wait until our project is created and then we will use this code okay now we can see our project is created just what we have to do we can write cd otp app dem as you can see here we have to first do otp app demo and then we can write npm start so it will work but i am going to directly open this project in visual studio so i have to write code and then dot now this project will open inside visual studio so now here we have package.json and then other files that is by default it is created so what i'll do i keep index.js and then app.js rest other files i will delete it just for simplicity so just delete it this one all css file also i'll delete it for the better understanding okay now next thing is index.js test.js here so now we have only app.js and index.js now let's delete this unnecessary thing from here also accept app.app import app this is needed now next thing is app.js so here also even we can delete all the codes from here and we can write our own groups i'll write i prefer class instead of function so i write import react from [Music] react this is first step that i'll do let's zoom it little bit more yeah so first thing is we have here import react and then we can write class let's do class app extends react dot component and then we can write our code inside it and after that we can do export default app so whenever we will do this and inside this water we have to write renderer and then we will have to return so let's i'm doing one div and inside div i am going to return first now hi this will be called inside index and this index dot app app basically it will call app.js index.js we'll call app.js click on view and then go to terminal and here we can write npm start you can see we are getting high that means everything is okay as of now now next thing is we have to first see first use the file that we have the script that is generated here so what we have to do we have to only copy a script content from here go to the app create a new file from here and write it name firebase dot js you can name anything click paste here right now what we have to do we have to import few things that is needed for this one so we can write import and before going to import let's install so since this firebase is not available so we have to basically install it so i'll click control c to terminate and then i will write npm install firebase this particular library we need to install to work with firebase [Music] and whenever you will write npm install firebase it will be installed and for this application let's wait for it here so we can see here now firebase package is installed let's check in package.json you can see in dependency it is installed firebase and now what we have to do next is we can import import uh firebase from firebase and then slash app firebase app this is what we need to import and after that we have to import import firebase slash auth these two packages or we can say folder we need to import first one is app and another one is auth so after doing this you can see error is resolved from here and then what we have to do is we have to simply export it export default and then we can say fire base so this particular thing will be now accessible from outside also so first thing we need to set up is firebase and we have to use the code that is available here now next thing is we have here app inside app first we will create form html form and then we will integrate with otp so let's start creating the form we can say let me just write here h2 and here i can say login form and then i will use form tag form and then inside form we have here input type equal to number we want to store number data and then name equal to let's say i can say [Music] mobile and then placeholder we can use to show the data mobile number and then we have we can use on change okay so i will use on change later and then we can say required so this field is required and then we will close it so first thing that we have done is we have created input form and after that we will create here submit button so i can simply write button and type equal to submit then we have here [Music] submit so once we will save it and let's run it here npm start right so now we can see here we have login form and then mobile number and then we have to enter here mobile number right so after doing this what we will do is once this form is completed right we can copy it and paste it again the same thing and we can say otp [Music] otp form so instead of writing otp form i can say enter otp and then we will keep mobile number and instead of mobile i can say this is otp and then here i can say otp [Music] otp number right required and then we can click submit so everything will be same now we can see here we have login form and then enter otp after that we have to basically this is just a form we have to implement it with actual code that is required so first thing is whenever we will enter any number any mobile number we need to handle it so i can say on change on change equal to i'll write this dot handle change [Music] this function we need and the same function i will call here change handle change so now we have to create handle change function so i will write here handle change and then i'll pass e and then we can write here code to handle the change so using this e or event we will get here uh name and then value from e dot target so whenever we will write e dot target we will get name and value this name and value we need to set inside a state and we can say that here we have name equal to value whatever things you will set here it will be available inside state line here so now by doing this whatever values you will enter inside mobile number or otp it will create one state and inside state it will store the value and name so the name will be mobile and value for otp it will be name equal to otp now next thing is we have to configure so as of now if you will refresh you will see nothing so we have not done any otp related coding here now next thing what we have to do is we have to go into the our application otp app firebase and here we can click on continue to consume after that you have to click on app and okay we have already we have already app we don't need to click here now what next we have to do is we can click on authentication so just click on authentication and here yeah we have to click on get started after that we have n number of ways to authenticate what we have to select is phone number just click here edit configuration and then what we have to click enable after that we have to enter one testing mobile number so in that mobile number you will not get any otp so i can write plus nine one and then nine eight seven one seven two nine zero six seven so here you have to write mobile number and then you have to enter otp so default otp i can set six digit default odp click save after that you will see this phone number is enabled and rest other thing we will not we have we don't need to touch once you will complete phone number you have to click on go to docs after that click on bid and then authentication now we have to write code to authenticate so build an authentication now we will reach to this page here you can see we have different documents what we will do is we can just navigate back to the web and from here we can click on phone number so we are doing phone number validation and then we can see the document shell just go down first thing we have already done this authentication and auth domain other thing next thing is we have to set the set of the recaptcha and we will use invisible recaptcha so for that we have to use this one and this code we will use inside our project so let's go here and create one method let's say i can say configure [Music] captcha okay configure captcha and then what i will do here is we can paste it whatever things we have we can simply paste it here now as you can see we are getting here error so what i'll do we have to import this firebase file here so i'll write import [Music] firebase from dot firebase right so we have to simply import this firebase in our app.js so you will not see this error and after that you can see we have recaptcha and then sign inverter so we have to use this sign in button sign in tag basically inside here so inside form i can say div id equal to sign and then you have to simply close it so sign in button should be available inside your form and this will refer this sign in button now everything is same just what we have to do is we have to create one method on sign in so let's write here copy it and paste it here so i can say on sign in we can write this one so this particular method i have created just right here this so that it will point out this one everything is okay what we have to do next is we can configure so you can see this function is ending here here we can write default country something like this we have to write india expected default country [Music] right so inside this we have to pass default country india if you want this is not necessary but if you want you can pass this iron now here we have on submit and then inside on submit we can say and also we can write here a console.log recaptcha verified something like that now we have on submit so on submit we have to use inside this form so i can say on submit we'll have to call this function this dot on sign in submit so recaptcha we are calling inside sorry on sign in submit we are calling from configure capture and then we have to use the same method once we will click on on submit and now here we have to write code related to on submit so for that what we will do we will go down and here you can see we have now third step is to send verification code so second step we have done you can see the second step is setup recaptcha third step is set send verification code to the user's phone and for that we will copy this code and paste it inside on submit also we have to make sure that we can pass e as event and then we have to do e dot uh [Music] [Applause] default e dot uh prevent default yes prevent default so that it will not submit unnecessary we have to do prevent default and after that you can see here it is saying get phone number from user input so we have already taken input and we can write here mobile right so as if you can see we are writing a name equal to mobile and this mobile will be set to the estate so if i write directly this dot estate dot mobile so we will get here mobile number so i can write console.log phone number so it will print this log after that we have here window dot verify captcha so what we have to do here is we have to call this one so once we get this prevent default we have phone number right what we can do we can add this dot configure recaptcha so this configure recaptcha we will call inside on submit or even i can paste it just after prevent default so recaptcha will be called first and after that we have taken phone number now next thing is we have next thing we don't need to change anything it will be by default these things and once here it will be confirmed phone number then here we have it is conforming and then we can say that uh console.log and i can say otp has been sent right this message we can print otp has been sent and if we have any error we can log error here also right something like i can say console.log right and then i can say sms nodes not sent if we have some error we can say sms not sent so as of now we have configured otp so let's save it and then we can go into the app refresh it right click and inspect it click on console and then let's enter mobile number so i have entered mobile number click submit so this mobile number is printing here recaptcha is appearing and then it is saying sms not sent we have to add plus 9 1 here once you will add plus 9 1 in sign in submit then it will take the country code and then after that if you will refresh it and add the mobile number click submit you will see a recaptcha is verified and then we have some error but after it we have otp has been sent now this otp we can enter here so in my phone i just received one otp we can enter this otp to proceed further since we have not completed otp feature so we can proceed on that just we need to add here phone number and then plus 9 1 plus 9 1 we need to add so that so if you will add directly from here then plus plus symbol is not coming right due to the number of so we have to add manually plus nine one and then on sign in submit will complete now next part is we have to create otp and for that we will go here now step three is completed and then we have to move to the step four that is sign in user with verification code that is otp and for that we will just copy it and we will go into the program and here i can write [Music] some method name let's say i can say on submit otp right on submit otp and here i can say this is also e and then we can use es format paste it here and then let's right now here it is saying user so i'll do this dot state dot otp otp since this is what we have written here name equal to otp so we have to write otp we will get code and then we can print this code just for validating whether we are getting code or not after that we have to write win confirmation result so before that we can put window dot confirmation dot result and here we will pass this code if everything is validated then we will get the user object we can print this user object as well console.log i can say uh json.a stringify and here i can write user all data of user will be printed and then we can say alert some message we can give user is verified user is verified and here i can say if we have any error then we can get error from here just save it and then we can call this particular function on otp so i can write here on submit equal to this dot submit this dot on submit so we have to write on summit otp let's change the method name on submit otp i think this is done let's go here and check in our application refresh it i am entering mobile number click submit wait for mo otp that you will receive so i get the otp mentioning localhost and the otp that i get is seven eight seven nine five eight let's say let's see if it is validating or not okay so we have some error here we have to add e dot prevent default so it should not submit the complete page that's why we need to write this one save it again and then let's check it again so we have to remove it and then we'll try again save it and then submit first it will verify the recaptcha message has been sent then let's wait for the otp i get the otp zero four four zero two eight click submit so here i have some error which is saying confirmation code must be a valid string code what we have to do we have to write otp save it and then let's run this program again i'll disable it and then refresh it again so now let's try again i have given mobile number click submit verification recaptcha is verified otp has been sent now let's wait for the otp our user is verified yeah so here i have given otp and then it is saying user is verified and then all the user related information is printed here and then if we will go here again click on users now you can see this user is registered here we have user uid which will be used for the login purpose and if you will enter any other ot other application other mobile number click submit it will send otp you have to just put the otp id here and then that number will also be available here so in this way you will you will validate any user using otp so here you can see that we have handle change then configure captcha and after that on submit so i have used complete code from the internet and then you have to make sure that you are adding country code here then inside submit otp we have also the same code only we have added these two lines and window dot confirm result and then this is the code so i hope you learned something from here thank you so much for watching the video you

Channel: Study Automation

Views: 6,801

Keywords: otp funny comedy prank, otp comedy prank, otp prank comedy, otp latest prank video, otp funny prank, How to send OTP using React and Firebase | One Time Password | ReactJS, opt in react, how to send otp messages, what is otp, wordpress otp login plugin free, one time password otp, otp kya hota hai, otp firebase android studio, react native firebase otp verification, opt react js, otp authentication, how to use otp in react, how to send otp in wordpress, configure opt

Id: lDzBtOo1S8Y

Length: 31min 52sec (1912 seconds)

Published: Wed May 26 2021