Flutter - Firebase Mobile phone Authentication| Firebase otp | Tutorial

hello guys i hope you are in a good state of your health um today i'm going to show you the most uh famous method for logging in with nowadays which is phone number login so i'm going to teach you with firebase firebase phone authentication and i just installed my app on my real device on my phone and and i am showing it to you via visor so i just type my number i press login and it will take me to captcha okay verifying you are not at a boat and after that i need to type my otp code which is one two three four five six because i added this number in my testing devices so that's why i'm not receiving the message for the otp i will also teach you that how you can uh integrate or how you can add your number in firebase testing numbers so when i click verify it will show me a tools that you are logged in successfully so without wasting time just um we are going to create a new project in android studio so let's move forward so after clicking create a new project i need to specify my sdk path which is as default and i need to define my um location for this project and i will just keep it like this and i need to change its or i need or i can create a new folder in that click um phone firebase phone auth firebase phone auth folder name just click ok and automatically this will be our project name and i am keeping the i am keeping the remaining options as it is so click finish and it will creating a new flutter project okay so our new flutter project have has been created successfully so let's explore few things that okay library so i don't need this demo code so i'm going to remove it okay so let's remove this as well now we need to create a new file dart file so we can show our phone number otp where we can write our otp code so let me create a phone number screen stateful sdf when you write stf then it will show you new stateful widget code phone number screen okay alt enter and we have to import our material files and now we need to specify this screen in our home phone number screen and okay so this screen is connected with our main file press enter because i'm using the latest flutter sdk so that's why it's we need to add const modifier this is the latest update of this okay so then we need to create a simple simpler screen app title we need to pass text widget here title is phone auth and after that we need to specify our body and container child center after that child again and or we can just remove this or just add column children and we need to specif and we need to specify two uh children's here um basically two text fields which one is for um for typing our phone number and the other one will be uh for otp code okay so text field and sized box so we can add some space between them and the other text field and after that sized box height can be 10 again and after that elevated button for performing functions text login okay after that we need to run our app so we can see that what type of screen we created so i just connected my real device here and i'm clicking play button run button basically i'm just keeping this part so the video can be shorter so when the app will be installed successfully then i will continue this video so the app is installed successfully let me show it to you okay so the screen is looking like this so let's add some makeup to to the screen main access alignment main access alignment to center and hold reload and see what happens okay so the screen goes in the middle and i am just adding a margin of 10 from all sides and let's see that okay now it's looking good and just ignore these lines or we can add const modifier in these lines here and now we need to add the label in these so we can add decoration input decoration and label label text as a phone and here as well we need to add the decoration label text is what code okay launched modifier and here as well okay so the screen is created pretty much okay now we need to define our controllers phone controller text editing controller okay the other one controller is for otp otp code controller text editing controller okay now we need to pass these controllers in our text fields phone controller like this here or tv code controller when you add these controllers then you can hover it and you can see that it is showing you this so we can remove our const because okay now we need to add the const in here now it's looking fine okay so now we need to verify we need to create a method to verify our number and send a otp code to that specific number okay now pretty much everything we have created okay now it's looking fine now we need to attach our firebase with this project for that you need to open your firebase console after that you need to create a project here so that is not a major because i already reached at my limit so that's why i can't show you that how you can create a project on firebase but you can watch my previous videos in this playlist so i will you can see in that video that how you can create a new firebase project okay so um while creating a new flatter sorry firebase project you don't need to specify more of the things just you have to follow three steps um okay ad app you need to select android and after that you need to open your end studio project and you need to find your package name which you can find it from app level build.gradle okay so here is your package name after that you need to specify your ssh key which can be obtained very easily i already showed you multiple times in my previous videos that you can how you can extract it but right now i'm showing it to you again just open terminal it will specify it will take you to to this project automatically cd android i'm moving it to the android directory now you need to type this command signing report and press enter it will take maximum one to two minutes after this command uh executed successfully this will look like just you need to just copy this okay and you need to type this here register app okay after that you need to download this config file just click download okay and you need to drag this file in your project and right in the app folder you need to paste this okay so you can see that in our android directory in the after that in the app directory you need to specify this google services.json file okay then which is our next step next you need to specify your class path just copy this line click ok again okay and you need to open your project level build.gradle file which is here and you need to specify your class path here and after that you need to move next step which is apply plugin you need to copy this line and this time you need to open build.gradle file which is an app folder okay you need to paste this line here firebase is connected with our project successfully now we need to click next and continue to console and authentication sign in method and we need to enable our phone method see what i was telling you that you can add your phone number from this and you need you can specify your verifica verification code which you which you want to use with this number okay when you click add it will add this number but right now i'm using a dummy number that's why it's showing me an error that uh it can't be added but when you write a perfect number or a real number then this can be added and press save and it and you can use that method for enable save so phone number is enabled okay now we need to move open our pub.tab and flutter fire i will mention those links in [Music] and this in the description of this video as well overview so first we need to add two libraries which is firebase oauth and firebase core so we can search for firebase score this one copy you can copy this from here and open your project and open your pubspec.yaml file and in our dependencies you can add this okay after that we need to use the second one which is firebase auth search yeah this one is right firebase auth copy this and open your project and paste it here now we need to get these dependencies just click pubget it will download these dependencies in your project so the dependencies have been downloaded downloaded successfully now we need to use these dependencies with our project okay so we need to create a new variable here firebase auth instance no only this okay after that we need to go into our verify number art dot verify phone number there you can see multiple things we need to provide phone number verify when the verification is completed when the verification is failed when the code is sent and if the code auto retail timeout for example if the if the user haven't added the code in our otp field and haven't verified its code then what will happen so we can right now we need to right here we need to specify our phone number which we can obtain from our phone number controller phone controller dot dot text okay so verification completed what we need to specify here phone auth credential credential and okay and verification failed firebase auth exception exception and like this and what will be here code sent string verification id and end resend token okay and what will happen when the code is expired verification [Music] id okay so everything is pretty defined so what will happen here this method is used when our firebase is automatically verify our phone number for example if the sim is available in our mobile phone in our real device then sometimes it automatically detects that phone number is uh or code is received by this device so it will automatically verify so [Music] auth sign in with credential credential and dot then and right here we can just print in our that you are logged in success fully like this okay and this is basically a promising function so we can await oh that's why it was showing me another we can see that why it's showing you can ignore this for now and for the verification if the verification is failed then we can exception dot message print this message in our console and when the code is sent basically um mostly this method is used that when the code is sent and what will happen okay so we are saving this verification id because we need to use this verification this verification id in our next method so string verification id which can be like this and we can save this verification id you can change this name like this just copy this and paste it here okay now um after that we need to set state and we need to call our no we don't need to call our different method okay so right now i'm just keeping its visibility to invisible and bool otp code visible false i want to be code visible false and i'm just otp code visible and i am changing its value here so after the code is sent then we can see our otp field for right now we are uh otp code visible if the otp code value is true then we can show the text login otherwise verify oh we need to remove our const keyword here yeah now it's working fine okay let's press hard reload and see what will happen yeah now it's looking good so now let's add oh we need to change our input method for this field as well um yeah input type text input type dot phone or reload and why it doesn't show me [Music] okay when you try to run then you can see that no firebase app is called so for that we can just open our main.dart file which is here and right here we need to initialize our firebase app so future null async and widgets flutter binding dot ensure initialized and await firebase dot initialize app like this and what is right okay now try to run our app again again it's showing me the error just wait for a few seconds now let's pause stop our app and try to run our app again okay so now the app is installed successfully now you can see that it is not showing me the error that firebase app is not initialized due to this code okay now we can try to send a code to our number double three and see whether it's okay so again now it's taking me to recaptcha okay okay and yeah now you can see that we can see and here you can see that we received a code from this okay now we need to type the method for verifying our phone number so if then what we have to do if it is not visible then what this button will do if it is not visible then verify number and if it is visible then verify code alt enter create method and yeah [Music] like this and after that we need to create phone auth credential remember that we saved this credential the verification id received which we are receiving from code sent method so we are going to use this in here okay phone auth provider okay dot credential and we need to see we need to specify the verification id verification id received and sms code which the user is going to provide us otp code controller dot text [Music] okay after this await auth dot sign in with credential credential dot then and after this we can type print you are logged in successfully so we need to make this async okay right now yeah it's looking fine to me now press hot reload and try to run your app again how to restart your app see now i'm going to again type my number here again it's taking me to recaptcha see but yeah i received another double three four five nine two table three four five nine two okay so i'm going to click okay and you are logged in successfully see it's simpler method to provide your users so they can use just so they don't have to remember their passwords so you can just verify your phone number so let me show it to you that whether we have our users here or not see this is our phone number this is the user unique id and it's created on october 16 and provider is phone number so by using this method it's a very easy method to implement you don't have to type a lot of code you can just simply provide this functionality to your users so they can easily login into your apps and they can use the most latest and most favorite you method okay so subscribe our channel and press the bell icon so you keep receiving updates for our new videos bye

Channel: Proglabs Official

Views: 1,318

Keywords: proglabs, flutter beginner tutorial, flutter otp verification, flutter otp firebase, flutter otp login, flutter, firebase, authentication, firebase authentication, firebase authentication flutter, mobile phone verification, mobile, phone, otp, verification, firebase authentication with flutter, flutter video tutorial, flutter firebase authentication, phone authentication, flutter phone number verification, flutter phone verification firebase, flutter phone auth firebase, flutter otp ui

Id: WiitMUTSj1U

Length: 28min 53sec (1733 seconds)

Published: Thu Oct 21 2021