Phone number OTP Authentication Flutter firebase | mobile authentication flutter firebase 2023

foreign [Music] once again and in this video I will tell you how you can verify the phone number using Firebase in flutter so before starting first of all I am going to show you the demo app so let's open this this is my phone number here and you will see I write my number here and now I am going to click this button Center and make sure your Wi-Fi is formed okay now I click on this send button again and this type of dialog box is open and you will see here the code is appeared and now I am going to write the code here and after that I click on this verify button and you will see that the front page is open and here I show the ID so now let's open the Android Studio so this is the project which I have created for verification flutter and now I am going to create a project in the file date so you will see that I created this project so I have a new one so open this project and if you want to create another new project then you can create it and then go to this authentication section and you will see this type of layout then go to this this sign in methods and enable the permission so you will see that here I enable the permission to click on this icon and then enable this and then save this and after that you have to enable this email and click on this enable button and after that go to this save button and now you will see that we enable the phone number permissions and now I am going to create this Json file form here and to this download these Json services so you will see that the file is downloaded and now I'll rename this and write Json Here and Now copy this file and paste in and and now copy your package name so inside this file this is your package of this project so copy this package and write inside this Json and then open this little Dot writer file and paste this file here and after that open this file bit.gradle and paste this Library here and then go to this land ordered file and press Ctrl s and now open this file first and write the Firebase of and remove this space from here and now press Ctrl s and click on this button [Music] and you will see that this library is executed successfully now first remove the horror codes on here also remove this code and for now make this comment and now I am going to create a file and now copy this class name from here and all from the main activity and you will see this type of error and press Alt Enter to import this and now before starting first I will tell you in flutter if you want to verify phone number using Firebase then you have to create and generate the SHP one key and paste it inside your 5S project and to create the sha1t I create a separate video so first you have to check that video that how you can create an sha1 key in flutter and you have different methods for that that's why I created a separate video for so let's start first I am going to create the first page which is like this okay so first I am going to create this page [Music] foreign [Music] thank you [Music] thank you foreign [Music] thank you [Music] thank you foreign [Music] there is no difficulty in this design first I create this type of interior phone number text in this code and give some color font size and follow it and after that I create this type of text field here like this so I simply don't want to show my phone number so that's why I use this otherwise you don't use this text to hide the phone number and after that I store that value inside this number and give some color that style and then he used this decoration attribute and inside this decoration attribute I fill this color and if you use this fill through then your color is changed otherwise this type of spirit color is low chance and then I give some prefix icon and after that give thin text and like this and after that I am going to create this the subnet button and for separate button I use this button theme for height and width wrapper that I create this place button with the icon and this label and if you want to use this Splash color then you will give it okay otherwise you will skip it and now I am going to create this submit button which I have right here so this is the submit button and insert the submit button I am going to send the code to the phone number which user enter so inside this function I create this first I am going to import this so press art enter to import and here I use the number and here time out is the time when your code is expired so I'll write five seconds here and after that I am going to create this verification success variable so inside this variable I simply show some text like this verification and here I write verification and then I simply print the credential so this function runs when your code is successfully sent then this function is run and now I am going to create this variable from space for verification Fields if the code is not sentence this function runs so I could read this function here and I simply show a print message if the code is not sent so here I simply print the message if there is any error so that's why this function runs if there is any error then this function run and show this message and after that in this course end so this function run when the code is sent so if the code is sent then I am going to create a dialog box so I create that function here and inside this function I simply call and other function which is sms4 dialog and I am going to create this function and inside this function I am going to design that dialog box and now I am going to declare this verification code so I am right here and one variable for SMS code when the user entered the SMS code in the dialog box then I am going to get that code and paste in this SMS group so cut from here and paste here so that's where this error goes you will see that and now at the end this code Auto renewable time out is the Callback which gets called when the time is finished for the auto retrieval of the code okay so now let's I am going to create this project here and inside this code I simply gets the verification ID and store inside this verification code and now I am going to create this function which shows the dialog box here [Music] foreign [Music] okay so now I create this alert dialog box and inside this dialog box I simply create the title which is enter code and after that I use this attribute which is content and inside this content I simply create an edit text user enter the code and after that I simply create a verify pattern so when user enter click on this button I move the user to the home page so now let's write the code here so first I get the current user and now I am going to check if the user is not equals to null thank you which simply means that if the app is installed in the same device where the code is sent then this if condition is run otherwise this else condition principle so if the unit installed the app in its own mobile and then write its own phone number then the code come is phone number and after that in that case the user is not equals to null okay so that in that case this condition is 1 but if the app is installed in some other phone and I provide my phone number then the code comes in my phone number and in that case the user is null so in that case this else condition is run so now if the code comes in in the same phone number where the app is installed then this if condition is run then I simply remove a dismiss the dialog box and after that I will move the insert the home page so now I am going to create a home page here first so this is the home page and inside this home page first I import this Library create a stick for class page and copy this top page and I arrived over here first code is for the dismiss of the dialog box so first I business the pop-up and after that I move the user to the home page so click Alt Enter to import this homepage and after that if I install the app in my mobile device and use the phone number of some other person then this else condition is run and in else condition I use the SMS call which user enter here okay so now first I dismiss the dialog box and after that I call this sign in function and now I create designing function here and insert this sign in function I use that SMS code which which user writes in the dialog box and use this verification ID so if the verification ID and this SMS code is matched then simply I move the user to the home page here and and otherwise I get I show this error messages inside this print a so if you want to show the toast here you can do it but I simply use this print approaching and show the error so now we have done with this code and now I am going to create sorry now I am going to record this home page and show the ID of the user inside this home page and now I am going to override the init method so you will know that when the app is run the first method which is run is in each method and you see I override this in each in its State method and inside this first I declare this uid and now I am going to import Firebase auth Library and you will see that here I get the current user and after that when the current user is get I simply get the user ID and store that ID inside this uid variable and now I show this ID here and remove this container from here and I create us this class by using this class I first add the app bar and after that I simply display this ID okay so this is very simple and now I am going to call this this phone verification class from here and you will see that phone verification and call this class from here so now just run the code and see what happens and when I run this code first time it says me sorry when I am going to generate the sha1 key then it will save me that at the Java form inside the environment variable so you have to download the Java jdk first and then set the Java underscore home path in your environments okay so you will see that the app is running successfully and now I am going to write the code here so I write the code here and now click on this send me and you will see that this type of error this app is not authorized to use Firebase authentication please verify the crack addiction name and sha1p so yes you have to generate the s h a one key of this project and include in the Firebase project now I am going to generate the sha1 key and for that I follow this method so go to this and open in this terminal and right so right here signing and press enter and you will see that here the build is filled failed so now just open this bladder from here and then these five make this whole comment and now paste the files [Music] and I will see this type of file and now again open this file go to terminal and write the foreign [Music] to installing the files and you will see that this is successful but in your device it takes some time because I install the second time okay that's why it's takes less time but in your device when it's the it is installed it takes sometimes okay so wait for that and this method is long and if you want to apply the first method then you have to watch my other video here I tell you some other methods which are very simple and now I am going to write here and you will see that when I press enter it provides me the key sha1 key now I copy this sha1d from here okay copy this key and go to the Firebase project so this is the Firebase project and open the properties sorry settings and inside these settings you will see that first here the package will call Dot example.com but my package name is four underscore verification underscore further so make sure the package name is same with your project package name so what I am going to do is I am simply delete this app remove this app from here remove app permanently and now I am going to add the app so it's the Android now the right package name there so the package plan is this file yes so it actually moves in this file and paste the package name here and now you will see that here the sha1 key and again I copy the key face the FCC one key here and register the app and now skip this one this because I already added the Json files and also skip this and in your case if the package name is this package name is same with this package name then just simply right right click on this add fingerprints and replace the fingerprints here okay and now you will see that our project is completely connected with this Firebase project and now I am going to run the app again and I simply remove all the files from here and you will see the app is it restarted and now open this app and one thing which you have to remember is enter the country code log 0. and I am in Pakistan so my country code is +92 and you have to write your country code so now press this send code also make sure that your Wi-Fi is on so you will see that here the code so I write the code here [Music] and now click on this verify button and you will see that the home page is open and after that here is your ID so that's it for this video and if you have any problem when you implement this code then you can tell me in the comment box and see you soon thank you foreign

Channel: EasyCoding with Ammara

Views: 1,269

Keywords: mobile number otp authentication flutter, mobile otp authentication flutter, flutter phone authentication firebase, Phone number OTP Authentication Flutter firebase e, mobile authentication flutter firebase, firebase phone authentication flutter, phone number otp authentication flutter firebase, phone number otp authentication flutter firebase optimizer, phone number otp authentication flutter firebase 2023, flutter phone authentication 2023, flutter phone authentication ui firebase

Id: mpAHWljxAZY

Length: 30min 4sec (1804 seconds)

Published: Sun Feb 19 2023