Flutter Firebase Phone Number OTP Authentication - Flutter Firebase 2023

today we are going to learn how to perform Firebase phone number authentication in flutter first let's quickly have a look what we are going to achieve today let me just run the application you can see welcome screen has appeared we have login and sign up previously in the previous tutorial we learned both login sign up and logout using email and password but for today's tutorial click on sign up and this time we're just going to use the phone number and when I'm going to press the sign up button it will send a message on this device and then it will be redirected automatically towards the dashboard screen so let's try it hit the sign up button this is the OTV screen if it's not going to do it automatically we have to enter the OTP manually so the code has arrived and we will direct it to the dashboard now let's try to send the code on another device but first we have to close it and this time when we are going to log in again it's not going to go towards the login and sign up screen or the welcome screen but redirected towards the dashboard because of the previous tutorial we created how to keep or how to keep the state of the user and also over here at the top we have our logout option so when we're going to click on this it will read it will be logged out and again let the user sign up so this time I am going to enter another phone number which is not currently inside this device but will send the phone number on another device so we can enter the phone number manually so let's click on the sign up this time let's wait for the code to arrive so we have code arrived double seven one two double eight and at the last digit it will automatically going to execute the on submit function and you can see we have successfully redirected towards the dashboard so this is what we are going to achieve today as you can see we are creating photo login application design portion has already completed and now we are creating the backing portion and this is the third tutorial of phone number authentication and previously in the first tutorial we already learned how to set up the Firebase in flutter I'll drop the link of the Firebase playlist as well as the complete flutter login playlist Down Below in the description you will get the link from there okay let's break down the today's tutorial you can share your divided into two parts the first one is the setup and second one is the coding the first thing we have to do is to enable Firebase on authentication inside of Ibis console once enabled then we have to add sha1 and sha256 in the console and the third one is for the recapture this is a new thing that Google uses or the Firebase uses for the authentication for the verification Android device verification we have to enable it once done we're going to perform the coding we will get the data from user which is the phone number and send the code on the phone number once the code has been sent we will get that OTP which is six digit AP and pass it on to the second function to verify it and allow the user to log in today's tutorial is very simple so make sure to watch the video till end because otherwise you might have some confusion so without wasting time let's get started first and foremost you can get all the links and all the code from codingwitty.com so don't worry about it link will be in the description so this is a Firebase documentation for the phone authentication again I'll drop the link inside the phone authentication you can see the first thing is we have to enable phone as a signing method inside the files console so let's open the 5S console using console.yver.google.com we will open the project the project we have already created in our previous tutorials if you are new you can watch the previous videos okay let's go to authentication go to signing methods inside the sign investor you can see I have already enabled but to enable it go to add new provider click on this phone number and make sure to enable it from here click on the save button and that's it okay so once enabled let's head back to documentation the second thing is we have to add sha1 or sha256 inside the Firebase console file back over here click on this gear icon go to Project settings okay in here you can see we have two apps Android and iOS for the Android we have to add a certificate fingerprints we can add these two certificates over here but first let's try to get these there are two methods but we will go for the recommended one so let's get shs certificates for that we have to open our file explorers go to see inside the users go to the main user and then you can see we have dot Android folder open it and inside you can see we have a debug dot key store so this must be over here to run the command and then we're going to right click open an interview if you don't have option to open it in the terminal because we are currently targeting the users demo currently this location so if you don't have if you don't know how to open it in a terminal you just have to provide CD and then you just have to paste this Command right next to it hit enter and you will be pointing to the same directory so once we are pointing to this directory we have to run this command and here you can see I have all three commands again I am going to drop these commands inside the description below you can get it from the coding with t for the windows we just have to copy this command paste it over here but remember that we are not going to use it like this because we have not paste this command hit enter and you will get the file does not exist in the debug.key store because we have to add a complete path over here the path that we are currently pointing to this path so copy it inside the paste it inside over here hit enter and you will get all the details this is the sha1 and this is SSH 256 so you have to copy it next to these columns go to Firebase console add fingerprint paste it and you can see it's automatically going to highlight sha1 save this one copy sha256 most of the time on the 256 or sha1 is going to be very fine but not for the confusions just add just add both save it and you can see we have both added the next step is to so we have completed two steps for the setup the third one is the Android device verification you just have to go to console.globe.google.com inside the apis you have to go for Android check dot Google api.com and make sure you have to click on this enable button currently it's enabled once the setup has been completed let's head back towards our project inside in case if you are getting some error you just have to open the terminal run this command filter fire config hit enter this is just going to override all the previous activities and it's also going to add sha1 inside the files you can see it's currently running Pub upgrade so it's been basically upgrading the things here's a list of projects we have already logged in if you're confused over here that how we logged in and how all these projects are being listed then you have to watch the first pro the first tutorial which is to set up the Firebase because we have already set up so that's why and we are also logged in that's why we are getting all these projects so we are going for the flutter login aggregation hit enter Android and iOS again hit enter just going to get the fresh data and you can see Firebase options or dot inside the look folder over here it's already created file Productions so if you want to make sure I want to override yes we want to overwrite and that's it configuration has been completed and just add on let's just clean the project run the flutter plane and then we're going to run filter top get patient test so all application is now neat and clean let's minimize it and now let's try to start coding at the top you can see we have already defined Firebase initializations previously we're working on the authentication repository so again if you are new you can watch the previous videos if you don't want to previous videos now always enter the repository previously we have created authentication repository okay we are inside the authentication repository we created in our previous tutorial for the login and sign up using email and password and this is when the user loads when the application runs the application is going to be opened it's going to redirect to a new screen let me show you the code as well if you're new so let's not confuse with this tutorial the reason I am adding all the Firebase inside over here because the design should separately be placed inside the design file backend logic should be separate inside the backend controller and the same goes for the Firebase all the authentication related to Firebase should be inside authentication repository okay nowhere here let's try to create a function okay it's a return type is void its phone authentication and we have just passed phone number it's Dynamic but you can Define string over here because it's a string type 1 number so first and foremost go to prospector DML file inside you have to call Firebase core and also Firebase authentication once added over here you just have to call the file with auth.instance and using this instance the indication dot Wi-Fi phone number and these are all the functions that we have to create control order to align okay first and foremost we have to pass the phone number so let's create a phone number pass the phone number to it this is a string type and also this should be a string type then on the verification completed we will get credentials user credential you will add functionality later on and verification field we are going to get the exception inside the E variable then when the code will be sent inside it we are going to have two things first one would be verification ID and Cyclone release and token and then inside the timeout again we are going to pass the verification ID okay let me just explain but before we have to make sure that all the queries should be inside the weight and it would be an async function just have to add async over here okay now first try to understand what this query is doing we have to add a weight sign people want to perform all the queries asynchronously so we have to call wait at the start of the query and async over here future Android is optional so the first thing we have to pass the phone number to this query so it will get the phone number and this verification completed function will be executed when the phone number is sent on the same device which requested the phone number this function will automatically be executed and without asking the user it's going to redirect the user towards the next screen in case of success scenario right and if this automatic authentication or verification is not going to be executed then the code will be signed using this function the verification ID and we have to create user credentials we are going to create in a minute and then using that credential we are going to verify if the code is valid or invalid this code Auto retrieval timeout is going to be used when there is a Time bound thing and we want to resend the verification code after some time of enter level so then we have to use this function and when the verification field will be called there must be something going on and we will use this to throw some exception so let's start with the first one over here we have to again add a weight because we are going to call authentication DOT sign in with credentials and we are going to pass the credential over here not credential there's a credential and let's make this async so when the verification completed will be called we just want to make sure that user is signed in using the credentials credentials passed over here if you don't want to let the user sign in or you want to perform something else then you have to perform it over here the next one is the code sent when the code is sent we need to get this verification ID and alert the user enter its OTP so it's going to take a time that's why we are not going to perform anything over here but we want to get this OTP for the later use that's why we are going to create a variable at the top verification ID is equal to null at the time means nothing but it will be observable now this Observer is going to be observed this verification ID so whenever there is change inside the verification ID it's going to automatically update its all children's so let's use this verification ID inside the code sent this dot verification ID dot value is equal to verification ID so basically this value is going to be called the string inside it because it is a string type verification ID so this verification is not a type of string but it's a r extreme you can see over here it's our extreme because it's observable typically called the string we have to call the dot value right so here verification ID and same to keep things simple inside the code Auto retrieval let's say we are also going to get the verification ID if there is change or we resend the code after some time of interval we also need this verification ID inside this so we initialize it now let's see the error inside verification code we get many multiple codes but for now let's say we have e dot code invalid phone number when the phone number is invalid we're going to show the snack bar else if it's not the case you can show you can give it any error but I'm just adding something went wrong try again basically you can get all the error codes from here Firebase documents for your documentation authentication admin and errors I'll also drop the link in the description and these are a bunch of the things that we can play with okay now our phone authentication has completed but remember we want to create another function return type will be wired verify OTP this is going to be called when user enter the OTP and we will pass OTP over here no because we want to let the user sign in using the OTP you can see here the top we have sign in with credentials the credentials was automatically created and passed but in here we don't have automatic equated credentials so that's why we first have to call the wait sign because it's an async function then again using auth DOT sign in with credentials and this time you have to call phone Port provider dot credentials and inside you can see we have to pass the verification ID and the SMS code which is the OTP get by the user so verification ID is list of verification ID dot value and then the code is basically the OTP code at semicolon.com basically we can change this void to move in and as its return type as it's async so we have to wrap it with the features this line is going to return the credentials so we can get the credentials like this and if let's say credentials dot user note is equal to another you want to return true when it because it's verified otherwise you want to return as false and let's add to turnpike at the start so basically the statement is an if else it's saying that if user credential dot user note is equal to no means the user is logged in written through otherwise return false okay once these two functions created we will go towards the sign up form widget so this is the text field that is using the phone number so we want to get the data from this field and when this user is going to press the OnePlus button and in the previous tutorial we learned that how we can use form widget using the form key you just have to create a key at the top assign the key to the form and over and down below in here inside the on press button if the form Key current straight validated because there is a validation then we were calling the register user and Performing email and password authentication you can see we're passing email and password but let's just comment it for today's tutorial and let's just call signupcontroller Dot instance or phone authentication and inside we want to pause controller DOT phone number dot text and also make sure to add trim to remove the spaces okay now let's add back towards the controller okay how we are call following this because we don't want to add logic inside our design so at the top I have called controller which is the signup controller using get dot put so once we have controllers we assigned all the values to all the text fields and when the user is going to hit the enter button using signupcontroller dot instance we are heading towards this function which is an empty function inside our signup controller let me just show you as well inside the features you can see we have signup controller over here and inside the screens inside the sign up we have form widget over here so this is the design and this is the logic we now head back towards the controller and in here you can see we are calling the phone authentication and passing the phone number so same way we are going to call the authentication repository and we are going to call this function in which we have to pass this phone number so at the top you can see we use static authentication repository and get instance created the same way filebase auth is using the instance so we have also created our instance head back we have to recall authentication repository dot instance dot font notification and inside we have to pass the phone number we get from over here and that's it so basically this function is calling the form authentication it is going to perform get the phone number try to complete the verification then do send the code call this function and then from the OTP we have to call the verify OTP so let's go to the OTP controller same wise I have created OTP controller over here and inside the forget password you can see we have OTB screen created right over here so let's go to OTP controllers this is a simple controller extending get x controller and again I have created static instance of this controller create a function verify OTP we will pass string and it will be an async function because we want to use again the same way authentication repository dot instance but this time we are not calling phone authentication but we are calling the second function which is the verify OTP and we will pass the OTP get inside this function and you can see we are getting whatever the result is inside this is verified because this function is returning Boolean over here and using this is verified we can perform the redirection if it's verified we will get towards the dashboard and remove all the screen using get dot off otherwise we will simply close this OTP controller and get back to the previous activity so far we are done with the coding now let's try to run the application if you have any confusion and if you have any question related to this topic you can ask me down below in the comments one more thing we have to call this verify OTP from the OTP screen over here if you follow the design we created the OTP text field using a specific plugin so inside you can see inside the on submit we will get the code over here and we were printing the code last time but for today's tutorial we don't want to print it let's remove the previous code we are going to get this code and we also want to pass the code over inside the next button because there are two scenarios so let's first create a variable OTB type variable and we're going to assign this OTP with this code because let's say when this field is automatically going to be filled using six digits then this OTP then this code will be fetched over here and this on Summit will be executed but let's say if there is some error its field is not going to be automatically calling this on submit then we need to press this next button so we are going to call OTP controller dot instance dot verify OTP first OTP same inside the second so we'll pass same inside the next button so if in case it's not working this button should execute and get the code from here from this code and pass to the next screen for your application but then you forget one thing inside the form widget when we are going to call this signup controller phone authentication and we also want to redirect towards to the OTP screen you know when the authentication process has started we will switch towards our OTP screen so so now let's try to run the application click on sign up to First have to enter the phone number make sure to add a country code then add your phone number open the run method let's delete everything click on the sign up and you can see we redirected towards the next screen and it's currently waiting for the SMS to arrive you can see SMS has arrived and because SF has arrived on the same device so we automatically redirected to the dashboard screen if in case we are going to receive the OTP on another device we will get the same results so let me show you okay first let's try to close this application and open it again and you can see we have again redirected towards the dashboard not whatever login and sign up because of the previous tutorial we created the own ready function so again if you do you can watch the previous tutorial so let's just close this I added a sign out button over there on the logout button okay our application is logged out now click on the sign up press paste another number which is not currently inside this device and click on the sign up let's just wait for the code to arrive because your code has arrived which is zero one five nine one zero and that's it this is the code in here you can see we have an error which is the OTP controller not found you need to call get output so if you are facing this error this means that inside the main you can Define your OTP controllers and also at the top of the OTP screen when the screen loads you can call its instance like this OTP controller get output OTP controller this is just going to create its instance a good practice is to create all the instances of the controllers inside the main.click on sign up add number delete the data hit sign up wait for the message into the OTP and that's it you can see we have automatically redirected towards the dashboard so this is what we have created today in today's tutorial I hope you learned something new if you learned something new please like the video and if you are new to the channel don't forget to subscribe and hit the Bell icon to get notified about the next videos or the upcoming videos again you can get the code from the description below and thank you for watching take care a lot

Channel: Coding With T

Views: 70,210

Keywords: flutter firebase auth phone number, flutter firebase login and registration, flutter firebase phone authentication, flutter firebase otp authentication, flutter firebase otp, flutter firebase otp verification, firebase authentication flutter, firebase phone authentication flutter, firebase phone auth flutter, otp authentication using firebase in flutter, otp authentication in flutter, coding with tea, flutter firebase auth tutorial, flutter firebase authentication

Id: dGwr66EkJKk

Length: 21min 43sec (1303 seconds)

Published: Wed Nov 02 2022