React Firebase Phone Auth Tutorial | Send OTP & Verify Users | React For Beginners

hey what's going on guys welcome back to another video so in this video we will explore the firebase phone authentication in react application we will see how we can sign in a user using phone number and verifying the user with the otp and we are going to build this feature on the same code base that we have built in a previous video react firebase authentication so if you have missed that video then please check out you can also click on the card above and jump to it directly so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys before we go into our today's main topic i want to quickly give you all a shout out on a beautiful career program designed by testbook for all those who want to build their career as a full stack developer and want to work with big companies let me give you key highlights of this program you will get 65 plus video lessons with 30 plus modules and 50 plus live stream classes and more than 95 hours of live sessions you will get two months internship with certificate where you will build portfolio with five hands-on projects and you will get lifetime access and support along with that you will have the project led curriculum mentorship and a doubt solving sessions one-to-one for 24x7 now during this program what you will learn in terms of the skills you will learn about the java and javascript data structures and algorithm html5 css mon projects sql nosql database springboot microservices and cloud native there's a lot to learn in this program now let me show you the program structure and the projects that you will build during this program so you will build the static linkedin profile you're going to build the quiz application you will build the quora clone you will build the airbnb clone capstone project and you will learn the concepts of object oriented programming along with the data structures and algorithm and all this project will help you to get the future job profiles like full stack developer front-end developer back-end developer web developer or a web designer one developer and an app developer and many more with the big product based companies now let me show you how you can enroll in this program so you can click on the apply coupon and in this you can use my coupon code which is dpm 20 and then you just click on the apply and the coupon code will be applied now you will see that you have a discounted price and you just need to click on the buy now and with this you will get the extra 20 off on all the career programs that are provided by the testbook skills academy you will find all the information and the links in the description of the video so that you can check it out later on and this program is highly recommended all right guys so i'm already using the same application code which we built in a previous video react firebase authentication so i have cloned the repository and if you want to clone the repository then you can go to the github and here on this repository what you can do you can click on the code and then you can click on the copy and then you can do the get clone and you can clone the repository and i'm also running my application on a local development environment so when i run it on the local development environment i am getting this error that some of the configuration of the firebase are not available which is the app id the message sender id storage bucket and that is because that if i go to the source and if i go to the firebase then we see that here we don't have the configuration of our firebase project so what we will do here is that before giving you a quick walkthrough of the code we will first go and create the firebase project so i will go to the browser and in the browser if i go to the console i will click on the add project and here i'm going to give the name of the project so for me the name will be the phone or then i'm going to click on the continue i will disable the google analytics i don't want it then i will just click on the create project all right so the project is creating and meanwhile let me give you a quick walkthrough of the code that we have so i have a components folder where i have a home component i have a login component and i have a protected route which will only be accessible if a user is authenticated then i have a signup component all right and for the context i have a context api which is the user or context so let me minimize this and this user auth context is containing the code which we have written in the previous video where we have enabled the authentication of email and password and a google authentication and in this project we are going to allow one more authentication and that is the phone number so let's go and let's check that is our project in the firebase is created or not so i'm going to go to the browser and here i will see that the project is now ready so i'm going to click on this continue button and it is going to take me to the landing page and here we are going to create a web application so that's why i'm going to click on this web and here i need to give the name for my application so i'm going to give a react phone pop all right i'm going to click on the register app and this is going to register our app and we will get the configuration of the firebase that we can add in our project all right so you can see here that now we have this configuration which we can add in our project so i have already installed the firebase because we are using the same application code so that means the firebase is already installed and what i'm going to do here is that i'm just going to copy this and i'm going to use the same configuration in the project so i will go to my visual studio code and in the firebase part what i will do here i will just replace that so i'm going to cut and add it here now if i save it then you will see that now we don't have any errors and now if we go to the browser and if we see then we should be able to see the application so if i refresh my page then we see that this is the application which all we already have so in this application right now we don't have any mechanism to authenticate a user or assign in a user using the phone number so let's first create that so let's go to the visual studio code and here what i will do here is that i'm going to create a new component so let's have a new component and i'm going to name the component as phone signup.js all right and what i will do here is that i will just write a snippet so this will be the snippet and i'm going to change this to a proper name so what i will do here is that i'm going to make it a camel case so this will become the phone sign up and i will do the relatively same here so this will become the phone signup all right so now we have the skeleton of the component and now what we need to do here is that first we need to have the ui and that ui should be available in our login component so where we can click on the button so what we will do let's go to the login component and inside the login component we will need a button here so let me add a button for the sign up with phone all right so what i will do here is i will let's close this and i was simply going to copy this so let me copy this and i'm going to add this below the google button so here i'm going to add this and what i will do here is that i'm going to change this and i will change this to sign in with phone all right and we want the color to be a green so i'm going to give here a variant of success and this will be of submit type and we also want that when i click on this link then we need to navigate to the phone component and here i'm going to add a link of phone signup all right and then i will just close the link text so let me cut this and i'm going to add it here all right so now we have this and what we also want to do is we also want to introduce a route so let's go to our app.js so if i go to the app.js then here we also need a route so i'm going to do a copy of this and i'm going to add it here all right and this will now become phone signup and the component name we have is the phone signup all right so the component will be auto imported and we have this now let's go and let's check that are we able to see the sign in button or not so what i will do is i'm going to refresh my page and i see that i have an error phone signup js does not match on the disk so let's fix that so we will go to this and i'm going to copy this and i'm going to add it here all right and we will just verify here so i'm going to change this here and i'm also going to change this here and we will also change this to here all right and now let's go and let's check then we see that we have the button but we don't have a spacing so let's add the spacing so i will go to the login and i'm going to add here the margin top as three all right so let's go back and let's test it then we should be able to see now properly the sign up button so now what we want is when i click on the sign in then i should be able to redirect to the uh component of the uh sign up so if i go to then we see that we have the phone sign up all right and now we need to design this component so what i'm going to do is let's go back to our visual studio code and here if i go to the sign up component then in this component let's add the jsx first so what i'm going to do here is that i'm going to add a multi-line jsx and here we need a very similar form which we have on our login page so i'm simply going to copy that so let me go here and i'm going to copy this and i'm going to add it here so i will copy this and let me add it here and now i'm just going to close the form all right and then i just close the div all right and then i have to close this fragment and now what i'm going to do here is that instead of this firebase auth login i'm going to change this to firebase phone or all right i will keep this as it is then on submit what we need to do is we need to first get the otp so i'm what i'm going to do here is that i'm going to have the get otp function here all right i'm going to keep this as form basic phone number so let me change this to phone number and for the form control i'm not going to use the form control for this i have already installed a package which is the react phone number so if i go to the browser and if i show you then this is the npm package which i am already using the react phone number and i've already installed it so you can install it like this and if you want to use it then you can simply use it like this so it's very simple to use it so what i'm going to do is i'm going to copy these two lines all right and then i'm going to simply add it here so let me add it here and now i'm going to use the form component so i'm going to change this and here i'm going to have the phone number all right and in this phone number what else i have to add is i'm going to add some default properties which will be the default country and my default country i'm going to add it as ph which will be philippines and then i'm going to have a value so we need to also give a value and then i have to add a on change so whenever i make any changes on the value then i will need to have the on change so let me have the on change and i'm going to give the placeholder so let me add the placeholder and i'm going to write the enter phone number all right so we have that and for the value what we need to do is i'm going to create a a state variable which will be a constant and i'm going to have the number and i'm going to have the set number all right these two will be equals to the use state and i'm going to give the initial value as empty so i'm going to copy this number and i'm going to add the number here and here what i'm going to do here is that i'm going to have the set number so whenever i make the changes it's automatically going to set the number all right so now we have it and what we want is we need two buttons which will be the cancel and the send otp button so for that what i'm going to do here is that after this form group i'm going to add a button so let me have a div with a class name and i'm going to name it as the button right all right and i'm already using the classes which is added in the app css so some of the basic css is already added and rest of the css is coming from the react bootstrap all right so let's go back and here i need to add the button so i'm going to add the button which will be a bootstrap component and i'm going to give a variant to the button and the variant will be the secondary and i'm going to give the button as cancel button okay and i will also need an another button so let me copy this and i'm going to have an another button which will be of type primary so let me add the primary and this will have the send otp so i'm going to have the otp here all right i need the space between the buttons so i'm going to add the nbsp and what i want that whenever i click on the cancel button i have to redirect back to my login page so let me add a link here so i'm going to have a link and the two will be slash i'm going to cut this and i'm going to add it here all right and what i'm going to do is i will also add the type here so the type will be the submit so let me add the submit so we have this and what we can do is we need to write this function so let's have this function i'm going to have a constant get otp which will be an arrow function so let me add an arrow function and here i'm simply going to do a console log of the number which we are going to type let's have an event here and i'm going to add the event prevent default all right so now let's give a try so i'm going to go to the browser and i'm going to see here so if i go here and if i refresh it then i see there are a lot of errors so let's fix those errors so we just need to do the import part so let me adjust the screens first all right so now we have adjusted the screen so we can see both here and what we need to do is we don't have the form and the link so let's import the link first so i'm going to go here i'm going to have the import and i will import the link from the react router dome all right and then i will also need the use state so let me have the use state so this u state will be coming from the react and then we need the form so let me have the ohm here all right so now we also need the alert so alert is also a bootstrap component so let's add the alert here and now we don't have the error here so we are using a error state but we don't have the state so let's create a error state which is very similar uh to the login so we have here the error state so i'm going to copy this and i'm simply going to add it here so let me add it here all right so now we have the alert state as well and if we see then we face some errors and that will be that error is not defined all right so now we have resolved all the errors and now you see that we have the default philippines which we have added here ph we also have the input field where we can add the phone number now what we have to do here is that if we enter a phone number and if we click on the send otp then we need 10 otp on our phone so that we can add it we can verify the user and the user can be registered to do that what we have is we have a proper documentation provided by the firebase so if i show you that then here you will see that the firebase authentication with phone using the javascript so here what we need to do here is that first we need to enable the phone number in the firebase project so if we go to the project and here we have already added all this information so i'm going to close this and i will go to the authentication and inside this authentication you will see that if i click on the get started then we see that there are a lot of authentication provided so we already have the logic and the code for the email password and the google earth provider this time we are making use of the phone so let me enable all this first so i'm going to enable this all right i will save it i'm going to enable the google as well so i'm going to enable this and i will configure the email so let me configure the email and i'm going to save this and for the phone also we are going to do the same thing all right so the google is also enabled and now if i click on this and if we click on the phone then i'm going to enable the phone as well and i will just save this all right and the firebase is by default providing us an sms daily limit of 50 sms per day and if we want to increase this limit then we have to add the billing account information so if we go back here then we have already done the first step the second step is to set up the recaptcha verifier and this is very important because we don't want to spam the firebase sms apis so we want that only legitimate users will be able to send the sms and verify themselves so what we are going to do is in order to add the captcha verifier we are going to make use of this code the recaptcha widget so let's go in our visual studio code and let's add that so what i'm going to do here is that if we go to our user auth context and in this user or context i'm going to have the recaptcha verifier and this recaptcha verifier is coming from the firebase all right and then i will create a function so let me create a function here so i will have a function and i'm going to name it as the setup recaptcha all right and when we call this setup recaptcha we are going to pass the phone number all right so i'm going to pass the phone number and then what we need to do is i'm going to create a constant of a recaptcha verifier so let me have the recaptcha verifier and this will be equal to i need to create a new instance of the recaptcha verifier so i will have a new instance of it and inside this instant if i want to add the recaptcha then i have some values which i can provide it here so if you see that you have a new instance of recaptcha and then you provide the sign in button and then you have a object and then you need to provide the auth instance so we are going to do a very similar but instead of adding this one the invisible we are going to make use of this recaptcha so here you will see that i'm going to add this information so i'm just going to copy this all right and i'm simply going to add it here all right i will save it and you will see that i have missed the code so i'm going to add the code all right so now i have already added the recaptcha and what i'm going to do here is that i'm going to render this captcha on my screen so to render this what i will do i'm going to take the instance of recaptcha verifier and i'm going to use a render function all right so now we have added this and now if we want to see the captcha on our browser what we need to do is we need to add a div which will be having an id of recaptcha container so i'm going to copy this i will go to my phone sign up so let me go to the phone sign up and here what we i will do here is after this i'm going to add a div in the form group so i will have a div and i'm going to give the id of this and then i'm simply going to close that div and now if i want to give a try what i can do here is that if we go back to our auth then we have to expose this function so i'm going to copy this i'll go here and i'm going to add it in the value all right now it is exposed and now we can make use of this in our sign up so if i go to the sign up all right so first let's import the uh user or context so i'm going to have the import and i will have the use user auth all right we have imported it and now we can make uh we can destructure the function so our function was the setup recaptcha so i'm consistently going to copy this so let me copy this and i'm going to add it here and this will be coming from the use user auth all right so now i have that and now if i want to make use of it what i can do here is that uh let's do the validation as well so that a user should not submit the uh empty fill so what i will do is i will go here i'm gonna have the if my number is equals to equals to empty or my number is equals to undefined so let me have the undefined then in this case what i want is i want to return and i want to set the error message so what error message i'm going to set here is that please enter a valid phone number all right we have that and then what we are going to do here is that let's initially we are going to let's let me close this so i'm going to close this and initially what i want is that whenever i have this initially i want my error message to be an empty so let's have the empty error message and if everything this gets satisfied we have a proper number then in that case we are going to write a try catch block so in the tribe what i'm going to do is i'm going to have a constant response and this response will be equal to the i'm going to use the async await so let me add a async here so let me add an async all right i'm going to give some space so that we can distinguish between that and await then i'm going to have the setup recaptcha and i'm going to pass the phone number all right so we have passed this phone number and then what we are going to do is i'm going to simply do a console log of this response so let me have the console log and i'm going to have the response and then i'm going to also have a catch so in the catch what i will do is i'm going to have the error and then i'm going to set the error as whatever the error message is so i'm going to have the error message oops this will become the message all right so we have done this and now let's give a try a simple try so what i will do here is that i'm going to have the number so if i click on the cancel i will go back to my uh to my login page and if i click on the phone number then here i'm going to add my number so my number is nine five six three zero one two five seven eight all right and now if i click on the send odp what is actually going to happen is it will actually going to call this set up recaptcha and now what i'm going to do here is that i'm going to click on the send otp so if i click on the send otp my otp should not be sent but i should be able to see the captcha first so let's click on it and you will see that i can see the captcha now and i'm saying that i am not a robot and if i click on this captcha then in that case i need to now send the otp so what we have to do is in order to send the otp if we go back here then here you will see that whenever you your captcha is resolved you have a callback function and if you want to send the otp then here is the function send a verification code to the user phone so we are going to make use of this signed in with phone number function so let's go and let's use this function so i'm going to go back to my user auth context and in the user of context let's have here sign in with phone number so i'm going to have the signed in with phone number and what i will do here is that once i have the captcha rendered i have to return something so i'm going to return here a function and this function is going to be signed in with a phone number and what happens and what actually it takes as an argument the first argument is the auth instance so we already have the auth instance so let me have the auth instance and the second parameter it actually takes is the phone number so we already have this number so i'm going to copy this and i'm going to add the phone number and there is a third instance which is called the application verifier for our case the verifier is the recaptcha verifier so i'm going to copy this and i'm going to add it here all right so we have done this and now what is going to happen is whenever we uh resolve the captcha it's automatically going to call this function and then it's going to take these parameters and based on that is going to send a verification code to the user's mobile number so as soon as it sends the verification code and we are returning this function what we are going to get is we are going to get some response here and we are already console logged this response so let's go and let's give a try so i'm going to go here and i'm going to inspect the element so that we can see that what response actually we get so i'm going to increase the size here all right and let's increase the screen size as well so i'm going to increase this as well and now what i'm going to do here is that let's add my phone number so i'm going to adding the phone number here and now i'm going to click on the send otp so when i click on the send otp you will see that we have the captcha and now i'm going to select this captcha so as soon as i select this captcha you see that i have two console logs the first one is the number which i have used and second is there is a confirmation result that a verification number is already sent to the phone number which we have added here so now what we need to do here is that we now need to just verify the otp which is sent to the user so let's have a jsx where we are going to once we get the otp we need to switch the screen to the otp screen so let's go back and let's create the otp screen so i'm going to go here and i'm simply going to copy this so let's copy this form all right i'm going to copy this form and i'm going to add the form here and here i'm going to have the verify otp function and i'm going to keep this same and this will become basic otp so let me have the otp and instead of this i'm going to remove this and for this i'm going to have the form control so let me have the form dot control and then inside the form control i'm going to have the type as a text let me add the text and then i'm going to have a placeholder so i'm going to add the placeholder as enter otp and then i'm going to have the on change so let me have an on change and this on change we have to have an event and then i'm going to have the set otp and this set otp will actually have the event dot target dot value but right now you will see that we don't have anything related to the set otp so let's create one more state variable i'm going to have a constant i will have the otp and then i'm going to have the set otp and this will be equals to the use state so we have that and then we also don't have the verify otp function so let's create a simple function here so i'm going to have a constant i will have the verify otp which will be an error function and it's going to have the event so let me add the event and i will simply going to have the event dot revenge default all right and i will save it so right now we have this uh verify otp and this is giving me an error so i will just refresh my page all right so now we can see that we have two screens the first one is the send otp and second one is the verify otp so let's change this to verify by otp and what i want is this will if i click on the cancel it will go back to the login page and we also don't need the captcha identifier here and now what we need is we only want to display one screen at a time so let's create a state variable as a flag so i'm gonna go here and i'm going to have a constant i will have a flag and i'm going to have a set flag all right and this will be equal to the use state and the initial value will be false all right and then what i'm going to do here is that here i'm going to add a condition so let me add a condition so i will have a style here all right and inside the style i will add a display so if this flag is true then in that case i want to display this block and if not then i want to display the nut all right and i'm going to simply copy this and i'm going to add the same in the otp form so if i go here and we are going to add same and here it will be this one all right so now we only see one screen which is the otp screen and what we need to do here is that whenever we get the confirmation back so here we get the confirmation in the response so i need to store this confirmation when i make use of the verify otp i have to use the same confirmation object so what that what i will do here is that let's create a state variable and i'm going to have here a confirm confirm object and then i will have the set confirm object all right this will be equals to the use state so now we have set it and what we are going to do here is that as we console the response i'm going to set the confirm object so let me have the set confirm object and that confirm object will actually take the response all right and once we get the response i want to switch the otp screen so switch to the otp screen i'm going to set the lag so let's change the flag to true all right so now this is going to switch the screen to the otp screen all right so now what i'm gonna do is now let's give a try so what i will do is i'm gonna change this to my uh other numbers so here let me select the country so i'm gonna select uh india and i'm gonna add my number here all right i'm gonna click on the send otp and then i'm going to verify the captcha and as soon as i verify the captcha i am getting an otp on my phone so now what i will do is i'm going to add the number so the otp which i got is 819738 all right and now i'm going to click on this verify i misspelled the verify spelling so let's fix that so let's go here and this will change to verify and when i click on this verify button then we don't see anything is happening because we did not write any functionality for the verify so right now if i simply do a console.log then we will just have the otp number so currently we don't have any functionality for the verify so if i click on this verify then we see the console the otp number so now let's add this functionality so what i'm going to do here is that now let's go here and here if i select that if the otp is equals to empty or the otp is equals to null then in that case what we will do is we are simply going to return from here all right but if it's not the case then what we are going to do is i'm going to do a try and i'm going to have the await and we already have the confirmation object set in the confirm object so i'm going to copy this and let's add the confirm object here and on this confirm object we have a confirm method so i'm going to have the confirm method here and in the confirm method i'm going to send the otp number all right and let's have this async all right and now if i go here then we will see that how a user is going to sign in the user with a verification code so how you can do the verification code you will have the confirm object on that you will have the confirm code so i've just added the odp on this confirm and now once this is done what i want is if a user is successfully authenticated i need to navigate the user to the uh so let me add the navigate and i want a user to be navigated to the home component so if the user is authenticated then i have to navigate him to the home component so let's import this navigate so we already have the use navigate so let me add the use navigate all right and here what i'm going to do is i'm going to create a constant navigate is equals to the use navi you navigate all right we can use this instance of navigate here but if this is not the case then what we have to do is we have to catch the errors so let me have the error and then here i'm going to have the set error and the error will be error message and i will also do one thing uh i'm going to set the error as an empty because we want there shouldn't be display any error message when we actually try it so i'm going to save this all right so now let's give a try so what i'm going to do is i'm going to close the console log and here i'm going to select my number so let me have my number and i'm going to add my number all right and then i'm going to do a send otp and i'm going to verify the captcha and as soon as i verify the captcha i'm going to get the otp so let me have the otp and the otp this time is 994825 all right and now i'm going to click on the verify otp so as soon as the otp is so let's try with the wrong otp first and i'm going to click on the verify otp and you will see that the auth invalid verification code the code is not valid now i'm going to provide a valid code and i'm going to click on the verify otp and this time you will see that the user is successfully authenticate and we have signed in a user with this phone number so if you want to verify let's go to the uh firebase console and in the firebase console if i click on the users then you will see that we have a user is validated now with a phone number all right so now if we go here and if we click on the logout then we already have the functionality so now the functionality is completed now we can sign in a user with a phone number as well so let's give a try if i want to sign in with a google then i'm going to click on the google a pop-up will be open and in the pop-up i can select which account i want to open so let's select this one and you will see that now a user will be authenticated and i'm going to have here so if i go back here and if i refresh it then you will see that now we have two users one is registered with the phone number other one is registered with the google and if you want to try with a email and the password then we can do a sign up so let's have a sign up with a the page test at the gmail.com and i'm gonna give a password of one two eight and i'm gonna click on the sign up all right and as soon as the user is signed up so if we go back here and if we refresh it then you will see that we have the third user so let's go back and i'm going to have the the page test and i'm going to select one two three four five six seven eight i'm going to click on the login and a user will be logged in so now we have done this and that's all i have in this video i hope you liked the video uh thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter and the latest code of this sign in with phone number will be available in the same repository but there will be a separate branch of a phone or so you can download it and play around it thank you thanks for watching

Channel: Dipesh Malvia

Views: 39,598

Keywords: firebase tutorial, firebase, firebase tutorial for android, firebase developers, firebase react, firebase auth, firebase react auth, firebase react authentication, react auth, react authentication, react authentication and authorization, react firebase tutorial, react js auth, reactjs auth, react js authentication, reactjs authentication, react signup, react login, otp verification in react js, firebase phone authentication, tutorial

Id: IivlA4o5RkU

Length: 33min 18sec (1998 seconds)

Published: Thu Feb 17 2022