Flutter : Firebase Phone Number Authentication

hello my gorgeous friends on the internet how you are doing i believe you enjoyed the previous video where i showed you how to authenticate users using your google and facebook so in that video i promised i was going to make another tutorial for authenticating users using their phone numbers okay so that's what this video is all about we will see how to authenticate a user using their phone number all right so now um this is the project we have been working on and this was where we left off from the previous video all right so what i'm going to do you can see inside the prospect of the emf file i still have the firebase art so using phone authentication we don't need to add any other dependency or any package we are still going to make use of the firebase authentication all right and if you can see i'm still using the steam version which is 0.20.1 all right so i'll go to this login page and from this login page i want to create another class yeah i'm going to create another data file so this one is going to be for full odds all right full order that and i want to create a stateful widget here yeah basically because it's the widget is going to change with time so i'm going to call these okay so now we have the widgets and this can just be a scaffold and i can return an app bar and i'm going to call this just a simple app with the test as the title which is going to be full authentication right all right so now i'm going to uh currently now you cannot see this page so what i'm going to do inside this login page i'm going to create a button here yeah just a simple button here to log in with to give the user the option to log in with phone number so you can design this whichever way you want but for this case i'm just going to go with that so let's see we have the login all right so i'm going to go down to this place so here we have the okay the facebook icon and i want to put it on david so let me just format this properly all right so under here and i'm going to create the it's going to be of a container yeah i'm going to give it a container and uh i need a trading comma here all right so and i forgot to tell you that this video is going to be a little bit uh longer because i'm going to design the ui first before i start doing the implementation all right so just bear with me and let's start going so now i'm going to have a test widget so basically this is going to be for continuing with phone yeah so you can style this whichever way you want but for simplicity i'll just go with all this so you can do it any how you want so we have that but it's not nice i can just give it a margin so let's go uh it's going to be vertical so just give it 50 all right so that would be some space around and i can just give you the padding here so let's go and just give it 10 and then give it a color all right so i just i'm not going to do much work here so just give it a color of let's say detector basically it's just going to take you to the next page all right so we're going to go navigator i think i have it here so i'm just going to copy this push and remove now i don't want to use push and remove so i have okay navigator.push all right so i'm just going to copy this okay and put it here all right so now yeah we're pushing to your question to this next page which is this full alt class all right so you can copy that go back here and replace it to this and don't forget to import it as well all right so now save this and uh we have the button so if i click on it now we're going to there page all right so this is where we're going to write all our implementations also we are going to design the widget so remember for phone alts it takes two test feeds so the first feed is where the users are going to put in their phone number and then the second feed is where they're going to put the code because once you put your phone number we are going to verify the phone first and once the message is being sent we get the code we use online and put it inside the second box and then we verify the code and then if it's correct we sign the user in all right that's what we are going to do so i can close this one i don't need it anymore so i'm just i'm only going to work with this one right now all right so we're going to design the widgets uh this widget real quick so i have a body i'm going to use a container all right so i'll be fast in this but i will also be explaining why i move so i have an agent set so this is going to give it a padding around the container okay so save it and right now you cannot see the padding okay and then i'm going to give it a child so it's going to be a column uh yeah a column because i want it to show in form of yeah a column so i wanted to show vertically so i'll have the column in your case you want to put a single child screw view to make it scroll level okay but in this tutorial i don't think that is necessary so let's go with the children so the children first thing i'm going to create for the phone feed so this is going to be the phone feed uh where the users are going to put in their phone number okay so i'll also use a container for this and the container we have a margin and yeah imagine i believe i don't think this is necessary but let's let's just go with it for now okay and it's gonna be i just want to put it at the top okay uh that only okay you can give it top to be 10 all right then the next thing i'm going to do is to create the the child for this so the child since it's i'm going to create it as a okay let's just proceed so the child will have a rule okay so this is still a child and we inside here i'm going to create the the test editing controller and then we're going to get a button once you click on it it's going to trigger the phone authentication the phone verification and then send the code to the user all right all right so inside this children i want to return a drop down button and this is not necessary but for your sake i want you to learn how to use the drop down button so what the drop down button will do basically just to show the list of uh country is it zip code is it zip code yeah the country zip code for your phone number i believe for each country so what i'm going to do under here i'm going to create a list so it's going to be a list of strings okay i'm not going to create it here so let me just move over to this part okay so first thing first i'm going to create a selected country so it's going to be a string and i will name it yeah should be a stream okay selected country so this is the country code that the user selected selected country yeah and the way you understand what i mean by that so basically since i'm in nigeria i'm going to use plus 234 and this is our country code right for phone number and correct me if i'm wrong all right so this is just going to be the default one you can change it if you are from india you're from usa you can change it to your default one all right so i'm going to create a list that will contain all this country code that is going to show whenever the user clicks on dropdown all right so i just call this one country yeah i'll just call them country and uh i will set it to it's gonna be a list yeah it's gonna be a list and the first one is gonna be this plus two three four okay and the second one ah let's say plus one and the third one i'll just stop here so uh depending on what your country code is you can just put it inside the list all right so we have this tree here and what i'm going to do now inside is i'm going to use a drop down button because i want it to be drop down you can select all right so i'm going to use a drop down button and it's going to be of type string so the first widget is going to be the one that's going to display the country code so i'll use drop down button so in this tutorial i just have in mind that you're also learning how to use drop down button as well all right to show list of country codes okay but in this case i just use three you can increase it depending on the countries you want to include in your app and uh i will set the value first so the value is going to be this selected country which is the fixed value so make sure you copy it and i'll paste it here oops it's going to be selected country and then secondly we are going to have we are going to have the items very important is a list and it is this one i created here so i'll just map through it using countries.map okay so countries dot map and uh basically i need to return country does map and i'm going to return i'm going to return a drop down drop down menu item yeah drop down menu item and it takes a child so this chart is more like a test widget so we're going to going to display a test widget there and remember this e this stuff here is actually a string so you can just give it a type and it's actually a string which is actually taking the each of these values inside the country all right so just passing the e there and then the value is going to be e as well and i think that is it and i need to return okay cover this and then convert this to list okay and then i need to put these as a string as well okay it's going to take a type of string and then this one the map okay let's run it and see save it and let's see what will happen here all right so if you look closely you can see the plus 234 which is actually the default value inside this i'm going to create and unchange property so basically it takes a value of string so this is just once you select any value this one is going to taking the value that was selected so for now i'm just going to print out the value to see what was selected okay and i think this will not also fix this okay now you can see it's it's now uh it's not showing daca instead of fainted so if we click on it it should bring out the pop-up all right so now if i select let me select plus one it should print out plus one if i select uh plus three four and you can see the country code is printing out successfully all right i think we are good but now what i want to do is to set the state back to this selected country whenever we click so what i would just use a set state so depending on any on state management you're using but i just want to make things simple as i'm using set state so i'll just set the selected country uh equal to the value okay so whenever we set state it will be assigned to the selected country all right okay i think we are good with that part but i think it having an underline here and we can see that properly so what i'll do i'm going i'm going to style this container a little bit so what i'll do i'll add a padding first okay to make it look good okay uh so this is just like depending on how you want yours to be so it doesn't matter but i'm going to style it the way i want okay so this is going to be horizontal i'll just give it 10 okay to give it some space all right it moves out a little bit so i'm going to give it a decoration because i want to set some border around the container so i will say boss decoration okay so the boss decoration i'll give you the border and it's going to take butter.oh so and i'll give it a color so color basically it's going to be oh let's say gray let go be gray colors are gray okay all right so and then secondly i'll give it a width uh let's go with 1.5 and save this and let's see okay so we have this nice looking uh interface okay so i think that is good and now we are going to create uh the next i'm going to create is a divider because normally n okay there's another line showing there so let me see if i can get rid of that underline this stuff has a property of underlined so i can just set it to an empty container okay all right let's see okay the underline is gone all right so now we can uh okay under here i will create a divider okay to just separate this to stuff okay so what i'll do i'll just create a divider here and i know flutter has a divider widget and i think that one just displays the divider in the form of horizontal so we want to create our own to show it in form of vertica so to do that i'll just see how to uh use i'll just use my container widget to form this one myself okay so i'll give it a margin first so it's going to be customs okay so not uh it's gonna be symmetric because i want you to have a horizontal so it's gonna be 10 and then i'm going to give it a height of 15. okay save that and we shouldn't see anything i believe because it has no color yet so let me just give it a color and it's going to be let me say black okay okay save it i believe we shouldn't see anything because the width is not yet set so let's give it a width all right so the width is going to be let's say two yeah two will be okay and if you look closely you can see it has this okay so now we have a nice-looking divider there and you can increase the height if you want to let's say 25 and this is going to go up a little bit all right you can see the nice looking divider there all right so the next thing i'm going to create now is to the enter phone feed yeah uh like more like a widget like a test form feed for entering the phone number of the user okay so this is more like a phone feed okay so what i'm going to do i'll use this as an expanded widget because i wanted to occupy the whole the available spaces from here down to this place okay so what i'll do i'll give it a child oops okay uh remove this okay a child and the child is going to be a test from feed okay so in case you're using test test feed is okay but i don't like using test feed i don't know why but i just prefer this from feed okay and we can give it a keyboard type let's save it first and see the test feed all right you can see the test for the chain if you click on it to bring up the bot the the keyboard and if you type i believe some things are going to come up all right but this test is not yet looking as we want so i'm going to give it some basic styling so give it a decoration first and the decoration is going to be an input decoration okay so uh i think there's actually a better way of making everything simple but i just wanted you to learn how to you know work with widgets with flutter for those of you who are new with it so i'm just going to show you all these i know the video is going to be long but it's worth it i'm going to give you the hints test which is okay enter phone number all right so if i save it you should see the hints and the underline is gone so right now you cannot see the hints because we have it tested already so if i remove the test you should see the hint which is enter phone number okay so i now another thing i need to do is to add the keyboard type shouldn't be a test so it should just be it should be a phone so i have test input type of phone okay save that and i can remove this so oops remove this okay if i click okay go back continue with phone and if i click it should bring out a phone keyboard ah this is nice okay so now the next thing i'm going to create is the controller so the controller basically will help us to retrieve the controller whenever the user types in anything so i believe you're familiar with this so i'm going to create that above here so it's going to be a test form feed test from feed for retrieving the controller tests editing controller and the name is this and i will say tests all right so i believe the error is gone by now okay and then uh finally for this feed form feed is to add a clear button here create a clear icon so you can skip this to the part where i integrated the phone number if you want but you can still continue if you also want so here i'm going to go with an icon button so basically this icon button is going to be of icons dot close okay and uh unpressed so once i press it i just want to clear everything okay icon icons i hope i'm not mistaken here okay so i need to put icon first all right so uh once you press on that stuff what i want to do is just to clear the full so set state the phone which is the editing controller here so i'll just clear it phone dot clay okay so i just want to set it to an empty string all right save this okay save it and let's see if the icon is going to show all right so we have this icon here so now if i type some test and if i click on it it's going to set it to empty string okay all right so that is it but right now there's something else i want to do what about if the uh if the user is already okay if the user is not typing i don't want to show this test okay okay let's just go with that let's leave it that way or i can just do it if the user is not typing i don't want to show this but once the user types in anything then i want to show this for them to clear it so to do that i'm going to create a boolean value here so it's going to be more like a show clear icon so by default it's gonna be false okay okay all right so all these parts are not necessary but i just want to show you how to do all these things so here i'll use some some operator so it is just like an inline conditional statement so i would say show clear icon which is the variable i created so if it's equal to force then i'll just return a single unempty test widget but if it's not equal to force then i can just return an icon button okay so we can save this and let's see it should be gone all right so now it's gone and if i start typing now if i start typing okay it's not showing okay that is because this uh this on test controller needs an unchanged property so to actually know if this stuff is changing or not okay so i'll just set on change and it takes a value and so i'll use some set state here so just set state so i would check for condition if the value that is this current value the test editing controller it is empty so what i'll do is just to show the clear icon okay show clear icon and i will set it to true else uh that is if is not empty so i will do the same thing show clear icon and set it to first okay why am i getting one in here okay i need to remove this should be one all right so save that and then [Music] okay i can go back now okay and if i come back now and let's say i type anything it should show oops it's it's not showing if value is empty no if it's empty set it to false am i bad sorry else set it to true okay so i'm going to save that all right so let's clear this okay so now it's empty and it's not showing if we start typing it will show it is empty it will not show if you start typing and now if i click on this button it's going to clear okay but now this one is just showing we don't want it to be like that so what i would do once we clear this icon i also want to uh set the i also want to remove the clear icon and then set it to false okay okay so this is it uh we are good with this part uh we don't need to spend much time here anymore so now if i start typing anything and if i click on this button this one will also go out okay and that is nice and that is cool so now the next thing i'm going to do now is to create the code feed okay so here we're going to input the code all right so we are going to put it here so this is just more like the code feed we are going to put a code once the user receives it and it's also going to be a container as well and i'm going to have a margin and it's going to be symmetric sorry and i will give you the vertica and it's going to be 20 yeah okay so now i'm going to have another one for the child widget is going to be a column uh you're going to know why i'm using a column later so i'll use a column and uh the children so it's a it's going to be a widget you know that so i will wrap this with the co roll also and the row with the children and then i will add an expanded widget so this is basically where you're going to put the your phone number all right so i wrap this with an expanded widget okay and the expanded widget takes a child also and the child is a test form feed okay okay so i'm going i'm just going to so let me just code this real quick all right so we are done with that part um let me save you to see how it's going to appear here all right so we have the verification code and i removed the input button all right so this is not looking nice for now so what i'm going to do i'm just going to wrap this stuff with a container okay let me just wrap it to the container widgets and i'll do some styling to it and then i'll give you decoration alright so this is good now we have the verification code and now i'm going to give this the controller so basically this is going to be for code to just retrieve the code so i'll go up here and then create a controller for that so i'll just duplicate this and change this stuff to code okay so we have that all right so let's go down again to the verification code side and this is the expanded i can just give it a flex of two if i want but i can just leave it this way or let me just put it flex okay all right so now i'm going to put add a size box because i want to give some size because i'm going to put another test widget there so just give it a size box with a width of 20 or i can remove reduce it to 10 and then i'm going to have a button now we're going to once we click on it it's going to get the code all right so it's just going to be a get code button and i'll go give this an expanded widget so this is the reason why i made it to be flexed because i wanted to take more space than the expanded widget i'm going to put here all right so i'll have a child and basically it's going to be a container so i'll have to wrap it with gesture detector because you might want to click on it so i'll use gesture okay yeah because i want to click on it and on top property so let's just leave it this way empty first and then i'll have a child as i said initially is going to be a container all right so and the container is going to be let me just give it a padding so i will give it okay it's going to be 10 and instead not so small let's make it 17 all right so i'm going to give it an alignment because i want it to be at the center okay and then secondly i will give you the decoration as well so you see all of these in action once we finish and decorations to your border just like removing the border so you bothered at all yep and i'll color that's great okay all right so i'm also giving the weights so of 1.5 as well all right so now i'm going to move on to creating the child and it's going to be a test widget and the test widget is gonna be a a countdown because i want it to be like yeah more like a countdown okay so i'm gonna use a timer as well for this so basically the code is going to once you send it it will take 60 seconds for it to expire so i want to put that countdown that will be counting down until the user verifies the code once it reaches zero then you can resend the verification code again but until it's counting down to zero you cannot request for another code so what i'm going to do now is to i'm going to create uh widgets so you're going to be like more like a i'm going to create a variable so for now let me just give it uh let me just give it get test yes get code test okay and that's what it's going to show for now so let me save it okay get code test all right so we are not done with it here we're actually going to work on that side so now i can give it a style okay a style to make it uh nice so just have a test tie okay and then i'm going to have a color so the color basically for now let me just set it to gray okay i'm going to create other variables too but let me just set it to gray don't worry guys you're almost done with the ui so i'm also going to set the font weight uh you're going to be font weight dot board okay and uh i can save this and we should see a nice looking test okay board and a smaller a little bit so right now i'm gonna create two variables one for getting the code test and another one because this code test is going to change dynamically whenever we send the code we want to change the test to a countdown timer and then secondly i want to say change this button so if the code has been sent successfully i want to send you on tap property to null else we're going to set it to to be tappable all right so what i'm going to do now i'm going to create a value here so up here i'll create a string test and it's going to be get code test all right so for now it's going to be get code okay all right and then i'm going to create another one which is a boolean value so it's going to be ascending yeah that's going to be so if it's sending like i'm going to set it to false okay i made a mistake here so i'm going to change this stuff all right so now i'm going to utilize these functions okay it's sending and it gets stuff so now what i'm going to do this this get test i'm going to add a dollar sign to just make a as a string interpolation there so this stuff should change to save it it should change to get code i believe all right gets cooled okay so now i'm going to use some conditioner statement so inside here and i will say if like is sending it is equal to force and then we can make this stuff we can make this stuff to be tappable else that is clickable else we can just set it to node okay and all right so inside here this is where we're going to implement our function so what we are going to do we just check if the if the phone ought that is the phone number which is this phone number uh test form feed so if it's not empty so if the phone number does test dot is not empty okay so basically what we are going to do is just to uh is to verify the phone number of the user so we can just verify verify phone number so this is just going to be more like a function okay but for now let me just print out the the phone okay that is whatever the user entered there so they just printed the phone all right and uh but it would be nice to print that the phone in the zip code as well okay so i'm just going to concatenate that like doing it this way so you're just going to be like more like a string and we're going to have the selected country remember that was the variable i used uh selected country which is this any country that is selected here then i will select a country yeah it's a string so i will select a country plus and uh phone number okay okay so this is what we are going to send to the firebase for verification okay all right okay so now i can just string uh no uh final string and i can just call this uh number okay uh let me just call it number and then here instead of printing the phone alone i'll just print out the number okay all right so but now this is not all we are going to we are supposed to create a function we are going to call the verify phone number function here and then passing the number inside as a as a constructor sorry as a parameter okay so here now i'm going to use something uh this color so i'll check if uh if it's sending that is sending if it's equal to force and i will just return good i'll just return gray sorry else i'm going to return gold let me say amber okay all right all right feel free to do a horse restart here this is not all you know this is not everything for now okay so and lastly is actually the button that we're going to click on to submit everything like the code once it's been uh like if you're putting your phone number now uh let me just see okay i just put in any number and then if i click on get code it will just send the verification but now i printed it out you can see the plus 234 plus the code i entered okay then i want to create another button here that is if you put the once after you get the verification code you put it here then once you click on the uh submit button it's going to send the verification code for verification and once everything is successful we just sign the user in okay so that's what i'm going to do now real quick so inside here i believe i have these okay this container all right so at the end of it i'm going to create the submit button i know this video is taking a long time but let's just continue so what i'm going to do is just to create a simple uh container with gesture detector and i want to make this one too complex so okay and i will have a child of container and so i will have this as i need a decoration as well is any need for decoration no need actually so just give it a color and it's going to be colors that amber and i'll give it a padding as well okay okay um 10 and then i will go with the child and which is going to be a test so it's going to be submit all right or verify code simple verify code okay and let me save it and see what we are going to get okay verify code but i want it to be full so i can just give it a width okay so just gonna be media queried out of contest and uh just take the fluids that's which okay okay all right save it up all right and that stuff is not aligned to the center so i can just give it an alignment property and this stuff the padding i can just let me just give it 15 okay to make it look nice and save it and we should have a nice looking stuff all right so now once you click on this what button is going to verify the code for us all right but for this i also need to create another function another variable again a boolean variable to check if it's loading or not so i'll just say bool that is verifying or i can just say is loading so that is if this we are only going to use this boolean value for this button here so if it's loading i will set it for two first initially and then go down to where we have the submit button and then here i will check so if it's loading so it's loading if it's equal to force so you can just return whatever me to whatever from callback we want else i'll change it to no right and also i wanted to have a kind of a cycle indicator uh if that is needed okay so verify code i would just do something like this okay more like a thirst widget and it's gonna be more like uh okay let's say uh is loading so you can return a circular indicator if you want so if i say is loading is equal to force then i want to return the verify code but if it's not then i want to return the test widgets so now we just tell you that hey loading so please wait all right so save this and for now not to me what happened no changes because we didn't change anything okay all right so inside here is where i'm going to call the the function to trigger so just say if code which is this particular verification code here so if the code dot test is not empty so i'm doing the same thing i did for the phone number button as well so if it's not empty we're just going to call the verify code method all right verify code method okay so i'm going to create those stuff real quick so for now let's just leave it the way it is okay now but we are now set for the proper implementation of this okay so the first thing i'm going to do is to uh do the implementation for verifying the phone number remember i told you that i was going to use uh i was going to use a timer okay to actually set this time to be counting down okay so what i'm going to do i'll go up here first thing first i'm going to do everything inside this widget so i don't want to complicate everything so what i'll do this one i'll just create a timer and for now it's going to be null okay timer yeah timer and i'll just give it a timer which is code timer okay all right and we are good with that part so now let me go down so i'm going to write all my functions inside here so we have this scaffold we all right so i'm going to create a void method for to verify the phone number okay so you got to pay a lot of attention here because this is where the main thing starts so i will need a build contest okay i will also need the phone number of the user the phone number you enter all right and then it's going to be in a sync all right because we are integrating we are communicating with firebase now so it's going to run in the background all right so first i will create a duration and because i want this to last for 60 seconds okay yeah an ins of type int and then what i'm going to do i'm going to initialize this timer this timer class i created here let's go timer okay so i'm going to initialize it so i can reduce this a little all right so now i'm going to initialize it here so it will be code timer all right and i'll set it to timer.periodic and because i want it to run every one seconds okay so i'll set the duration to be seconds of one okay and it's going to be a timer remember and we can you can decide to give it a type if you want but it doesn't matter and then here now i'm going to set state i believe i can call set c inside all right so i can of course set state inside here so all the methods are going to be inside the set state so format it properly make sure you close this all right to format it properly so set state i'm going to write what i want inside the set state okay so if you're using state management approach uh you know how to implement that using the json provider block uh whatever one you are using so i'll be using state and uh in case you want me to create a video on provider let me know in the comment section below and i'm going to do that because provider is the state management i use for my application so at first i want to set the ascending so once you click on it it's sending i want to set it to true okay so if you remember the it's sending a variable i created which is for this one to actually uh gets the code which is here is sending okay it's sending i'll set this on to force and all that so basically verify phone number in duration and once you click on it i will set the it's sending to true so to show that hey we are sending the code so it will just change the ui for us and then i can use some uh conditional statement and i will check because once we start the timer automatically i want to be reducing uh this duration from 60 59 58 down to zero so i'll check for duration here so if the duration is less than one that means it's equal to zero then what we're going to do we're just going to stop the the counter instantly so first thing first the code timer i will cancel it which is disco timer so i'm going to cancel it that means i'm stopping it all right so cancel means to stop it and then once i do that i'm going to set the is sending back to force okay so that way the user can click on it again to send another code okay in case you didn't get the previous one so now i can set it to first and then the get test remember the get code test uh which i created above those uh this gets good test i created it to be get gets cooled all right so whenever we click on sending it's going to change to the timer all right but you're going to see that once i finish so i'll set it back to get code that is if the duration is less than zero but if it's not then we want to start the counter we count down so what i'll do i'll reduce the duration by one for every one second based on the duration which we set here for every one second i will reduce it by one okay and then it gets test get code test and i will set it to the duration so it's going to be of string so i'll just use string interpolation and i'll set it like this so which is duration sequence so once you are reducing it by one to be 59 seconds 58 seconds 57 seconds 56 seconds and just like that okay and uh all right so now i can save this but now i've not integrated the firebase stuff but let me show you how the stocks work this stuff work so i'm going to copy this very five phone number and then set it here so whenever we click on this get code button it's going to trigger this function and it requires a contest so i want to put the contest and it also needs the phone number so this is actually the phone number and passing if you hover on it it's taking context and the string of phone number all right all right so i think we are done with this part so don't i might not come back here again so this is like if phone.test is not uh empty then do this okay okay let me just do a hot restart and uh you will see this at work once you click on it it's going to call the timer and it's sending is equal to is going to be set to true and then everything in the widget will just change all right so let's see if we click on this button nothing will happen until we start type a number so let me just type zero eight zero okay and uh you remove it and once we click on this we should get some all right and you can see the code has been printed out and the function has been triggered and you can see now the countdown is counting down 53 seconds which is exactly what we did here and duration sequence you can see the get good test has changed to 54 seconds 53 seconds and okay so let me just all right and just i will just watch this until it reaches zero and you will see that it will change back to this get code and right now we cannot click on it because it has been set to first we cannot click on it from this method i set here so if his selling is equal to force we are going to return here but if he is equal to true then we set it to no and in this case in this case is equal to true because i set it once we call this method it's set to true and uh now is reducing and the test is duration for if you watch now once it which is once it gets to zero he's going to set it back to false and the get code is going to change have we seen it there so now we can click on it again to trigger the function again all right so let's just okay so now we are done with this part so now let's integrate the phone authentication all right so inside here all right outside the stuff i'm going to integrate the full art okay all right so this is the counting down so just remove your eyes there so focus on those parts we are going to do the phone authentication remember we are using the firebase so i need to call the firebase instance inside here so you can decide to call it above this function but i just want to call it inside here okay firebase odds and i will call these odds okay firebase arts right did i import that okay all right import it firebase alt and then we're gonna initialize it here okay firebase odds dot instance okay and then next i'm going to await this okay remember i use a sink here so i wish we work so i'll say await ports uh verify phone number okay so it has this callback here this method and you can see lots of things so let me just all right so now i'm going to just collapse this one after the other all right so the phone number is just going to be this one this phone here all right so that's what i'm going to pass here all right okay remove this so we take the phone number i'm just going to pass the phone here okay and i think we are done with that one and then the next one i'm going to do is for on verification completed basically this one verification completed is normally called whenever the let's say the code is automatically detected all right so you want to do anything but what i'm just going to do is just set this stuff to now okay so i won't be calling any function there okay so i'll just set it to null okay and then the next one is going to be for the code sent verification complete i can actually do something there if i want okay our goal is to once you log in the user we want to take him to him or her to this home page all right so what i'll do i'll just okay let me just copy this uh for your sake i'm not i'm not going to set this stuff to not so i'm just going to show you how to integrate it so whenever this method is only called whenever the let's say you send the code firebase send the code to the user's device automatically sometimes firebase will be able to get that verification code instantly all right by your device and then that way to just trigger the login process and then login the user well in some cases you might just receive the code and copy it put it manually inside the verification code but in the case we have uh is being verified automatically by firebase without you putting the verification code that's what this verification completed means so what we're just going to do i'm just going to show you how to and do that all right so i'm not going to skip any parts i don't care how long the video is going to be but i don't want to skip any fast because i want you to actually get something from this so i'm going to do the phone art credential okay so it's going to be the credential okay so it's going to be in a sync all right okay so on verification completed and what i'm going to do is just call our weight equal to the odds class okay the alt here odd dots signing is i believe uh signing user with credential signing with credential and then we can pass in the credential inside here all right so once we get that our weights okay remove the equal to okay once we get that we can then navigate and navigate and push until okay so i will just go here let me just copy something here push and remove okay so i can just copy this okay oops okay and then just paste it here all right so once uh so once the verification is completed automatically by firebase we just navigate the users to the home page all right and then on verification fade and basically we can just return the verification fade you can just show a snack bar if we want so here and there is also a method timeout all right so okay yeah there's a middle of timeout yeah timeout duration is going to be you can just set it to so there should be a timeout which is seconds of 60 seconds all right that is good then verification fade so it's going to be a function and i'm going to say firebase exception and call this one error and basically i'm just going to show is scaffold so just call scaffold messenger and of contest and then show your snack bar if there is any error and we can get a test widget and just show the error there for the user all right so just call it error.code okay all right and secondly the last two we have here is called sent and code or to the detriva timers so this code auto retriever timeout i'm just going to set it to null all right so it's not really uh for this i don't think is needed so what i'm just going to do is still going to be a function i'll just set it to string and set it to verification id and i can just return now there so i don't need it right so we are good and don't forget to close this so lastly is the code sent so if the code is being sent what what are we going to do so the first thing i want to retrieve the verification code whenever the code is being sent it's very important because without that we won't be able to verify the code that was sent so what i'll do i will set uh it takes two parameter first the first one is a string and both of them are actually a string i believe okay no the first one is a string and the second one is an integer so we're going to have verification very vacation id and then the second one is going to be an inch so force resending token this is if you want to send it again but it's not necessary because i'm not going to handle this one so set with sending token all right so here now i'm going to set state so whenever we get the verification id that you're going to call this whenever the code has been sent to the user's device so once we get that i'm going to create my verification id so this is going to this is a variable so i'm going to get here i'm going to create it my verification code or i can say verification id and i'll set it to this verification id all right okay so let's save that so now this is showing red because i don't have the function yet so i'm going to go up here and create an empty function all right so here i'm going to create that function here somewhere around here okay so it's going to be a string i say function and variable sorry so it's going to be an empty string for now all right so i think we are done with the verification of phone and first we set the duration and then we use firebase alt and verification feed we show this message timeout we show this so on verification completed automatically we're just going to navigate the user to the home page and you can do anything you want to do here if you want to get the user's data and save it to a shared preference you can do that or you want to send it to your server you can do that then the phone number just a number string which is the phone number i passed as an argument as a parameter here all right and then code auto retrieve i just send it to null code sends i got the verification id and then set it to the string which i just created and i think that is all and then the next thing we are going to do is just to create uh a method so basically the method is going to be for verifying the code verify code but for now let's test this out so let me just say how to start and see if this code is going to trigger um basically i'm using an emulator so i'll just use my device here and i believe the auto retrieval should not work this verification computer should not work and let's try it first this is my device so the sim card i'm going to the no my name i'm going to use is in my phone right now so i'll just set it up so it's going to be zero nine zero okay uh d7 322 and uh 866. okay so remove it and let's click on get code and see what will happen right here all right so wait for it the countdown is counting let's see if this is going to work okay i can see some actions taking place here and i think the capture should show okay http status 400 with chrome let's see we are having some errors here uh i think i have some okay maybe i didn't enable full authentication inside my let's see if the full art is being enabled here so let's check out let's look at the sign-in method okay phone authentication is not enabled my bad my bad that's why we are getting that error so i'm going to enable this real quick all right so full of requires general configuration step follow this step for android we have already done that that was when we tried to audio let's see if uh okay so we don't need this uh go away all right so now we can just save this and you just have to enable it okay you just have to enable it and then let's go back to our app okay and just accept this because uh what is all these this process is too long uh [Music] okay so it's actually going to bring up the recaptcha for us and firebase app uh verify you're not a report so let's just complete these steps and once you complete it i believe we're going to take us back to our app let's see traffic lights and this is a traffic light this is it this is it and verify all right back to our app and i should receive the code from in my phone let's see if everything went so well i should get it okay i didn't get it so i'll just do a hot and then we start okay i just got the code now i just got the code now in my phone all right yeah i just got the code now in my phone okay uh is a six digit number twenty to 962 is your verification code for flutter app firebase okay so i think that one is working well everything is good so if you fill out my implementation definitely you're going to get everything correctly but first it's going to verify you if you a robot or not so now i got the code now in my device so now let's go on to setting up the verification to to verify the code okay so to verify the sms code i'm just going to create a function so it's going to be a void method verify sms code okay and basically it's gonna take uh the code itself and uh a contest okay so this code is gonna take is the code which we are gonna pass in here which is the verification code so i'm just going to pass it as a string so we are still doing the same method the same thing we did for authenticating to verify the phone number okay so that's what i'm going to do here as well so this code is going to be the code the verification code whenever you copy it and then put it inside all right so now i'm going to uh set use the firebase odds firebase arts and it's going to be art and firebase art so you don't want to be doing this in everything just define this firebase variable above your scaffold widget okay and then here i'm going to set states so basically we have this is loading right we have this loading and i'm going to set it to true whenever we click remember this is loading is different from this one i use here which is ascendant so it's loading is only used for this verification to change the verification code to loading all right you can see it's loading set it to first set it to null s okay and let's go down so i'm hope i hope i'm not complicating the stops so now i'm going to create a phone art credential okay with the code okay so basically i'm just going to do full arts full odds credential full out credentials so i'll call this one credential and i will say full set it to full odds provider sorry full out provider dot credential and then now the credential i'm going to pass you can see the credential is taking two things so let me collapse it first okay so i have to collapse this and collapse this as well so you can see that i was taking the verification id which was this id i set state here to verification id whenever the code has been sent so i'm going to copy this so by now once the code has been sent initially i set this verification code to be empty string okay so you can check it here so i set it here to be an empty string all right so whenever we send the code and we're going to set the state and then send the verification code to the verification id here all right so now i'm going to make use of that verification id and i'm going to set it here my verification id and then the sms code is a string so it should be this one here all right the code okay and i will close that we don't need it anymore then secondly i'm going to sign in the user okay with the credential okay with this credential which i just created here so what i'll do i'll just call await remember i use a sync here so that which should work and then i will use my art class okay arts dot sign in with credential all right sign in with credential and then now passing the credentials so just similar thing we actually did here with this um verification completed all right but this one is that we didn't get the verification id because this one is going to provide it automatically inside this full house credential but in this case now we are passing the verification id and the sms code okay so once we get this stuff done we are going to navigate once we get it i'm just set state back and to is loading i will set it to force and then we can then navigate to the next page so i'll just copy this stuff here which is this one so we're going to navigate to the homepage alright so you can see how simple these are just a few lines of code nothing much and i think we are done so i can save this and then this verification verify sms code i'm going to take it down to that button which is this verify code so i'm going to put it here okay yeah we have the verification verify code meter so on my paste i'm going to paste it here and then put the context it requires two parameter and then the code okay code the test all right you also want to remove uh every uh white space before and after all right you'll stream it and save it so now we'll do a hot restart we are done we don't need any no other modification again just that you will see the code when it's sent because it's being sent to my physical device all right so you're going to see it but if you implement it in your own way your own phone you should see the the stuff so this is just an emulator so i can't use a sim card here or whatever so now i'm going to put that phone number again which i used which is 0.9087 okay all right this is the number and this is my country code make sure this country code matches the one for your country so don't go and use this you use plus one it's going to change it to plus one so make sure you use this one is for nigeria that's i'm using this all right and uh so now i can click on okay let me remove this so now i can click on get code and it should also let me see maybe it can open the capture page again but let's see so it's counting down and some activities are going under the hood all right and okay you can see we didn't get that error again because we already enabled the full odds from our firebase console okay so we are going to pass through this process don't bother yourself this thing doesn't take time okay so now everything is okay and i should receive the code in my device now let's wait all right so i just received it now and is uh it's 20 29 62 all right so let me just put it down real quick 20 29 system all right so we can collapse this and now i can verify the code and you can see it has changed to loading and then once everything is set up we now move over to this email so the reason why we're having email null is because using the phone authentication you cannot get the phone number the email address of the user so it must be you can only get the phone number of the user because they're using phone authentication all right okay so to fix this stuff now we're gonna go to our home page so instead of using uh string email current user dot email so we can use some if statement here so we can say if this email now is equal to null all right then we can just and send it to we can just return it to be firebase firebase auth and the instance dot current user if it's not then we can just get the phone number else we can then get this stuff back which is the email address of the user okay copy it and then we can just put it here and okay so instead of phone number i can just say uh user all right let's just be user and then here i think there's an error somewhere so we can just change this stuff to user all right so save it i believe we should get the phone number of the user so this is actually my phone number plus two three four nine zero eight seven three two two eight six six so guys this is how you uh do phone number authentication so if we sign out now and try to do that again continue with phone and let me put the phone number really quick all right please don't forget to subscribe don't forget to give it a thumbs up if you liked the video and i'm going to come up with more exciting ones in the future so okay get code and the countdown should start and you can see some activities are going on under the hood and you can see is finishing issue movie all right we haven't okay i think this is cannot be loaded all right so this is not necessary okay so we are going to pass through this recaptcha again okay just wait for some seconds i should receive the codings in my phone now all right so i just received it now so i'm going to put the code really quick and which is for one this one is different from the initial one four one four five one five all right so now we can click on verify code and wait for sometimes and once everything is good and we are going to move over to the home page so now you can use this phone number displayed whatever you want to display and then save it to your database or whatever so now if i go to my firebase console now and go to users i should see that number so this is the number that i would just use to sign in and it has a unique user id from others all right guys so this is how you authenticate users using your phone number thank you so much for watching i'm going to put the link to the previous section the previous video in this comment section in the description section below uh do where to subscribe like and also share i'll see you in my next tutorial thank you

Channel: Destiny Ed

Views: 657

Keywords: flutter, firebase, phone authentication, login, firebase authentication, flutter and firebase, mobile app dev

Id: 5HYccB25jC0

Length: 72min 3sec (4323 seconds)

Published: Fri Jun 04 2021