(Ep 50) How To Setup Phone Authentication With Flutter & Firebase Auth

what's going on guys welcome back to the channel today's video we're going to set up phone authentication so what that means is a user will be able to log into our app with just their phone number let me show you real quick how it's going to work by the end of this so in the app here on my actual device you're going to see we now have this sign in with phone option if you click on that you're going to have the option to enter your phone number you'll see this can be done with any area code and it will validate that area code so if i type in my phone number before i hit continue if i were to change the area code which this is no longer an accurate area code you'll see it does warn me that my phone number is not valid if i change it back to the us which this is now a valid phone number and hit continue firebase is actually going to go ahead and verify that i'm not a robot and once that's verified it's going to ask me for the text verification code which you saw just came through so if i put that text verification code in and hit submit it's going to log me into the app all right let's get started all right so in our sign up view file here we want to add another button down below here that'll be uh sign in with phone so we can find where our sign in buttons are which are kind of towards the bottom i believe uh you can see this is the google sign-in button so below the google sign-in button we can add another button and this is actually we're just going to be building it as a custom button so for that we can use a raised button then we can set the color of this to be green and the text color would be white then we want the button to have an icon similar to the google one so to do that we're going to actually need to use a row here for the child so within the row we can then have um the two widgets one will be an icon and that's going to be uh icon of phone and then after that we can use actually the text and we can just set that to be uh sign in with phone so if you save that you'll see it it comes up down here there are some issues here the color is not being set well actually the main problem is the color isn't being set because the button is just disabled so we need to also add the on pressed and for right now we can just leave this blank but if you save that now the button will be green uh there's some padding we can add here around this text and to the left we'll do 14 and then on the top and the bottom we can do 10. then we're also going to want to increase the font size of this so so set that equal to 18 and then it should match the google one more closely uh so that looks good so now with our on pressed here what we want to do is actually just change the state of our page so this is where our current setup for for how our sign-in works if you haven't if you're just joining in on this video go back and look at some of those other videos and it'll show you kind of how all of this is working the main thing is you'll notice if we have our if we're in the sign in state right here you see we have email and password if we go to the create new account we're really just changing the state of this page to to be the new account form here and then same thing with the forgot password that's just a different state so we're going to add another state for the phone auth so when we click this button we're going to change that state to basically it'll be a lot like the forgot password it's going to have one field here so let's create that state uh go all the way back up to the top and you'll see these are our states right here the auth form type so we're gonna add a new state called phone and now we can kind of go through and all these variables to change based on this phone state so really when we're when we click that button we want to set the state to be phone so we can do that pretty easily with set state here and then we're going to do the auth form type which is another variable we already have set and this is what is determining the state of this form and then we can set that equal to the phone type that we just created so if you save this now and you click on the button a lot of the defaults of this are for the create new account i believe so if you click this it is going to set some of those defaults to the create new account but you'll notice not everything changed and it's pretty much not how we want it at all for this so let's go through and actually set that those states specifically for the phone so let's go all the way back up to the top and we'll just kind of go through it so the first thing we can see here is in our submit function that we have created we're now getting an error here because we do have that new auth form state type that is actually not set up here so it's pretty easy to change this we just add another case and we'll say when it is the phone type now this submit right here this function is basically defining what this button is going to do because we're using this uh kind of a stateful we're reusing a lot of the same elements and we're just changing what they're doing and what they're labeled as so this button we can change the text of in a second but basically when we're in the state of the we're in the state of the phone what we want to do when that phone button is clicked is going to be is where we're going to put right here so this is going to be done in a second so it'll be just the submit action so now let's actually find where these this form is created and the title this is build the type build the header text so that's what's going to actually set this right here so to add we just need to add in another else if here so we could end that and then say else if and we're going to be checking if that auth form type equals the auth form type of phone and then if it does we're going to set this header text state to be equal to phone sign in and if you save that you see it updates right there with the hot reload um next we can find where these forms are set and that's right here in the build inputs and this if you remember we have a list that we're basically depending on the state we're going to add a few elements to that list and then that list is going to get displayed so this email field here is always been here regardless of the state so we're going to need to actually wrap this in an if statement similar to the other the other blocks in here and we can do this pretty simply we can leave it where it is and just and just wrap this in an if statement now we're going to change this so the the states when we want the email are going to be sign up convert as well as the reset so we can add the auth form type of reset it should be there for the sign in as well so sign in reset convert and sign up should all have the email and if we go back here and look we can look this is the sign up so that still looks good if we do create a new account email is there which looks good and then if we do forgot password that is there as well which looks good the convert is when we're logged in and we try and convert to a new user so that would be similar to the that's pretty much similar to the sign up page but anyway this should do that so you'll notice the password is still showing up here the way we're excluding the password now is we're we're basically showing it for everything that isn't the reset so we're going to change this a little bit and i mean there's a few ways you can do this but we're just going to add an and here and essentially say if it's not the if the auth form type is not reset and if the auth form type is not a phone then we'll show it there i mean you could do this logic is pretty simple there's different ways you can do it obviously you could you could say explicitly which ones you do want to show it for but either way now we're at this point we don't have anything showing so we just need to add one new text field we can put this text field block in here actually it might be a little bit easier to read um and then we'll copy that whole block and we'll modify it so this is basically going to be if the auth form type is equal to phone so then we can add that new field and if we were to just put a field here we're not going to validate it with a with a validator that we're going to create instead of password we could say enter phone we don't need obscure text because it's not going to be a password and the on save we're going to need a new variable here which we can call phone and let's go ahead and define that real quick if you scroll back up towards the top we define all of those string variables right here so now we can use this basically to store the user's input uh let's see so here we are with this if we save this now you'll see the phone number field is there so that looks good we're going to come back to this and actually modify it so that we get the area code in front of it but let's finish the rest of this page based on the state so next we can find the build buttons function which is where which is actually where this these two buttons are being set the text of them the switch button text is going to be essentially the secondary text button down here which will switch you to another state and then we also have that new form state which is actually going to be the form state that we're switching to and then the submit button text is just that main text there so if we copy all of this as well and paste it right there we can start modifying it so if the if the type is phone again the switch button text which is going to be the one on the bottom that can read cancel and if it if we are canceling that we can just go to the sign in page uh which is essentially like reverting back to where we were and then this main one here can say continue so if we update that you'll see it says enter phone and then continue the other thing is we don't want to show any of these buttons below if we're on this date so to do that we already basically have it set up you can just set show social to false so you save that that looks good there so if you cancel you'll go back to the sign in page if you do the phone you're looking good at this point so now we want to set it so that we can enter the phone number all right so with firebase auth and phone numbers it's really important that we get the area code so when we're passing the phone number to firebase auth it needs to have if we're in the us that plus one at the beginning and if you're in any other country it's going to need to have that plus and then the area code if it doesn't your authentication with phone is not going to work at all instead of making the user enter plus one here like this and then entering their phone which is not a good user experience because no one's really gonna know to do that we're going to use this plugin called international phone input and it's going to give us this nice drop down where the user can just choose their phone number and then it has an added benefit of basically validating that phone number for that country so if we choose the us as the country code and then we type in a phone number that doesn't validate to a u.s phone number it's not going to actually validate that phone number we can use that to put some notices in so that we don't even try to validate it with firebase and instead we'll just tell the user they need to enter a valid phone number so let's add this package to our to our project it's pretty simple just take this dependency here and go to our pubspec.yaml and we'll add it in right there and then pub get and then if we go back we can actually grab this import here and just put that up at the top of this file and now we can go to where our where our text field is so we're going to comment out what we have so far but make sure you keep it inside this uh textfields.ad so we're gonna get their example here in the readme part and they have two different examples if you get the one with the decoration that's what we're going to want because we want the background to look similar to this that white background so if you paste that here uh there's a few things we can change here decoration first off is we do have our build sign up input decoration and we could put that right here in place of that and let's actually add a number here uh then the on phone number changed we're going to need to create a function for this and they actually already in the readme basically have that written so let's go ahead and find that which is right here so we can put this we're going to want to go above our build inputs function you can put it essentially anywhere in this file i'll do it right above that and what this is what this is basically doing is each time you enter a character in this text field it's going to pass in these values and you can you can set a state so we we do have that phone variable that we already set above and we're going to want to set that to the internationalized phone number uh if we're also going to let's let me print that out so we can see it if you print the internationalized phone number it's this one will include the plus one if it's the us or it's going to include that area code if you just print the number it's not going to include that plus one uh and then the ios code is going to be if is going to be the country code related to that but we don't really need that for this but this right here is going to be what we need so back down in that function there our initial phone number we can set to you we can set this to an empty string or you can send it to phone uh i'll set it to the phone which is going to be an empty string uh the initial selection this we're going to set to the us so that this is basically telling you what is the default country code that you want it at uh enabled countries this gives you the option to pretty much specify just a few countries if you want uh we're not going to include this we're going to allow every country and then showing country codes as false is basically only going to show the flags if it's false so if you make that true it will show both so if you save this you'll see now we have this cool drop down here with all the country codes and it is defaulted to the us but you can choose any any from this list if you start typing a number uh you'll notice there's some errors here we actually once this is installed you actually need to stop your app and then re-run it this is something that i spent a good bit of time trying to debug it it just needs to be reset essentially all right so when it loads back up we can click the sign in with phone again and now if we start typing you'll notice we're getting these blank print statements here and this is actually from our print line right here so the reason it's blank is because this this function here which is part of the which is part of that package that we installed is actually going to validate that phone number right within this so so since 804 is not a valid us phone number it's not it's not actually setting this variable to the phone number it's just going to keep it as blank so if you continue to add the number until it's valid you'll see then the phone number is actually printed uh i believe the validation is really only based on length but i'm not 100 certain on that either way this is like a test phone number that we're going to be using for now but you'll see once that's set in there we do get that number down here so essentially our phone variable here which is what we could have been printing is going to be set to this so that's good now our form is set up now we need to set up our continue button and have this action when we click it pass this phone variable into firebase and create that user account so we can find where we put that comment to do up here and this is where we can start making some modifications so this is what's going to happen when that button is clicked if you do just print out anything here and if you save it and hit continue you'll see when this button is clicked this is where the action is set up for that so with this let's first do a quick check before we set up the function we're going to check to make sure that that phone value right here is valid and we're gonna know it's valid if the phone variable the underscore phone variable has a value because this value is only going to get set if that phone number was valid so this is a quick check that we can do and it's basically going to give us that warning which we did already set up warnings like down here you can see we have the warning setup to the error message so we're essentially going to do the same thing but we're going to do it explicitly in here outside because this is not going to be caught in this catch block so anyway just a quick if statement here and we can say if phone is equal to an empty string then we're going to and you can copy this pretty much we're going to set the state and let's delete that we're going to set the state of this warning to equal the string uh your phone number could not be validated and add the breakdown here as well since we're inside this case now if we save this and if we cancel and click on phone actually change the phone so it's no longer valid and then hit continue you'll see we get that nice validation error message right there so the next thing to do is actually set up that function for firebase that is going to be an asynchronous function so we can we we can also have this function return an error and if that error if that function does return an error we can also just put this validation message so let's call the result of this function that we didn't create yet uh result and then right here is where we're going to call that firebase function so we're going to have to await it because we know it's going to be asynchronous and then similar to how we're calling any of our other functions we're going to put it in our auth class so let's just call it with off and we do need to create this in the auth class but we can name whatever we want to call the function right here so we'll call it create user with a phone uh and this is aaron because we did not create that function yet so let's actually go ahead and create this function and then we'll come back and update the error message there so in our services we have our auth service and this is where this is where our other off login services are so we also have validation at the bottom so make sure you are in the actual auth service class right here and then we'll add this in the bottom but this will be a future this will return a future and it's going to be that new function name that we just created and now there's that function so if we go back here you'll see that error is gone now uh we are going to need to pass in that phone variable which is this phone variable so it is it's that string that string value of the phone number and again this is going to include the area code already because of the way that we're saving this we need to have this accept a string parameter and we'll call it phone so now we can use this phone within our function here to create that user in firebase so we already have an instance within this class of firebase auth so we can use that right here and we can call verify phone number on our instance of firebase auth and this is this is a function that is part of the firebase auth package which you should already have installed uh in a previous if you were following along with the previous videos if you don't you can find it you can find out how to do that in previous videos and then we have all these variables that we that are available for us to pass in and actually really the only variable is the phone number and then these are all callbacks so essentially these are going to do different things based on how the verification went so the phone number here we're going to pass as that phone number that we're passing in so again this is going to be that that string phone number including the area code the timeout here is going to be how long we're going to give it to auto auto complete this this phone verification so the way this phone verification will work is it does have the potential to not require the the code that's going to be texted to you or rather not that it won't require it but that the phone has the capability of auto detecting that value and then auto verifying that it is the phone that you're on so the timeout value here while you're testing you're going to want to set this to a pretty low value because you want this time up pretty quickly so that the pop-up will come up to have you enter that text to have you enter that verification code you'll get in your text message so this is going to be a type of duration which is basically just a way to do to set time so in seconds uh we can do 10 seconds here and then verification completed this is kind of what i was just describing is this is going to be what's called if it can auto detect that and basically auto complete the request i haven't really found i haven't really had any luck with it auto completing that and i don't know if maybe it's just an android thing but basically i'm just going to leave this as null because i'm going to almost always i'm going to always require the code to be sent in the user to enter the code and actually because of that you can set your duration equal to zero so that this immediately will time out uh verification failed this is this is something we can set on our return value to error so we can set this to error and then if this fails we can basically display that same exact message there so this is relatively simple what will be returned from this is an off exception and it'll be an auth exception and we can just call it the exception now we could this exception will have a message parameter on it that we could similarly use but for now i'm just going to actually return the string error and there are some different ways to do this that would be more more sophisticated but basically if our function here returns error back here where we're calling it i'm going to just test if this result value equals error then i'm also just going to display this warning message so i'm not actually going to display the error that's returned i'm just going to display that the phone number couldn't be validated so it's kind of a simple way to do it for right now code sent this is the this is the main part of it this is like where we actually are going to send the code and then what we're going to do once that code is sent so again the way this is going to work the code is going to be texted to the phone number and then you're going to need you're going to need to enter that code to basically confirm that this phone number is your phone number or code sent is going to return a verification id and that verification id is going to be essentially how firebase auth is going to know that this phone is the phone that that phone number is for so it's going to be a string value verification id and then we can add we also this is kind of like the the default setup of of how this callback will work but we're going to want the force resetting token so when the user enters their phone number and hits continue here it's going to we're going to this code sent will be called once that text message is sent and we want the user at that point to be able to enter that verification code that they got texted to them into here to to confirm the validation of the firebase auth and then at that point we can use this verification id and that code that they enter to create a actually create a credential and then use that credential to authenticate the user so this all kind of needs to happen in the view and to get that that pop-up to happen or basically to get that pop-up to trigger when this code sent is triggered we need to we need to pass the build context into this so that we'll have the view context that we could link a a new widget to so all that to say we're going to need to pass another parameter here which is going to be the context which is the build context now this is a little bit confusing because it's so far abstracted from the view but but we do have access to the build context in this submit here that submit function because that is all called from the build so this is the build function right here and this context is the one that we're passing through the reason it's available is because it basically gets passed through uh so like through all those functions that we have so anyway we we have the context we're going to need to also add that here to this will be a parameter of type build context and then we'll call it the context we're essentially going to use it for a dialog box to pop up here so we can start with a show dialog and that is going to require that context so now within this dialog we can actually do a few things we can we can first off we can make the dialogue um have have a message that says enter the verification code that you were texted and then we also can have a text field and a button that will allow the user to do all that uh first thing though we want to make sure this dialog box cannot be disabled or rather dismissed so to do that we can say barrier dismissible and set that to false by default a dialog box can be dismissed just by clicking outside of the dialog box and that will prevent that the dialog box takes a builder and then this builder is also going to take a context and that is going to now we can choose what kind of dialog box and this will be an alert dialog box and then we can give it a title and then we can also give it a content so the content we're going to set a oh we just set it to a column a simple column in it we're just going to have just a text field so set that text field the text field is going to be pretty simple for now we're just going to need a controller for it so that we can eventually get the value that's in that text field just to find a controller up right above this and this can be a we'll call this the code controller because it'll be for it'll be represent like it'll store the code of the that was texted to the user and that just needs to be a text editing controller uh so set that there and that should be good okay so after the content we can have our action it's going to be a flat button that will trigger it and we can give our button a title which is just going to be submit and we can set the colors of this uh we can set the text color to be white and we can set the button color to be uh green we now can have on pressed action here and this on pressed action is where we're actually going to confirm that the we're going to use this verification id that's returned from the code being sent and the code sent again is what's sending that that text message and we're also going to be able to use the value in the code controller which is going to be the verification id that the user entered and we're going to be able to get a credential from firebase and we're going to use that credential basically to sign the user in so let's go ahead and create our credential here so again this credential is going to be what's used to actually sign the user in and we can get this credential from the phone auth provider from the phone auth provider we're going to be calling get credential and you can see that this is take this takes two parameters so it takes that verification id which again is right here so we could pass that in to that and then it's also going to take the sms code which is going to be the value of this text field so if we format this a little bit we can add that in here and then we're going to just want to take the text of this and then we're also going to call trim on it just to remove any white space and a semicolon at the end there so now we have this credential here so we can use the credential to actually authenticate the user so now we do have our instance of firebase auth which is this instance right here so we can call firebase auth dot no we can sign in with a credential and then we can pass it this credential and this uh is this is actually we can do the callback of this and the call the callback on this is basically going to return that auth result and we can call that the result essentially if this is successful we'll be in here and then if not we can catch the error and we can just set that error to e and for now we can print out the error but essentially if this is successful then we want to we want to do what we would normally do in this function here so you'll notice if any of these other ones are successful we're basically handling all that logic within this function of the submit but since we already are since we already basically passed the context and the view context into our auth service for this for this specific event we can also just push the home view so basically what this is saying is uh if this is successful then then redirect to the home view because we do have a user signed in and the error here is actually this needs to be down here i believe and a semicolon there oh other way around so like that uh if you command option l on a mac it'll format this all for you but yeah that is it for that the last thing uh the code retrieval timeout we can leave this as null as well it was set to nil you're going to change this so that it takes the verification id and for now we're just going to set the verification id equal to the verification id and then print that out uh lastly we should actually add this verification complete here and this is pretty simple i don't i don't think we're actually going to hit this but if we do we don't want it to just error out we want it to actually log the user in so we pretty much have that logic all going on in here with this button being cooked but essentially this is what that function will return is that auth credential by default so we don't need to do any of this stuff where we get the auth credential really all we need to do is sign in with the credential and then push the uh push to the home page so if we copy all of this and paste it right up here we can just change credential with auth credential and then basically this will work if we do ever hit that complete block there instead of printing the error here let's return error as a string and that will essentially do the same thing that we were doing here uh and then also we can we can do that and return error here as well as a string and that should just kind of hit cover all of our bases if you rerun it on your on your simulator it's actually not going to work there's a few it's not going to work in the simulator ever actually so it doesn't matter what phone number you enter it's the simulator will never send you that text message because you need to be on an actual device now there is one thing we forgot to do which is in firebase itself we need to enable phone authentication so if you go to authentication here if you go to the sign in methods and go to phone uh you need to mark this as enabled and then save it you're also going to need to make sure that you have the sha1 signing certificate for google uh for android rather and i'll link to how you do that below it's pretty simple but now you should be good you what you need to do to test this then is basically sync it to an actual device so i will sync it to my phone and then and then i will from there show you what it looks like [Music] all right while trying to run this the app kept crashing when i was hitting continue i tried doing a few debugs and and a few things i changed putting this as async i think is a good way to go since this is a future function not much else has changed i think everything else can stay pretty much the same one thing you'll notice if you do run this from xcode itself you'll see there's this error here with a uncaught exception uh basically this url this custom url is our firebase url and that needs to be added into our our url type so if you go into this is again an xcode if you go to the info tab norma if you go to targets here and then click on info and then scroll down url types uh we already have one one should have already been set from before but it seems like this has changed for some reason so add that one in here and then try running it again and that should prevent the app from crashing as it has been for me these past these past a few times to run so running it on the device again now all right so after adding that url to xcode we're on our physical device here and hopefully this time it doesn't crash if we click sign in you notice the sign in with apple button isn't here actually should be because this is an iphone at the very end of this video i'll show you how to fix that but click sign in with phone here and now i will enter the phone for this device and hit continue and now you'll notice it is it is working which is good it didn't crash so it it verifies that and then you'll see we do get our text message here and if we click on it you'll see this is the message here i was doing some testing before but this is our verification code so we can copy this and paste it in here you'll see it does come from the message and hit submit and there you go we're logged in uh if we log out and we can sign back in with that phone number you notice if we just hit continue here we do get that error as we would expect so if we hit continue it'll verify we're not a robot if you try doing this a few times it's going to do some recapture there just to make sure you're not a robot so you'll notice the message came in right there again and if we click here we'll be able to log in now you'll notice that the this dialog box is taking up the entire height of the screen that's i don't know it's not a huge deal it's not really necessary though so we could change that real quick and let me but essentially this would let us log back in so to fix that dialog box is height if we just go to where the column is here and above the child do the main axis size and then just set that to main axis size dot men it won't take up the whole height of our screen anymore and instead it will just be the the minimum size that's required to fit that box all right so for our sign in with apple button we it wasn't showing up on our actual device and that is because of the way we're checking to see if we should be showing it right here you can see we're just seeing if the version is greater than 13. now this is going to fail because we're not on version third we're on version like 13.6 or something i don't know the exact version but it's no longer a solid 13. so this is actually a very brittle way to do this and we're going to change that real quick all right so we're actually going to remove everything in this function except the set state and we're going to set that state a little bit differently so if we there's actually with this with this plugin the apple plugin that we have which is called apple sign in there's a method we can call on it that's called is available and this is actually going to give us that value that we want now this is an asynchronous function so we are going to have to wait for it so we're going to set this to a variable called uh is available and await that and then we can use this as available here and it will return true or false so we could set the state to that to that value there this is much cleaner uh it's using part of the package that we already have import and and this will this should work on our phone so uh there's a few these two packages that we were using to check the device's state we can just remove or the devices whether it was iphone or android we can remove those because they're no longer needed now if we run this again on our device that apple sign in button should be there and yes running the app on my actual device there you go i have a screenshot of it there now that sign in with apple button is displaying as we would expect great so that's going to be it for this video now we do have phone auth set up so that's another way that a user can log into the app uh this is this video was made really because a lot of people requested that phone auth was covered so if there are other topics that you'd like to see covered go ahead and comment those down below if you haven't already please consider subscribing and liking this video alright that's gonna be it ciao for now [Music] you

Channel: 1ManStartup

Views: 25,164

Keywords: firebase, flutter, development, phone number authentication, phone auth, auth, firebase auth, firebase phone auth, login with phone number, sign up, sign in, mobile app, how to build an app

Id: xN8aLbecPko

Length: 41min 26sec (2486 seconds)

Published: Sun Jul 19 2020