Flutter Firebase Phone Authentication

before we start let me show you what we will be building today so today guys we're going to build a really easy phone verification app with flutter and firebase you can see we have this sign in screen here we also have a sign up screen because sometimes you also want to store additional details for a user for instance their name and that we will store in firestore database but for phone authentication we will only use firebase authentication and there will be no email and password verification everything will happen via phone authentication so you can see i'm entering my number if you don't have a google play certified app yet it will sometimes do your recaptcha screen so we'll also cater for that then once the phone verification has been done you'll receive an otp or a code via sms in our case we're just using a test code at the moment and we can say submit and it signs us in so i will show you how to do all of that how to create test numbers in firebase to test with and also test with an actual device so let's get started so first of all i'm just going to create a new flutter application by saying flutter create and let's call this flutter phone verification all right now once that is done we will just go into that directory now that we've got a blank project here we want to actually go to firebase and create our project there so let's do that now let's go to firebase and we're going to go to the firebase console and we will create a new project here i'm going to say add project we're going to call this we don't really need google analytics now so i'm going to leave that out i'm going to say create project all right now that the project is ready we can click continue now the first thing we want to do is we want to go to authentication and we want to enable authentication so just click on get started so firebase might not look exactly the same because they changed their interface a lot but it will be similar to this so once you're there you can go to sign-in methods click on phone click on enable and click on save so this will enable phone verification what you also want to do is in my case we're going to do this is you can add a test phone number so i'm just gonna add a test phone number here and because we're in south africa i'm using a plus two seven test number and i'll show you why now but you can use any taste number here just enter the country code and then the number i'm just gonna do let's just say zero let's just say one two three four five six seven eight nine and the verification code would be one two three four five six all right and we're gonna say add all right and as you can see here we now have a test phone number to test with so this is so that we don't have to test with an actual device and send sms's the whole time which could also result in your number getting blocked for a while the other thing we want to do is we want to go to cloud firestore and enable that this isn't necessarily uh required it's just nice to have because we might also want to store additional details of the user so for now i'll just start this in test mode all right now we've got a database we've got authentication set up now what we want to do is we want to go to our project settings so for now let's just add an android application here and we have to give it our android package name so if we go back to our code here we can just go to android app build.gradle and it should be inside here there you can see it says com.example.flutterphone verification so we're just going to use that and let's just go back there we go and we're just gonna call this again android app for now but this will essentially be our flutter app let's say flutter android now you'll see here it says debug signing certificate optional this is actually required for our phone verification but we won't only need sha1 we'll also need sha256 for phone verification especially if you're doing offline verification but we'll do this at a later stage so for now you can just skip this and say register app all right we're not going to download this google services file right now we're just going to say next here you can see they give you quite clear instructions on how to add the firebase sdk to your application in this case it will be our android application inside of flutter then we can just say continue to the console we can now go back to our flutter application and continue here so as you can see we already have our um application deployed during the terminal so we used flutter run and it's running here in the in our actual device not an emulator and you can see if you just press a little plus button it will just increment the number on the screen so that's the default flutter application and we don't need any of that so we'll just delete all of this so what we'll need is we'll need a login screen we'll also need a register screen and this is so that users can sign up and then we'll also need a locked in screen so this is for users who is basically logged in authenticated and that is kind of where they can be taken once they're logged in so let's start with the mind.org here all right let's first do the register screen here logged in screen there we go so now we can actually go back to our main screen here and it's time now to first of all um add firebase to our application so the first thing we want to do is we want to go to flutter fire so if we go to flutter fire this is what we'll be using to you to use firebase in our flutter application so these are a bunch of plugins created by google themselves to basically help us integrate with firebase so if you go here to the overview they have a very nice example here of how to get started to initialize your app um and you can either use a future builder or a stateful widget i'm going to use a future builder and you can basically just copy and paste this code into your main.dart so we're going to replace our main. with that code so guys in our main.dart file you'll see here that i've already implemented that future builder example that they have so you can see here i've implemented it almost exactly i've only added some theme colors here and some basic text here and there but for the most part it's exactly the same as their example here on flutter flutterbase.flutter.dev if you go to flutter fire and you go to the overview so i've implemented this exactly and then also what's important is you'll have to remember to add these dependencies to your pub spec or the amal so that's for um firebase core for authentication it's exactly the same and for cloud firestore so you'll see in our pubspec.yaml i've already added that and then what's very important the next step is that in order to to have phone verification work if you go here to authentication and you go to phone off you'll see that there's a couple of steps here that you'll have to follow for android ios and web so for this demo i'm only going to initialize the android part but you can very easily just add in xcode push notifications and fcm that will enable phone off in ios in android it's a little bit more difficult so you'll have to add these sha ashes to your code as well to your firebase project so i remember you we spoke about that earlier so in your console you can just run this command key tool dash list v dash alias android debug key dash key store there's an example of this if you go follow this in example and you click on authenticating your client you can literally just copy this this code that they have here you can just copy and paste it into your terminal and once you do that um if it asks for a key store password and you don't have one just press enter then you'll see it will generate the certificate fingerprints now for both the sha1 and the sh8256 keys you will have to copy them and you will have to add them in your firebase um project settings which i have already done here as you can see then you you'll also have to make sure that in your build.gradle files so for instance in your android directory inside of flutter in your android directory inside of there there's a app directory and then inside of there you'll have to download that google services json file and place it inside of there so if you go back to flutter you'll see this google services.json file you have to download that now and you have to add it inside of your app directory inside of android inside of your project directory so inside there you'll also see inside that app directory you'll also see a build.gradle file make sure to change this min sdk version to 21 otherwise phone authentication won't work also make sure that you have this apply plug-in com.google.gms google services plugin here as well this is also very important and also if you scroll down make sure you have these three lines of code as well as dependencies this one is firebase bom one is firebase auth and this one is android x browser all of these are required for firebase file authentication to work this x browser for instance is when you don't have a verified app on the play store and you're just testing locally it will most probably ask you to do a recaptcha and that is where this browser implementation is also necessary then if we go to the other build.gradle which is in your android directory to that file just make sure that it looks exactly like mine and also if you go into dependencies here make sure you have this class path for this com.google.gms dependency and obviously make sure you have the latest version and yeah that's basically that if you go to your settings with gradle as well you you can just double check that yours is looking like mine um but it doesn't really need adjustment and i think that's all that you have to do in terms of all of the build.gradle files and the google settings and all of that so now we can go back to our login screen and continue with that so guys now we've got our basic login screen here and as you can see it's not looking like much at the moment so what i'm going to do is i'm going to just add a login form and then i'll be right back all right guys so uh let me just do a audrey start here and you'll see that i've now added a form here basically we just have a phone number a sign-in button and a sign up button so if we just go through this code very quickly we've got basically just our form key and we've also got a form key for our otp screen which we'll get to now we've got a number controller for our login screen which is our phone number we also have one for our otp controller which you can't see at the moment but we'll get there then we've got some boolean values here just some checks to say is the form sending or loading or not this is recent it's just a check for the otp to see if we are busy resending or not um is this a login screen or not and then the verification code so i'll explain this in a moment don't worry too much about that here you can see um what we've done here is we've basically said that if we're already logged in so as you see here at the top we've obviously initiated our firebase oauth instance and now we can use that firebase off to say if off.currentuser circle check if there is a current user um if it's not equals to null then it means we are actually signed in so in that case take us to the logged in screen all right then uh obviously also just normally do a normal unit state we have our dispose method here which will basically just dispose of our number controller if we leave this screen we actually should do the same for the otp controller and then we've got our widget built method so what we do is we basically say if this is our otp screen show that otp widget otherwise show the login screen widget so right now we're basically in the initial state we're in the login screen that's why this is login screen is true so in that case we're gonna we're gonna see the the login screen which is what we're currently seeing we have our normal scaffold with a form inside um inside that form we've got a basically two elements a sign-in button and a phone number number input so for that sign-in button you can see here let me just go a little bit down here you'll see this elevated button here so we basically say if the form is if our state is currently loading if it's not loading show this elevated button which will then handle our sign in and then if it is loading show the circular progress indicator here so that's just what we're doing there very basic um sign up button and also if you then click on that or on for that on pressed method for that button if you click on the button or you tap on the button we basically just check the state of the form if the form is valid basically if the phone number is filled in because we have this empty validator for the phone number if that is filled in display the snack bar quickly that says please wait and then we do a wait login so we'll get to that login method now that's why it's commented out then we also have below that the no account and sign up button which is basically just some text and if you click on that it will take you to the register screen then um if we are actually um signing in we'll show the the otp screen but we'll get to that just in a second so don't worry too much about the otp screen right now we also have this little display snack bar method here which basically just displays a snack bar so right now at the moment if we type in a number here let's just say that that number that we have as a test number and we say sign in you will see that nothing is actually happening at the moment it just says please wait that's because we actually have to handle the login however i want to do the login last um because i first want to go to the signup screen and show you the sign up page so right now if we tap on sign up we only see this empty registration form so what i'm going to do is i'm going to create the sign up screen as well and then get back to you and show you the progress all right guys so i've created the registration screen and if i do a hot reload here i can quickly show you guys how that looks like so if we click on sign up it should take us to the register screen there we go um and there you can see we've got a name and a cell number now technically we don't really need to store any of those um i just like to store some user data as well and i think it's a real world scenario where a lot of times you will have a sign up screen like this where you will be storing user data so in our case the name is basically the only unique data we're storing of this user and i'll show you that now but for now let's just quickly go through this code so again we've got it's very similar to the sign in screen we've got a um a form key uh for our normal form here for our registration form then we've got an otp form as well which we've just copied from the sign-in screen and then we've got some controllers for our text again we've got some states here that we're just managing with booleans now again this is just to test with you can do this a lot better if you want to so you've got a loading state again resend an otp screen states for the otp or the code that they sent to you verification code which we'll get to and just to check to see if we're on the otp screen or if we're on the register screen and by default we are on the register screen so that's why that is true we've got our dispose methods here and our normal its state here again very similar to our login screen we've got a little conditional check here um in our widget bolt uh method to basically just say um you know if this if we're currently on the otp screen um then show the otp screen i'll show the register screen so obviously right now the is register screen is true so we're going to see this register screen here um then what we have here is just a basic scaffold um and this uh this has got a column we're performing again exactly the same as the login screen the only difference here is we have an extra field called name um which in our case is which is the user's name obviously and then the cell number um and both of these has got their controllers so there you can see and we also just disable them if they if they're um if we're loading this if they were in the loading state then this will be disabled then we just let me just go down here then we also have a next button as you can see there and if we press on that next button we have this sign up function that we call which is currently right here at the bottom sign up and as you can see it's just empty at the moment because i want to go through through with you guys go through the logic on that but also when we click on that its register becomes false and isotp screen becomes true so let me show you what will happen normally a user will now type in his name let's just say bob and his cell number one two three four five six seven eight nine one and if we click next this is a screen that we'll see when um when firebase is actually sending us or has sent us an sms with the otp or the code the verification code that we need to type in so obviously it's not doing anything now but this is just to show you this is the otp widget that you're seeing here which i've also created and basically you can go back and that will take you back to the signup screen to the login screen so that's just a nice to have let me just show you that again so let's just say my name is bob cellphone number and click next and that will take us to the otp screen obviously we haven't sent the sms code yet or the otp code yet we haven't done any authentication yet so let's do that now so let's handle this sign up method here so obviously we want to sign up um when we also want to use firebase phone authentication for that however we also want to store that user's details so when we do um when we go into the signup method when we tap that we want to do or we want to start the verify verification process or the verify phone number process so first of all let's just set our state here and inside there we'll just say is loading equals true so that will just put the form in a loading state obviously um then because we are from south africa um we will have a phone number starting with a plus two seven and you can implement this in any way that you want um you can have like a little drop down next to your phone number for users to select their country code and all of that i'm just adding that in here manually and then we want to add the cell phone number which our user typed in so that will just be the text i always do a trim as well because that's i think best practice if there's any spaces and that sort of thing in then what you want to do is we want to actually do the phone authentication now if we go back to flutter fire here and we go to phone off you'll see that there is a method that they provide here for flutter now this would be the same for ios and for android um so you can see we can basically just copy and paste this directly there's four different things here that we have to implement and that's why it's not as simple as email verification you have to implement this verification completed verification failed code sent and code retrieval timeout so there's basically four different things here verification completed is when obviously when the the phone number the code has been sent and the verification has been completed um however this is the this will only trigger when when your phone tries to manually read the code from your sms um this will only happen on android devices so just take note that this is only um you know for for sms for android devices that can automatically grab the code from your sms so this doesn't always happen then verification fails you obviously have to handle that sometimes a number tries to log in too many times and it will fail as well code sent will basically um will trigger once the code has been sent from firebase and then code auto retrieval timeout is basically just a timeout for the retrieval so let's go implement that and again i'm just going to copy and paste their code exactly so if we look at that first part what i want to do is you say verify phone number and we can copy that exactly from the firebase sdk and you can see it's already implementing that so we can just do something like this okay so for the first part the uh verify phone number we want to actually pause it our phone number that we have created here from our text input so we'll do that right here and just to make things a little bit clearer i think we can just do something like this then verification complete and you can see as well it says starts a phone number verification process for the given phone number this method is used to verify that the user provided phone number belongs to this user so they can see um so obviously if the verification has been completed um we will get a phone credential so i just want to add that for an off credential that is what we'll receive back and now we can basically you know do whatever we want um because once this has happened we're obviously already verified and we can navigate the user to to the login page however in our case we also want to store some details into the firestore database so for that we're just going to do a normal fire firestore database set query so i'm just going to do that quickly and then i'll show you how that looks like so first of all what we want to do is once we the verification has been completed we want to actually sign in the user so to do that we're going to say off dot sign in with credential and we'll use this phone off credential that we received to actually sign in so we will take that i just want to make this a variable here and not a class and we will pass that through to our sign in with credential method here so once we're signed in we can then call the then method the value that we'll actually receive back will be a user and we can then do something like this and inside there we can then do a check to say if just a double check to say if the user is not equals null because it will also return null if this failed so if it's not null it means we are logged in so what we want to do then is we want to store our users details in the firestore database as well so we want to say a weight and to do a weight we have to do async so we say wait and then we want to call firestore again remember we initiated firestore and fire off right at the top there okay so don't forget that so there we've got um and again this part is not necessary that's what i'm doing now it's just if you want to store details of your user in the database so we're going to say collections and we're going to store that in the user's path and we're going to say the doc and we're going to call our logged in user and we're going to use the login users uid um to actually create that document so that documents id will be the same as our user's id and then we'll set some data inside there and remember we're just storing the name and again we're using our name controller dot text and we'll just do a term there and then also we're storing the cell number again we don't really have to store the cell number because it's part of our current user but it's nice to perform queries on so we are also going to store that in our database and then what we also want to do is we want to make sure that we're not overwriting um our users details so i want to do a merge and this is so that if a user accidentally you know registers for a second time we can just merge the details he typed in there so in that case i'll just do a set options and we'll just do a merge through um so after that once that has been done we can then just say then and then inside there we can just set our state again just here set state okay and inside there we just want to say we're no longer loading so loading is loading is going to be false we're also going to say we're no longer on the register screen so that's going to be false we're also going to say we're no longer on the otp screen so that's just setting our state a little bit there again there's a lot of better ways to do this and then we also want to just do a navigator and we want to do a we want to navigate but you also want to remove the root so we're just going to do a navigate dot push and remove and then what we'll do there is our new route will just be a material page route and we'll just do a normal build context and we'll we'll navigate the user to the logged in screen okay and i think that's all we have to do let's just add a thing there now we need a comma there see what its problem is here so we've got a builder build context we've got our logged in screen uh i think we need another comma there so we can say dot catch error and here we can actually catch the error from firebase which is nice and here we can say something like for now we can just do something like a debug print and we just we can just say error saving user and we can have something like on error dot just say to string okay so that should be our verification method all right so once verification has completed we will get phone credentials from firebase we can then use that credentials to actually sign in once we're signed in we can navigate basically to our login screen and in our case i'm also storing some details in the database you don't have to do this part you can just you know do whatever you want once you're logged in but we'll navigate to the login screen okay so then um just very quickly after that let me just see what's going on here um verify phone number let me just fix the syntax here because there's some missing syntax here i think this should be like this okay um and it should be a comma there there we go so now if we look at the verification field we actually receive a firebase of exception here and it will be something like i think we can actually just say something like this and inside there we can then handle that error if we want to um again i'm just going to say debug print for now just to say you know error logging in with the actual message from firebase which should then be error dot ah error.message which will return a string and then here we should also just say is loading equals false and we should just do that inside of a set state and then for the code sent this is an interesting one so here you can see it will actually send us a verification id and you can see here exactly it's going to send us a a string and an integer so the this the string will be the the one will be the verification id the other one will be the resending token so what we can do here is we can just receive this and again this code you can just copy from the fire um from the flutter fire website if we go again if we go here to phone off you can just copy these examples from here as you can see here so in our case with the code sent we just have the verification id and the force resending token and here we will handle this if we want to in our case again we're just going to set the state um so we'll say is loading is false but very important here we actually have to grab that verification id to see what it's running about here oh okay and you know we actually have to save that verification id so i'm just going to say very notification code equals verification id so now we're actually storing that code that firebase send sent us back so this is basically firebase saying we did send you the code this is the actual code that it has to be and we're storing that so we're going to check if the code that the user enters in the otp screen matches this code that we receive from firebase so we actually do check for that as well and then the last part is just the auto retrieval timeout so here there will again just be a string here and if you look at this it will have that code auto retrieval timeout starts a phone number verification process for the given phone number again if the um if the verification timed out you can handle it here as well so in our case again we're just getting the verification id and we'll just say it's loading equals false again and again um we're copying that code that we get from firebase so this is again if it resends the value the code all right um and then for the last thing here is let me just double check here we should actually handle the timeout and you can see you can force reasoning token you can there's a lot of stuff you can set here auto retrieve the sms code for testing in our case we're just going to handle the timeout and we're just going to say it's going to be a duration of 60 seconds so that's how long you would have to then also type in the code okay so that being said um i think that's everything that we have to do and then we can just actually run this this method here so we can just then say once everything has been defined here we can just say wait and verify phone number so this should actually work now and you will see inside of our code we already have two places where we run this just check here okay so the first place where we do this is if we click on the sign up button so let's just go there quickly if you click on the next button um if you click on this next button it will then actually run this verify phone number method it will then prompt firebase to send us a code and do phone authentication or phone verification then it will send us a code we will then have the opportunity to enter the code that we will do on our otp screen right here then once we've entered that you'll see that again we're doing that same sign-in with credential method that we have at the bottom there but at this in this case um we basically get that verification code from the one that we've set that we've gotten from here below so just to go through that again i know it can be a little bit confusing first of all we're going to register the user we're going to type in the name the software number click next once we click next the sign up method will run here this will do the actual verify phone number method from firebase this will send us a code um once we when once that code is sent firebase will also send us the actual code that it sent out we will then store that inside this verification code method once that is done we will have the opportunity to enter that code we received via sms inside of this otp field that we have here and then inside that otp field we do a check once we click on that button we then do a check to say we pass that verification id through because we've saved that verification code so we passed that through as the verification id in this sign-in with credential method that we're doing here and then the sms code is the the code that the user types in inside of the otp field so we pass both the verification code that fi we got from firebase and we're also typing passing the code that the user typed in so if that completed successfully a phone off provider credential will then be created and we'll use that to sign in and we'll have the same sign-in method as below so we'll basically store our user's details in the database and will redirect the user to the login screen so we can actually test and see if that's working now however we don't have a login screen set up correctly yet um so let's just do that quickly so if we go to our logged in screen here we basically just have a empty screen so again here i'm just going to create a login logged in screen quickly and then show you how that looks like so just give me one second here all right guys so now we also have a logged in screen and yeah you can see it's the same as our other screens it's a basic scaffold however once we're actually on that screen you'll see here there's a text that shows welcome and then the username which is a variable that we just have here at the top which is empty and then we'll also display the user cell number which in this case because we're logged in we can just call off.currentuser.phone number this off is been initialized here at the beginning of this screen here and then the same with the user id we're also printing out the user id so we say off.currentuser.uid and then we obviously getting the user's name from the database so in our init state method here we've got a little get user function and if we go down below you'll see we've got a future method that's uh basically for the get user that basically just calls the um firestore database and it just checks the user cell number now because we've added that in in files in firebase um in the authentication part of firebase it actually stores that plus to seven part of our number as part of the number so what we do is we basically just say once we're logged in we basically say okay let's take that phone number let's remove that um plus two seven so that's what we're doing here we're doing a substring on the first three characters so we're copying everything past the first three numbers which is that plus two seven and we're basically copying the rest of the cell for number but we're just adding a zero at the front because firebase also strips away the zero so then we've got our cell number supposedly that's stored in the database and we can just query that by saying firestore.collection.users where cell number is equals to this cell number that we get from the logged in user and if we get that user if there's results we can then pull the username the user's name from that results there should only be one so that's why i'm just saying result.talks taking the first result from the array.data and the name value so that will then return us our name again this isn't necessary if you don't want to store user details um that will then return our username and once we get that it will fill that in automatically in here because we have a set state method there we also have the sign out method that will just handle our sign out so it's just very easy to just say off.sign out from firebase once that has been done we then just do a navigator.push and we take the user back to the login screen okay so that works very well then we just need to go back to the login screen and finish our actual login method because if you remember correctly we haven't actually finished that so i'm quickly going to do that all right guys so i've added the login method here and what you'll see is i've copied this exactly from the register screen so the the entire process that i've just explained to you from the register screen um i've exactly copied that from the register screen and it's we're just reusing it here on the login screen so the only difference is between the register screen and the login screen is we're not actually um we're not actually adding a user into the database however what we are doing is we are going to check on the login screen if that user exists because we don't want to log in a user or we don't want to use this phone verification method if a user doesn't exist you can do it that way it's just you know it's just not very i would say not very usability friendly so i think it's better to just store that user's details in the database and then check if that user exists if the user doesn't exist we want them to sign up so even though it will work if you just do a sign in with the number it will actually create a new user in firebase but it will break the flow of our application so when we do a login again i've already explained all of this in the register method the only difference is we also your check if that user exists so we basically take that logged in that phone number that the user entered we then do a query in firestore to say if the cell number is equal to the number that the user just typed in then um let me just see here you say if that is the case then we actually have a a valid user if the results is more than zero then we actually have a a valid user here then we basically say then we do that all thing that we just did with the register the same thing with same process with the sign-in exactly the same process so we use that same verify phone number method with all of the different callbacks um again the only difference is once we're signed in we navigate directly to the logged in screen we don't um we don't register or add anything to the database like we did with the register screen rest is exactly the same and that's basically it and here you can see um there's a little if statement so if we go up to the top here if we have a valid user then we can do this verification if we then we can sign in the user but if that user does not exist so this wouldn't be true then we just display a little snack board to say number not found please sign up first so this should work hundred percent so let's quickly test that so now if we just do a autorestart here let me just see what that error is um register screen.18 let's just go there that's not necessary i don't know where that's coming from okay cool so now we can just do a shift r to do a auto restart and let's quickly test that so remember we created that test number so we can do a sign up first because if we go back to our firebase console and we go to our authentication you'll see that there's no users currently so what we'll do is we'll register a new user here we'll call it bob smith and the cell number we'll use our cell number that we've created so again just to show you here in sign-in methods phone we have created this number here so let's just go back and we will sign in with this number i can't remember if it had to have the zeroing in front of or not um well we'll find out so let's say next and now it's going to send an sms itp to that number now in our case it's going to do this recaptcha check and this is where that sha key was necessary for and that browser implementation that we did now we're going to add this one two three four five six code that we added and say submit and there you can see it says welcome bob smith it's logged us in now if we refresh this page here the authentication page here you'll see that we'll have a valid user here the number has been stored there we've got a user id which starts with ioh and you can see here on the screen that is correct and now also if we go to our cloud firestore and this isn't the part that i said wasn't necessary but it's a nice to have you now have your users collection here with that user's id and some details of that user with his name there bob smith and now he can sign out from the app and again from this login screen we can try to log in with that same number again here if we type in a random number like let's add some more numbers there and we say sign in it does that check for if that user exists if it's a valid user or not so in this case it's not and it's not going to work there but if we just enter the number like that and we say sign in let's just see what happens just see why that's not working um let's just go back oh i know why that's not working it's because we didn't duke up the login buttons here we didn't uncomment them so obviously on both parts the otp recent code and then also on the sign in button so that's this button here there's also a login there so if we just do a oops if we just saw a tree audrey start there we can then try again so if we type in a random number and we say sign in again it does that check and there you can see number not found but if we type in a correct number for a valid user and we say sign in it should sign us in but first it does the phone verification and again if you have a verified google play app it won't actually show you that recaptcha here we type in the code that we've set up previously again this code you will receive via sms if you have a valid number okay and there you can see it says welcome bob smith so it's working and that's basically everything you need for this to work properly we can also try this with a valid number i'm not sure if my number will work because it was blocked previously because i tested too much but let's try dave smith this is an example and i'll use my actual cell number here obviously i'll just block this out let's see if this works if i say next i don't know if they have unblocked me yet we'll see now and we should receive a sms code here if yeah there you can see they have already unblocked me so i've just received that sms code here and i can just copy that so that is six eight six nine six three six eight six nine six three submit and that will actually take us to the let me just double check six eight six nine six three six eight six nine nine six three i typed it in the wrong and there you can see welcome dave smith well i'm logged in and i can sign out and there you have it so that's both examples with a test code and a actual phone number and i hope you guys found this useful it's quite a um it's quite a lot of steps that you have to take in a lot of things that you have to do extra when you want to do phone verification but at the end of the day it's much easier for your users to to sign sign in with and sign up with so at the end of the day it's easier for your users but more difficult to implement where if you do something like email verification email and password it's easier to set up for for yourself as a developer um it's easier to implement but it's a little bit more difficult for a user i would say um but yeah this is basically the steps involved for doing phone verification let me know if you guys have any questions i hope you guys found this useful and see you guys next time goodbye

Channel: Code Base Tutorials

Views: 13,654

Keywords: programming, coding, tutorial, education, lesson, website, web, developer, flutter, flutter for web, gitlab, gitlab pages, gitlab.com, flutter tutorial, flutter sdk, dart, programming language, framework, software engineering, phone authentication, firebase authentication, firebase phone auth, auth, phone otp, mobile auth, mobile phone authentication, firebase phone number, cellphone authentication, flutter phone authentication, flutter auth, firebase, firebase auth, javascript, mobile app

Id: dTmgjPkBN58

Length: 57min 47sec (3467 seconds)

Published: Mon Feb 08 2021