Master Phone Authentication in Flutter with Firebase: A Step-by-Step Guide

hi everyone in this video we are going to be building a simple flutter app where we are going to be adding phone authenication using Firebase first we'll be creating a simple login page there we'll be adding the authentication logic where we are going to add the logic for sending a OTP to phone number and then verifying a OTP and with the help of that we'll be completing our app and at the end we will be also testing our app in a real device so let's begin first we need to visit Firebase console and from here we can create a new project let us create a new project let us give the name as phone click on continue we don't need Google analytics so we can disable it click on create project till that time it is creating our project we can create a new flutter app use flutter create command and type the name of the app in this case it will be phone or Firebase tutorial now our project has been created click on continue and here we need to add our application click on flutter if you don't have Firebase CI installed then you need to install the FB CLI first you can do it easily using nodejs just run the global Firebase tools command and it will install it and you should have flutter SDK to create flutter apps now flutter create command we have already built our flutter app now click on next now we need to also activate our flutter CLI so for that we can go to the directory of our app and run this command first it will activate flutter CLI and then we need to configure our project paste a code for now let us build it for Android only now open the app inside your vs code you can use code space Dot and it will open directly inside your vs code now we need to go to our left folder here you will find that Firebase options. do file has already been created when we configure our Firebase project it already added this file now we need to go to the next step here we need to initialize our fbas app so simply copy this code and come inside our main. do file here in our main function first we need to initialize all the widgets so for that use widget flutter binding do Eno initialized it will initialize all the widgets and now we can run this since it is using a weight we need to make it async and now Firebase is not inside our application so we need to add the dependencies just open the terminal inside vs code and use flutter Pub ad to add the dependencies first dependency that we need is Firebase code and second dependency that we need is Firebase SP just add this two dependencies just verify the dependencies inside your per.ml file now both the dependen icies are added we need to import Firebase from Firebase code do do and default Firebase options was inside our Firebase options so just import it now the next step that we need to do is to visit our Android folder and inside app visit build. gridle here we need to change our minimum SDK version to 19 otherwise it will not work and next just now we are ready to run our app run our app and test if our app is working successfully then it means that we have initialized fire base successfully our app is running it means that we have configur Firebase correctly inside our app now let us build a simple login page UI first first here I will create a new folder I will name it as pages and here I will create a new file it will be login page. do now I will use a stateful widget and firstly I will remove this demo homepage code and for now our homepage Let It Be Our login page currently we don't have anything now let's build a UI first we'll have a scaffold and inside the body of our scaffold we'll have a column and will have childrens let us add an image to make our UI more better so for that we'll be creating a image folder first now I've have added this login PNG that we are going to use this in our login page since we are using asset images first we need to add the assets inside our PB file so just write the name of the folder and it will run pubg first we'll use image. asset and the name of our file and the folder where our file is there images and the name of our file was login PNG now you can see that our PNG has appeared now after that we'll keep a size box of height 10 to add some spacing and after that let us add a text hi welcome back let's add some styling increase the font size to somewhat 32 and font weight to [Music] w700 then we can add a text enter your phone number so continue now let us add another size box of I20 for more spacing and here we'll add a text form feied we need to also add some decoration so for that we'll be using input decoration here we'll pass a border as outline border border radius Let It Be border radius do circular 32 now it has got some circular radius here we'll be adding a prefix text Let It Be + 91 now here we are getting bottom overflow to fix it we can wrap this column with single child scroll view it will remove our error and our label text will be enter your phone number and after that we'll add some more spacing for that we'll add size box of high 20 and now we'll give an elevated button on press we are not passing anything for now the child will be a text it will be send OTP now we also need to add some styling we'll be elevated button do style form background color Let It Be colors do yellow and foreground color Let It Be colors do black now let us add it inside a sized box size box of with double do Infinity increase the height to 50 now here what we can do we can wrap this column with a container and provide the height as media query do off context. size. height what it will does the container will consume the full height of the device and the container is having a column now we can make this image WP it with an widget of expanded now you'll find that is taking the whole area as much as possible we can change the fit of image to box fit do cover inside a column since the center things are not looking that great we can give a cross AIS alignment as cross AIS alignment. start now all the items are in start we can reduce the size box here or we don't need a size box now it is still not looking that great we can add some padding so for that we need to add padding to this text this text form field and the button for that let us Swap this with a column and move all this inside that column now here also we need to add cross AIS alignment to cross AIS alignment do start and here we can add a padding by our choice let it P as 10 or 12 so now our login page is ready now let us add The Logical code that will help us to communicate with Firebase so here I'm creating a folder naming controllers here I will create a file name on service do do here I will create a class name it as or Service First here I will declare a final static variable it will be a return type of pbas s let's name it as Firebase or and we need Firebase or do instance now here we need to write the function to send M OTP to user it will be a static function and it will be a future [Music] send OTP let's make it as async here we will use Firebase do verify phone number now if we use this it accepts a function when verification is complete so for this what we can do we can return nothing for now and if our verification is failed we can also do nothing and code Auto retrieval timeout we don't need this for now here we need the code sent here we'll be getting the verification ID and first recent token and now we need to store our verification ID for that we can create a static variable here it will be a return type of string and here we can store the verification ID like this and this will be the function when we have completed sending the code we call this function as async because it will take some time to execute and here if anything error happens we can accept some error functions like required error step function error step function error step and then we can per form our error step and we can also add some Next Step function that will happen after our code is sent so here we can call the next step now here let we need to also add the timeout for time out Let It Be seconds 30 and we need to obviously we need to pass the phone number plus 91 so here we need to also accept the string of 9 [Music] phone and here it will be our phone now this is the way how we we ver send a verification OTP to a phone number we are not doing anything inside verification failed or verification complete if anything error happens we are directly handling this inside this step so we are skipping all the steps now let us write the function that will verify the OTP code OTP pick code and login it will be a static future function login with OTP here we need to accept required string OTP make ITN and here we'll create a new variable it will be for not provider do credential here will will we need the verification ID since we have using this as a variable outside the function we can access this and now the SMS code it will be OTP that we are receiving now here we can try catch so user will be a with Firebase or do signin with credential and our credential was CR that we have created so if user dot user is not equal to null it means the user is signed in we can return success we'll be using this success string and if we get any error we can directly return error in OTP login and here if we get any exception fire base or exception we can catch it and return e do message do to string for that reason we are returning string as string value because we can get the message directly and after that if something else except five b exception happens then we'll be directly return returning e do to string now we have written two functions that will first send the OTP to the user and verify the OTP code and login now we need to add some more function to log out the user here it will be static future log out it will also be ASN here we don't need anything just use firebase. sign out when we call this function it will sign out the user and and we can also check whether the user is logged in or not for that we need to create another function it will be static future let it be a return type of BU is logged in make it asnc our user will be our user will be underscore Firebase or do current user and if user is not equal to n if we have an user then it will return true and if we don't have a user then it will return false if we don't have have a user it will be null so it will return false now inside our login page now we have not added any text editing controllers so first let add a text editing controller it will be our phone controller the text editing controller and another one will be our OTP controller we can also add some validation let us add a form key it will be a type of global key and return type will be of form State add another key let's name it as form key one this one we'll be using for our OTP now here inside our text form field we need to pass the controller it will be our phone controller and we can WP it with a form here we'll pass the key as form key since we have added some key now we can also add a validation so use the validator property so for now most of the phone numbers are of 10 digit we can check if value do length is not equal to 10 it means it is either greater the 10 or not equal to 10 then in that case we can return invalid phone number and else we need to return null now our validation is also done let's just test a validation F uncore form key do current state validate now let's try to validate now here we are getting the inv valid phone number the color of the border is coming purple we can change it instead of our color in our color scheme we can use colors. yolow now it has change now let us call our art service dot send top here we need to add our phone number phone number was inside phone controller. text and here we are using in we can make it a string and we need to pass a function error step inside the error step we can simply show a snack bar use scaold messenger do off context do show snack bar and we'll pass the SN magar our content will be error and sending OTP we need to make this in text now we can also change the background color to color red and the text color to colors. white now if you face any error then we'll be showing this error error step and here we need to pass the next step what we want if we are able to send the OTP then it should show a dialogue box so for that we'll use show dialogue here we need to pass here inside our Builder we'll be showing an alert dialogue it will have a title of text OTP verification and inside content we'll be having a column where we'll have children's first text will be enter six digigit OTP let's add some spacing for that we need to add size box Let It Be of height 12 now here we need to add our OTP text field so for that let us use text form field the this text form field will be similar to this so we can copy it like this our form key will be different for this we'll be using form key one and our controller will be OTP controller here we don't need a prefix text and if our value is not is equal to six we'll be returning invalid OTP so for now let us go to our console and here we need to go inside build authentication here we need to choose get started and now click on the native provider phone here we need to enable it and we can also add some text phone numbers for now let add let us add a text phone number and also test OTP and save it now our phone provider is now enabled here we are having our normal keyboard here we need to have our number keyboard for that just use keyboard type to key text input type. phone so now it is is a type of phone number now the keyboard type has changed you also inside our OTP we need to change our keyboard type to text input type. number now let us type the number here this is the test number that we have created now when we are clicking on send OTP so our OTP got sent and here we are getting a verification code so for that uh this dialog box is to Big we need to change the column here just change the main access size to main access size. minimum it will reduce the size and after that we need to change cross access alignment to cross access alignment do start and here we need to also add some buttons after our text form field here we can use actions after column we can use actions here will have a text button text will be submit now you see it's showing the OTP screen here we need to enter the OTP so for now submit button will have no action we need to first uh first we need to add the verification for that we'll use form key do current state do validate just add a n check here now it will also validate the OTP now see it's showing as invalid OTP now we can call a service do login with OTP here we need to provide the OTP in our case our OTP will be inside the OTP controller do text if you remember inside our login with OTP we are returning success or error or the error exceptions or messages we can use then after the step is performed then what we are going to do if the value that is coming is Success since we are returning success here so if our value is Success it means that we have logged in successfully the was correct in that case we'll first close the dialogue box we'll use Navigator do pop it will close the dialog box and then we'll be using Navigator do push and here we need to push it here we need to push the user to the homepage for now we have not yet designed homepage let us create a new file it will be home page do do for now let's just create a simple stateless widget here we don't need to do so much changes for that reason we are using stateless widget now here in Navigator push we can pass our material page R our context and it will be homepage now if everything is right we are going to navigate the user to the homepage else we are returning some other values like error in ODP login or the exceptions or the errors in that case we can show a snag bar we'll be simply copying the snag bar and paste it here here will not show error in OTP you will show the value that we are receiving now just suppose if we send an OTP and then we add some wrong OTP we'll get this error message and we also need to to close the dialogue box so for that we'll use Navigator pop context now let's try it again so just try it again let's try to give some wrong OTP it's showing as verification code is invalid check for correct verification code now let's try to enter the correct verification code so now we are logged in and this is our home page let's just add a simple scaffold we can add an abar abar of title text homepage remove this const now just remove the automatic leading change it to false it will not show the leading and here we are using Navigator do push it will push replacement because we don't want the user to go back to the login screen again and now let's just have a center and child will be a column here first will inside our childrens we'll have a text great Q are now logged in and here we'll show a sized box of height let it be 20 to add some spacing and after that we'll add one outline button we are not doing some we are not giving any decoration for now let it just be as log out just use main access alignment to main Access alignment. Center now if we press this log out we need to call the or service do log out and then we can push the user to the login page again here will use push replacement because we don't want the user to get back to the homepage again it will be simple you will use you will be using material page route passing the context and it will be our login page so now if we try to log out we are now redirected to the login page now what we can do we have written a function is logged in it will check if user exists or not we can use this first we can create another stateful widget it will be check user log in or not here inside of in it State we can call or service dot is log then and it will either return true or false so we need to check if value if it's value it means it is true then we'll use Navigator do push replacement to material page route context to our homepage directly and otherwise will be redirecting the user to the login page so it will be login page and our home screen will be our check user screen check user is logged in or not now let us create one one more test number now let us use this in login now we are logged in if we restart the app you will find that we are now getting redirected to the homepage directly but here it was showing a placeholder what we can do instead of a placeholder let us just use scaold and Body Center child circular progress indicator now tell the time it load it just showed a circular progress indicator now that is more better than a placeholder we skipped a very important step that we need to add our sh1 key otherwise phone authentication will not work in real devices so let's do that now we need to open our new command promp here we need to navigate to our Android folder where Android Studio has been stored it is Android folder and here you need to paste the key to list command and it will show the sh1 and Sh 256 key here we need to enter the password for now if you have not done any changes the default password will be Android and here we have a sh1 and Sh 256 key just copy the sh1 key and inside project overview go to settings project settings here we need to add our sh1 fingerprint and save it now our fingerprint has been added now we are ready to test on a real device now we are on a real device this is how to loog screen will look like and after we enter a real phone number when we click on send OTP it will open a popup we need to choose the browser where we need to verify that we are not a robot and this thing can only be disabled during production So currently you you don't need to worry about it and then we need to wait until the OTP arrives and now we need to enter the OTP click on submit and this is how it will work in real device so that's all for this video I hope that you'll like it

Channel: Snehasis Ghosh

Views: 2,597

Keywords: Snehasis Ghosh, flutter, flutter tutorial, flutter tutorial for beginners, flutter firebase tutorial, phone auth firebase flutter, firebase flutter authentication, firebase flutter tutorial, Phone Authentication, OTP Verification, User Authentication, Firebase Authentication, Firebase Phone Verification, Flutter Authentication, Secure Authentication, Firebase Phone Auth, Firebase User Authentication, Flutter Firebase Authentication, OTP Verification in Flutter

Id: 5gkJ8ZfbCHw

Length: 44min 23sec (2663 seconds)

Published: Tue Oct 10 2023