Flutter Firebase Phone Auth Tutorial For Beginners | Firestore, Firebase Storage, Auth (Latest)

hello everyone and welcome to another flutter Firebase video where we are going to implement phone authentication system here you can see on our screen we have our application and Firebase open side by side to it in the app if I click on get started you'll be redirected to this screen where we can enter our phone number and also select different country codes from this particular list So currently I am selected with the Indian country code and I will enter up my number and click on this login button so that OTP can be sent on my device now I'll just wait for the capture thing to be completed okay so on my real device I just received the OTP you can see on the screen also and now I will enter the OTP that I just received and click on this verify so this will redirect me to this screen where I need to enter the user information so let me enter my name then I can enter this particular email address and provide a little bit of Bio so hello this is Shivan Singh and okay if you see in the authentication tab we get a new entry edit but if you see into our firestore database which will be our database that we are going to use there is currently no entry and also in our Firebase storage the user profile is not updated which means nothing is present right now so let us click on this circle after and we can select this particular photo and now we can click on this continue and this will upload the photo and also our user data to the server so we can reload this Firebase storage and you can see we have the image uploaded here and also you can see the firestore database we will get a new entry edit okay so this is the data here so we will see how we can design this particular thing in this video foreign before we move forward to our coding part I wanted to take few minutes and explain about a very popular platforms ego Cloud it is a cloud service that will help you set up voice video and chat functionality to your applications there are different UI kits and documentation which make it popular among different developers and businesses if you see the documentation that is present on their website you will see there are different products like call kit video conference kit and one of my personal favorite this in app chat in the in-app chat if you select on this flutter documentation this will show up the complete documentation for setting this zigo cloud service on your flutter application we have different concepts like group chat the room and then different offline online messages push notification and so on so you can click on this gets things started and go through all of the documentation that are required for setting up zigo Cloud on your flutter apps other than that if you get stuck somewhere you can click on the sample app and this will give us a complete integration of zigo cloud in flutter application so without wasting much of your time let us start coding our application okay so we will start by creating a new flutter project so for creating a new flutter project I will open up my terminal and I will go to the directory where I generally create my project so this is CD projects and then the YouTube here I will write command flutter create phone auth Firebase and then just wait for this to finish okay so I think this has been completed now let me just go to that folder CD 405 base and now we can open this in our Visual Studio code if you see I already have one Visual Studio code window open here yes I trust this author and I will do this as a full screen let me increase the font size let me just see okay so I can increase the font size yep so now this will be visible to all of you and we can start by deleting this windows then Mac OS and then this Linux folder and now we will start our iOS simulator and if you see the iris simulator is here so we will just align this side by side to this okay so we are here and now we will start debugging so by the time it is running the application on our iOS simulator I wanted to show you some of the screenshots and the other database structures so we can click on exit from here and if you see here so this is the welcome screen which will be just a simple screen then we have these uh phone authentication screen or the screen where we will be entering the phone number this will be a country code picker so we can easily change the country code from here then we have the phone number and once and once we click on this login we will be redirected to this verification screen where we can enter the OTP that we receive and then this will be the home screen but before this home screen if you can see we have these data these data will be taken from the user and the screen where these data will be fetched from the user will be this user information screen so basically after this verification is complete we will check whether this user exists in the application or not if the user doesn't exist in the application then we will be showing then we will be redirecting the user to this user information screen where they can select the profile photo then enter the name the email then the little bio for themselves and then we'll save that data to the database and then redirect the user to the home screen so this is the overall idea behind this there is one explanation also which I will do once we start coding for this okay so our application is running here if you go to our main.dot file you can remove everything from here now we will write both material.dot and we can do avoid Main run up and this will be in stateless widget so we can write STL which is a shorthand for this stateless widget Creation in the visual studio code so we have this black screen here we can write material up debug Banner can be disabled and the home screen can be our welcome screen which we don't have so we have to create that screen here so we constructed the project folder something like screens and here we will have welcome screen dot dot we can import material.dot stfl for stateful widget and this will be welcome screen and we can return the scaffold so now we will be importing this and we are here in the welcome screen so we can change few things like we will also write the title as flutter phone auth and just everything is quite okay so we will be going to a welcome screen and start designing our welcome screen so if you come to this welcome screen dot dot let me just open the screenshot so we have this simple image here then there is two text and then this particular button so what we can do is we will be first of all we will be adding the assets folder so inside is assets folder we will have these three images One and this second image and the third image so in the description you will get a link where you can download these images now right now I will just reveal this in finder so if you see here and I will also open this particular thing somewhere inside my Mac where I do have the files so if you see thing okay so we have all these three images here you can copy and paste them here and now we got image one image 2 and image three here so we also need to specify in our Prospect ml file that we have added few images so we will uncomment these lines and here we will write assets and done so now I'll just wait for this flutter Pub get to run and then we are good to go so we are here in on main.dot file this is completed for now until and unless you start coding with the backend part first of all we will be designing the UI part and then we will shift to other things me open my design okay if you can see all these are in a column so we will start first of all by giving a safe area and the safe area will have a child which can be a center child because we want all of these yes to be in Center and a little bit of padding from Top let's say you want a padding from top and also padding from the left and right so this means a vertical and a horizontal so we can write symmetric padding particles can be 25 horizontal can be 35 let's say and the child can be column inside this column we will have first widget as the image assets image1.png okay so we got the image loaded here height can be 30. and we will have a side box and after this I was let's say we will have one text let's get started tile in the text Style font size let's see 22. okay we can also do this font hold and now let me just do another side of 10 and we can copy these text from here paste it here let me write never what is the text here never a better time better time then now to start okay but there are few design things that we have to do this can be color can be colors for black 38 and good to go we will also Define one more size box with a better with a bit more height so this can be something like this and now we have to Define our custom button so we can create a button widget here PP widgets so this will be custom button dot part take place custom button we can do import material dot dot final string text if you hold down this command and stop so we will be shown with this option alright if you are not on with these options then you can click on this icon and generate the Constructor so now we will return an elevated button and press can be the function so we will write on this white callback and press add final values on press and style can be button Style then we will have a few Styles here but before that let me just do the child which can be pending rather instead of padding you can directly have the child here will be text size 16 okay now for the button style we can have few properties like foreground color material State Property dot com this is a color so the foreground color can be color dot right because we want the foreground text to be white and the background can be purple so we can just copy this line here let's say background color and purple other than that if you see we have this rounded rectangle so we will write shape material state property dot all and this is of rectangle border type and value can be rectangular border about a radius can be let's say 25 and I think we are good to go so this is this now we can call our custom button here so this will be side Fox because we have not defined any size for the button let's say double dot Infinity which means the maximum space that is available and pressed can be null for now if we have this okay so first of all we need to do the child system button on press can be done for now text can be get started okay so we have this thing here right can be 50. yep this looks nice let me just see okay well this can be like this and okay so we have this get started here and now once anyone press on this get started they should be redirected to our this screen where we have the registration so let's start by creating this registration screen register screen dot this will be in both materials.net and this will be there is just clean and also we can return scaffold navigation dot push this will be material page route Builder can be context and then if you see you have to return the I guess the widget that we want to call so that will be register screen perfect I can provide a cost value here and add some comma to make this look a bit better if I click on get started we are here in the register screen okay so now okay so now for our registered screen what we can do is let me see the design so this is quite similar to what we actually did in welcome screen also so we will write scaffold and if you want we can open the welcome screen side by side through this this will also be something like body save area child do we need a center okay when I'm adding we can copy these value from here and contain a child with a column so okay I can close this now inside this column first upon we will have this container in which we'll have the image placed so we can have just something like container which can be 200 height can be 200. and we can have the child as image.asset assets and image2.png click on save so other things we can do is box decoration the shape can be box shape dot Circle and the color can be colored dot purple but this with a little bit of lighter shade so shade 50 will be okay but if you can see the image is going outwards so we can provide a little bit of adding let's see 20 okay so 20 looks better so we have the container here now other than the container the next thing that we have to do is a side box with the height let's say 20. then the same then the things that we already did like the one for our get started screen or the welcome screen so we will go and write welcome screen [Music] and here we can copy all of these values face them here so this will come register and and here we will do add your phone number we will send you a verification code and the text align can be text align Dot Center so this is present here now the important thing is we have to create this particular field here so we can start designing this so we will write text form field and this will take the value of controller so we can create final text editing controller phone controller and this will be text editing controller so here we can write phone controller perfect we have the this particular thing here now we can start by decorating this so this will be input decoration and let's say we have the hint text enter phone number now other than that we can provide few other values like the enabled border so outline input border the Border will be something with a border radius of 10 and Order side can be Border Side color dot black 12. so this is the lightest shade of black I guess that is available for us so we got this enabled model border sorry enable border here we can also do the same for Focus border so even if we click on this this will not change if you don't have this here so right now a Reload so this is when the border is not clicked but if we click this it will change to this so we can copy paste this here and this could be kind of focused water so we got this here now if you see the cursor so we can change the cursor color this could be color for purple okay so the cursor color has been updated here now if you look at the design that we have for our registration screen the next thing is this button and also this what we say the prefix icon for the phone number so let me just write this prefix this will be icon here we can display one container with a padding let's say 8.0 and now before we start designing this let me show you which package we are going to use for this country code picking so if we open up our web browser and we go to pub.dev here we will have this package country picker you can just search it here and this will be this name country picker the latest version is 2.0.18 by the time of recording this video which was published for days ago so I personally like this package because it has a lot of customization that you can play with and it's quite easy to implement so let's see we can come over here and hold down command shift and P on Mac and Ctrl shift NP on Windows and this will open this particular command palette and here if you write dot add dependency and then we can search for the country picker and it will search and add this particular dependency in our project so by the time it is adding the dependency in our project we can create a design for that so this will be a non-tab which we will Define in a while other than that let's do a text so if you look at this text we have the flag and then the country code so for that we would have to create this parameter which is coming from the country class so this country class is present in our package that we just installed country figure so I want to define a by default country that will be selected whenever the application loads up so I can provide India so let me just show you what values you can enter here so for the phone code that will be 91 because that is the starting code for our country then country code is in if you can see this is an integer value so I will put 0 here and this will be a Boolean value so I'll put true level can be 1 then just then these values will be just an simple thing this will be India and India we can do this India again and display name no country code and I can leave this value as empty because only the things that are necessary are this this and then I guess these are the necessary values or rather if you hover over this all of these are required with fields so that's the reason we have defined all of these so now if you come over here in this text field what we can do is we will do a string interpolation and we will write select it country or what was the name for this let me write this selected country so this will be flag emoji let's see okay so we get the flag Emoji here let us also Define some text Style so let's say the font size can be 18. color can be colored dot black and font weight can be font rate dot bold so nothing updated there but let us put the nine one value so this will be similar to the one that we written here selected country and this will be phone code so V of nine one but we need to provide a plus here so this becomes plus nine one now whenever we click on this on Tab we need to call the function that is available in our country code picker package this will be show country picker it is and function inside this and on select if you do this on select you'll get a value which will be this country class only so what we can do is we will set the state selected country is equal to value so now if you click on this we see our bottom sheet appearing but this is taking up the entire screen so what we can do is let us provide a little bit of customization here so if you see this there is this country list theme so the value that it will take is country list team so we will add country list the theme and now let us see what values are there background color and then bottom sheet height so we need to provide this let's say this is 500 I can provide a const value here and if I click on this so this is coming at a required height you can increase the height if you want so now this will be 600 I think 550 is okay and now let's see if this is working or not if you select Afghanistan so we get the country code updated here if we select in the name of this I don't know how to pronounce Angola Argentina Bahamas sorry for any name that I pronounce wrong and now let me just shift to my country this is India and then here we can enter the phone number we can also do one more thing if we see here and whenever we want to display at what we want to display is we want to display a tech our tick icon here so if phone controller dot text Dot length is greater than 9 we are considering this as greater than 9 because many countries have phone numbers greater than 10 digits if this is greater than 9 then we will display something in a cider container else we will not display anything so this will be kind of like height 30 with 30 then we can have a decoration where we will be providing the shape and also the color so this can be color third green and the icon will be tick icon so I guess this is with the name done color can be color third white and size can be 20 if I click on Save and whenever we have the number size more than 9 so let's say one two three four five six seven eight and if we have this as more than nine okay so this is not updating here let us look at why this is not updating because if you click on save or control s then it is updating but you don't want that thing to happen we want the value to update whenever the value is changed so I think we need to provide this so this will be set State on controller.text is equal to value but if you see whenever we do a on change in aside a text form field and update the value of the controller the font becomes a bit a reverse Direction so there is a quick tick and so there is a quick trick for setting this thing up so you can take the phone controller and do a selection and this will be a text selection property and from this position thing what we can do is we can Define the offset for text position offset can be the length of text so now if we see let me just provide to comma there so now if I enter so it is coming in the right direction and also in the right way I think we can increase the what we say we can increase the font weight here for the text Style so this will be kind of if you come here we provide a style layer this will be text Style font size can be 18 and font weight can be bold let me just click on Save okay so now if I enter 12356 perfect and for our hint text we can decrease this thing or rather the hint Style so this will become text styled font weight can be found weight dot w 600 or rather 400 is also okay no 400 is not okay 500 yep font size can be 15. yep and next thing that we have colors dot gray dot shade let's say 600. so this looks much better now if we have numbers more than nine only then we'll be showing this particular what we say the suffix icon but I think we need to provide a bit of margin here so as to make it look much better so we can do something like 10.0 okay so this looks much better here okay perfect so now other than this other than our text form field we can provide aside box here let's say with a height of 20 and here we need to provide our what we have let me just see the design login button so you don't need to write the comment here because we know that is a single button this really site works with can we double dot Infinity we will take the maximum amount of space that is given to us and take the maximum amount of space that is given through given by our parent view it can be 50 and then we will have the elevated button or rather if we look at our custom button yeah that was a custom button so this will be custom button we need to have these properties so first one will be text can be login and then we will have on pressed which we can provide as empty for now perfect so we have this button here we also have these things implemented here so now what we can do is we will start by adding Firebase to our particular project so if you come here we have the registration design a bit completed here then we also have the welcome screen if we reload okay and we are in the registration screen but we have not set up Firebase till now so let me just open up my web browser and here you can come to this website console.firebase.google.com if you are having error finding it you can just directly go to Google and search for Firebase console and then you can come over to that section where you have your Firebase project and then you can click on ADD project and here I will enter the name for this as phone auth flutter click on continue we don't need the Google analytics for this so I'll just click on create my project so this is creating the project so by that time what we can do is I will tell you one step that is something you can implement but personally I prefer you can learn a lot of new things if you go through the basic documentation and setting up things instead of using packages so if you come to this console here you can see we can add an iOS application and Android application and also we have this flutter application but if you come and add this using the Firebase CLI and SDK but I personally prefer going through this basic steps because that is something I find more bit easier or what we have what is the right what I don't know I think we can look at this thing because I have been implementing this for so long that I get used to this so now for adding it to our Android application for we have to do is I will search for Android manifest and in this Android app Source Main and then there is an Android manifest if you're not able to search it like that way like I did you can directly go to the project and search it here you can just okay you can just copy this thing and paste it here and here we will like phone auth Firebase and then this is asking for the shs signature now you can click on this C page and this will open up the page here so if you're on a Mac or Linux you can directly just enter this command to get the signature if you run a Windows you can enter this command I know many people say you can just copy and paste these things but many a time there comes the situation when these commands also don't work so I have a particular dedicated video in which I have told you how you can generate the shs signature for your Mac operating system and also on the Windows operating system and that video is something in which I receive most thanks and Appraisal from you guys because I think that video helped a lot of people in the community so you can definitely look at that I'm linking it to the right side of the screen so now I will open up my terminal and I will go to CD dot Android folder and here if you see we have this debug.key store so I already have this command already so I already have this command entered before so I just need to press a tab and then what I can do is I need to enter the password so that is Android that is the thing that I created in the video also we can copy the sha1 signature and click on paste here and click on register application and now the next step is to download a Google services.json file and paste it inside this app folder so I'll just download it first I guess we got it downloaded here and now I will drag it to the project and if you come Android folder and I need to paste it inside the app folder so we have this Google services 2.json make sure to remove any of the text or number that are present and make sure it is in this particular format Google services.json and now the next step is to click on next and here we have this first of all this is the project level build.gradle so project level means you have to go to this Android and here you have this build.grader and here you can add this thing and then we have this app level build.gradle so inside this project we have this app folder here we have another build.gradle so here you need to provide few things like you can do apply plugin and then you need to apply or just enter this thing this will be com.google.services in this particular format and then in the dependencies what you can do is you can just paste this here and we are good to go so we don't have much steps here but as we have the terminal open we can also add sha 256 signature so you can come over here and click on add this fingerprint and click on Save so we've got the Sha one signature and SSH 256 signature I generally prefer you to please go and add the signature to your application we can also provide a support email if you want so we are here in the project overview and now other than that we can just minimize this and here you need to just do few tweaks so minimum ltk version can be 21 and if you want you can enable multi text so this is the command for that multi text enabled and I think that is everything that we want to do here we can close this right now I will be completing the complete video on this IR simulator but I have tested this and it is working the steps are working so you can just look at any issues that occur and let me know in the comment section I'll be happy to help you so now we got the Android part done let us come to our iOS part so for iOS part what you have to do is open up your xcode and after you have opened up your xcode this will be the window that is shown to you now let me just see where is my particular project because I myself forgot so if I do this it is okay phone auth Firebase so now what we can do is open a projector file I will go to this section where I have all my projects and this and then we have to open this iOS folder and click on open so this is opening up the particular project and now we got that opened so you can come to this Runner section and here you will get a bundle identifier I don't know why it is not able to copy okay so we can copy it here and this will be phone or Firebase click on register this is optional parameter but I main or the important parameter is this apple bundle identifier now we need to download the Google services dot PLS file so I think that has been downloaded here the next step is you just need to drag this inside this Runner folder and make sure these values are checked copy item if needed and then click on finish and here on the Firebase what you can do is you can click on next next and done so we got Android and iOS application added now there are a few other things that we'll be doing but before that let me just minimize this and if you come to this Google services info dot PLS file here we also have this 4 as the value so we just remove that and it will become in this particular format make sure your file is also in this format and here if you see we have the reserved client ID so we can just copy this thing and this is an important thing because that will act as a URL schema so whenever we are opening any web browser it links through our application so the redirection will be identified using our URL schema so you can just click on this Runner if you come to this info.plist you have this URL type so you can click on this and in the URL schema you just need to enter this this is a necessary step else the Google will show us an error that please add the URL schema first to your application so now if you see these Google services dot info file or rather if you come here to the P list yeah info dot PLS not the Google services.info file so we got a new entry added URL schema and this is the thing that we just added so I will also show you where is this value coming or where is this value inside this so if you can see this iOS folder we have the runner and we have the info that PLS and here we is the value that we just added so now most steps for the iOS are also done the next step that we want to do is we'll just close this and by the time we can also do something like let me open up my browser again so the packages that we are going to use is first of all this will be the Firebase code package which will set up the Firebase inside our application then we will have this Firebase Authentication so this package will help us to use the authentication features for authenticating the user using different types of Provider like Google Facebook Twitter the phone authentication and so on then we have this Cloud firestore which is the database for our what we say the Firebase so this is the database you can see these sections I will be showing you after I show you all the packages that work that we are going to use so we can close this here so this is the cloud file store other than that we will also use this service Firebase storage because we are going to store the user profile to our document to our server so for each and every user we are going to store their profile photo that they upload so this is not any mandatory step that I want to teach you in this video but it is something that most people requested in the comment section that please make an authentication video where you go through the authentication part and then you take the photos from the user gallery and then upload it to the server and then make other things so kind of similar to that I hope you got the understanding of what I wanted to say so the Firebase storage will be the packet that we are also going to use now so I have shown you all the packages regarding the Firebase thing let me show you where are these Services located and we need to also enable them so if you come to this authentication part we can click on this get started here you can see we all the logos Google Facebook Twitter GitHub and so on for this particular video we are going to stick to our phone authentication only so I can click on Save and now the important thing or the benefit of using this particular phone authentication is you can provide some number for testing so for this tutorial I can create this particular number like this is the country code for India so I can have the number one two three four five six seven eight nine zero and then the verification code can be one two three four five six so this is kind of a dummy number for testing so this has been added so anytime any user comes and enter this particular phone number the OTP will not be sent to this particular number because this is a dummy number even if you enter your real number here that OTP will be something which you entered here so this is very great future feature so this is a very great feature that will is helpful here so right now we don't have any users so next step will be R5 store database we can also enable this right now only because we have this opened here so you can click on create database and let me just wait for this to finish okay so we can start in production mode click on enable it is showing cannot enable firestore for this project I don't know why let me just change this to some other country okay so this is not being enabled let me just reload why this issue Happening Here because I think that has been successfully done so we got the cloud file store here now this is this there is this tab rules here and this is a quite important thing so basically we are limiting the write and read access to the users so right now the read and write exercise is set to false which means no one can read or write the data in our database but we want to make this as true but make sure don't make this directly true because anyone can come and directly enter the data in a database the good practice is use this code request dot auth is not equal to null so what this command means is we are only allowing the read and write access to the persons who are already registered to our alternate what we say to our Firebase console so now you can click on publish and done so this was the step that we wanted to do and we can also do the same for our Firebase storage you can click on get started start in production mode and the same rule that we just set can be also applied here also okay so in the rules section if you come here we can write this request dot auth is not equal to null the same thing that we did there also foreign so we are good to go I guess let me just see storage is done so now we can come to our app and open up my command palette and add the packages so this will be Firebase core Firebase auth then I shown you file with a cloud file store then we have Firebase storage and done so these are the things that we'll be using for now for the Firebase so we'll just wait for this to fetch all of these packages I can go to perspect ml file and let me see okay so we got all of these added here so there are few things that we have to do before we start making any changes so first of all what we'll be doing is we will come to this main.dot file inside this void main we will write this what we have widgets binding dot or what fidget spinner writing and that is dot ensure initialize so basically this is linking the flutter engine and now we can do Firebase this will be async and I don't know why this is not showing Firebase okay so we got the Firebase here and then initialize application and done so we have the flutter widgets set then we have the Firebase set and now what we need to do is I can close this here and then inside this as we are running on the iOS simulator let me just close all of these things so right now we don't have any pod file but okay so we have the Pod file I forgot to see that so you need to remove this comment and then you can click on Save and now open up your terminal so you can directly open from here and now inside your terminal first of all go to your iOS folder and if you do an LS which means listing or down all the files inside this particular directory so we have this pod file so basically if you are on an M1 Mac then you have to use this command let me just show you foreign so if you are on an M1 Mac I hope this these are visible so if you are on an M1 Mac then you have to use sudo Arc x68 gem install ffi this is something that most of you have done and these are not the required step you can directly shift to this command So I myself will copy this command pod install this is only for the M1 user if you are not on the new M1 user then you can directly just what we say you can directly write pod install and that will work for you I myself will see whether this is working or not if any issue occur then you can look at this command this is for M1 Mac users if you are not on the M1 then that can be simply like pod install repo update so this will update the packages or the dependency I don't know why it is taking time let me just close this open up my terminal again then I will do this okay so now these are installing Firebase so this is Firebase file store then we have the Firebase call Core then we have the Firebase auth and I forgot to add one more thing I think that is shared preferences because we are going to store the lot of data offline for the user so we can do shared preferences and this will add the shared preference to our perspect ml file do a flutter Pub get and I think we can do this command again so we have the shared preferences iOS also installed this is generating Parts project and just wait for this to finish okay so we got this thing done here we can click on exit so now we have the basic things implemented we can just hide this particular Explorer I guess okay so now the start so now it's time to start our application for the first time as we have the cloud file store here the cloud firestore so that is a quite big package so it will take a bit of time for this to run on your iOS simulator so I'll just speed forward the video or rather I will just come directly with you once the application is running obviously we got the application started and here you can see if we have all things working and we don't have any issues here so we can click on this get started and now we need to implement the login functionality so the State Management tool that we are going to use is the provider so let me add provider and now we can create a particular folder for the provider think and this will be authentication provided so I will write auth provider this can be class auth provider and this will extend change Notifier okay and now we can go to our main dot dot file and grab this with the widget and our widget will be multi provider and then we need to Define this provider that we just created inside our main.dot file so this can be something like providers before that I think we have to import provider okay and now it will become providers yep so we have this change notify provider create and then this will be auth provider perfect okay so basically let me just explain you what everything we are going to do so let me open my okay so this is the diagram so initially we will be checking this whether we have the sending user or not if we don't have the user signed in then we will sign here with font and now the sign in with phone let's say this is the process of entering the phone number and after we entered the phone number then we need to verify so we have this verify OTP and then there is this particular condition after verification is successful where we are checking whether that particular user who has just verified the OTP I guess in our database or not so if the particular user exists in our database then we can get user data from firestore set the particular sign in and save all of the data to our shared preference that means to share to save all of that data locally on our device if the user does not exist then we have to save the data to file store that means we are sending our data user data from our mobile phone to our server then we will also store the user image to Firebase storage set the sign in and then also save this data to our shared preference so this is the case when we have the check sign in as false which means the user is not signed in and what if the user is signing in then we are redirecting the user to our own screen we can where we can get the data from shared preference so now for that let me come to our auth provider and here we have to code that thing that we just discussed so first of all we will have this is angle parameter which will be checked or which will be checked or called when we need to check whether the authentication is successful or not so here we can create a function which will be called whenever this auth provider is created so that can be check sign in and this chick singing can be a can be a function here with an async because we are going to use shared preference so this will be shared preferences you can provide a name as s or anything that you want then there will be shared preferences dot get instance so we got the initialization for Shear preference done now the next thing that we have to do is signed in is equals to SS or rather s dot get pool will get the pool and if you see this get bull will ask for the key so that key is something which we are going to check in our device so if that key exists in a device which means the which means then it will return R true if that key don't exist in a device then we can return false so this key will be is signed in already can do is signed in something like that then we can notify all the listeners okay so we got this here and now what we can do is we were here in our welcome screen so inside our welcome screen where we have this on press so what we can do is we need to first of all write is final AP which means auth provider so then we will call our auth the provider class and this is the format so we will write auth provider context and then listen can be false because this lesson Falls is similar to if you've used the provider before then you might be knowing this lesson Falls is similar to when we write contact.read and if we do a return if we do a listen true then that will become contact.watch which means whenever any change this is kind of like the concept of a stream so whenever any change is reflected in that value that will automatically update so if you come here so where we will write ap.a signed in which means if the particular user is signed in the user is signed in then we have to do a bit of task here AP dot is saying is equals to true then we need to do Navigator dot push and we can do material page route Builder contacts which means is signed in is true then we have to redirect a user to our home screen which we don't have anything for now so we'll create an empty home screen here and we can return this as scaffold Body Center child let's say text and text can be home screen click on Save and close that thing from there and here we will write home screen and other than that then we have to do this if signed in is equal to full then we will be going to a register screen so now let me just reload and see how this will redirect me so you can see what we have here okay okay so I think we know what we did here wrong so now this will work so we need to set this value this value will be called from outside result provider and this is for the inside value this is a private value so we need to set a global scope to the private scope so now if I click on get started so here we are in the register screen if we reload and let's say I change this to false I should be redirected to our home screen that means our logic is working okay so our logic is working I'll make this to true true because right now the signed in is not successful and we can also see when the sign in is successful we need to do one more step which is not for now when true then fetch shared different data which we will do after we set the data so when this will be true anyways now we can go to this registered section and before that register section or rather in the registration screen what we can do is we need to send the phone number so here we can create a function send phone number and now we will call our auth provider that we created will be what we have provided and this can be listen false now if you see we need to provide the phone number so that can be something like phonecontroller.text.trim because we want to remove any white space let's say I enter one two three then I started doing like that or even if I provide these many white spaces so the if you see the length is more than nine because we have these many white spaces here so I want to trim All That Thing and then we need to go to our auth provider and here we have to create this function which will be signed in with phone so if you see the diagram that I showed you so if Chang if I if something new that is false then you have to create this functions hang in with phone so this will be void signing in with phone and this will contain the build context and the reason we are accepting build context is because we also want to show the bottom what we say the snack bar if you have any issues so build a context and then basically we can just accept the phone number that we want to set to Firebase this will be an async function because we are going to use await so we are leaving to use try and catch but the advanced version for try and cash can be something like with this on Firebase auth exception this is uh what we say this is a class that is provided in the Firebase and it contains already the returns different error messages whenever any error occur so if any error occur we can show in snack bar which we don't have right now so what we can do is we will go to our ellipse folder we will create a new folder utils and in the uterus you will create a new file utils and here we will write void show a snack bar and this will be con and this will be accepting values like build context and also are what we say content and now okay so this is the content now we can return scaffold messenger dot off contact shows snap bar and snack bar let me see why this is having issue rather we don't need to return because this is a void function content okay so this will be inside our text if we see this okay so we can do show snack bar e Dot message to string and now insert our now inside our try function we will first of all initialize the Firebase so this will be something like final Firebase auth Firebase auth equal to Firebase auth dot instance and here we like I wish all dots sign in or rather verify phone number sign in is something where we are implementing the email and password so here it contains few values which are lengthy ones so let me just start with something like verification complete so whenever the verification is complete you can see we will get the phone as credential so we'll write phone not credential okay so this will be in this particular format and then we can do something like Firebase auth okay so it's DNA sync and when the sign in or the verification is complete then we can sign in with credential and the credential will be our phone not credential so this is only after OTP is completed and let's say we have some error then we can take the error and throw the exception to our user that we get the error message here this will be error Dot message perfect now once the code is sent we will be redirecting our user to the OTP screen so now we don't have any OTP screen right now so this will be OTP screen it will do what we say import material.dot and here I need to provide a semicolon and here this will be stateful widget and now so now here comes the question of how the Firebase is going to determine which screen is used or what is the OTP particular ID for the OTP and all of those other good stuff so for that they have this particular thing if you see this code send they have this verification ID and the force resending token so what we can do is the name code it should be required okay so I think we need to do something like this now now we need to get this verification ID and send to our OTP screen so what we can do is we can create the final parameter here also so this will help us to identify okay this OTP was send after the user clicks on this login button perfect and now once this code is sent we can do Navigator dot push material page route Builder can be context and then we need to go to our OTP screen and I think we need to import this and this will take the value but we have verification ID perfect you can provide comma there and now for this code Auto retrieval we will not be coding this thing do let me know if you need this so basically if you study this what is this thing this is triggered when an auto retrieval times out and provide a verification ID so now I think we are good to go let us see if we have some issues here so first of all we need to call our AP DOT sign in with phone then we need to provide the phone numbers now the phone number will be in this format currently it is here if you see currently the phone number will be something like if I enter my one two three four five six seven eight nine zero but we don't want this to be something like this we want it to be in this format this will be the format so this value can be get this plus nine one value can be retrieved from the pack selected country parameter that we have this one so basically what we'll be doing is here we will do a string interpolation and this will become what we have Okay Plus selected country DOT phone code and then we will enter our phone number that we have this one and now I think I forgot one more thing if you come to our provider in this verify phone number we need to provide this phone number also that we are fetching so this will be like this and then when the verification is completed then we have to do that thing so now let me just restart the application rather just reload the application if I click on get started as we are not authenticated because the is signed in value is set to false so we are here to set the values let me just open my Safari and show you the thing that I entered while setting up the authentication part so if you remember we have set up a particular testing number this is the number so let me just enter and you will get a green icon here if I click on login okay so nothing will happen because I need to assign this particular function that means we come to this let me just remove this and we turn on assign this function to the on Tab of this button where is the button okay so this will be like this if I click on this login so now this will open up a particular window inside the Safari where this where the Firebase will verify whether the particular application is okay or is not a robot so let me just go to our OTP screen and provide a scaffold layer and I think we can start coding with start coding for our OTP screen but before that I wanted to tell you this uh the capture that was coming here so basically I will say you to remove to go through the steps of removing that and for that for the iOS part you will have to need you will need the access to the developer console so I'll not be setting up the iOS part here but for the Android part I can tell you what you can do is if you come to this project overview and if you click on this project setting here you will see this app check thing so basically you just need to click on this get started and here in this what we have this Android application you can start with display integrity and we already entered the SAT 256 signature so you can also check this 256 this is same and we can just click on accept okay so I think there was some issue while accepting the let me just reload I click on this why is it not accepting the terms and condition again this is not accepting the I mean you can check on your end and this will work if this is having issue you can let me know I will create a separate video for setting up on IOS and Android so now we are in the OTP screen and here in the OTP screen if you see the design that we have I guess so we got this screen done we got this screen done and we are in the OTP screen so this is quite similar to the registration part that we have so if you come to the registration part and we can copy a few code from here this will be scaffold and I can copy it somewhere till here so like this okay so we need to provide few things whether we have copied the things that were from the register screen and we can change this to verification and other than that we can also change this here this will be enter the OTP send to your phone number and now what we can also do is above this particular image that we are having we can provide one more children which will be aligned and this will be a back button that can go that can redirect the user to the register screen so alignment dot top left child can be let's say gesture detector or even if you can use other values like Inkwell or icon button and so on so we can do Navigator dot off dot pop and the child can be icons dot Arrow back okay so we can also go to our what we say the home screen oh sorry the register screen we can decrease this here let's say okay this looks fine now if we look at the design that we have for the OTP screen we have this particular what we have the values so there is a particular package that we are going to use so let me enter the name of that package here which is by the name p input so let me just open this okay so this is the flutter P input from torque Nike I hope I am pronouncing it right so we can see we have lot of options here to create the Verification codes and so on so we'll just copy this here go back to our perspect ml file and here we will paste it and click on Save and I'll just wait for this to finish and then after the after that has been added we can come directly here and import this so this will be P input if I click on save so you can see fields are coming here and these are currently with the length of 4 which means for digits we can change them to let's say 6 because Firebase sends us because Firebase sends 6 digit.b to the user show cursor will be true and we can have some other properties like if you see here one two three four five six seven okay so this means this fields are working but we can Define some what we have is let's say pin theme default pin theme so this can be pin theme and then we can Define the width and height for this particular value these boxes which can be 60 and 60 let's say Okay so this has disappeared we need to also provide box decoration border radius dot circular 10 and let's say we also have the Border but all colors thought purple dot shade 200 okay so 200 looks fine and other than that we can also provide a text style because right now the text is very small so we can come directly here after this box decoration and write text Style and for the text style we can provide a const value and font size let's say 20. and font rate can be 600. and now one two three four five six okay so this looks fine so we got this field also now whenever this field is submitted what we want to do is so there is a function this on submit whenever this field is submitted we will provide this particular value that we got to our string which we can create here so for now it will be in an empty screen empty string sorry and if we can do a set state OTP code is equal to value and after this field we can create few values which we are not going to code in this video but if you will be telling me then I will be definitely coding those things in future so go to this will be something like the child can be custom button and the text can be verify and press can be null for now okay so we have this here and after this what we have the size box we can create one more sidewalk which will have our text didn't receive any code we will have the font size as 14 font weight as gold color can be color dot black 38 don't receive any code okay so it is looking nice here we can just copy it one more time but before that let me add a height of site works and we can change this recent new code and this will become something like 16. and purple okay can decrease this to 10 and rather 15. so now we can start coding our verify OTP section so you can come here and write verify OTP so this will be verify OTP function which will take the build context obviously because we want to show the snack bar whenever any issue occur and this will take the user OTP and now if we can come to the on press but function that we have for the button if OTP code is not equal to null then what we can do is verify OTP and that can be users okay so I think and else we can show a snugger enter six digit code so basically this means it if you click this verify right now so it will ask me to intersect digit code and even if I enter four digits even then this will ask me to intersect digit code so now for the OTP verification we can come to our that we have auth provider and here below this sign in the next step if you look at the diagram after this hanging with phone we need to verify the OTP so this will be verify OTP so for the verification of OTP we can create the function verify OTP and this will take few values which we work which we can display all further which we can accept from the user required build context then we will have the verification ID that we received and I guess we also need a user OTP by users that is the value that user is sending and after that we can create a function of on success so whenever we get everything completed we can return this on success function basically in this on success function we can do a navigator.push so we can Define that thing here in the OTP screen and directly just in the function we just need to write this on success and we will be good to go so now whenever we have this verify OTP State being called we need to set the loading so how you can set the loading like the way we created these Boolean value now we can also create for is loading is loading is equal to false and then this will be is loading and is loading so now whenever those S verify function will be called we can set the is loading to true and then notify the listener now after we have notified The Listener about is loading the next step we can do is try and catch block so this can be something like on Firebase auth exception catch e and then show a snack bar this can be e message to string because this will take a string value and inside this try method let us start by calling the phone auth credential because basically this phone auth credential will be returned basically for signing into the Firebase if you see where we have the verification complete this will be the same step that we are going to use inside this verify OTP also but now we need we were getting the phone auth credential here so we have to also create a method where we can get the phone auth credential so this will be credential so phone auth provider then the credential and it is asking for the verification ID in the SMS code so SMS code will be user OTP and then we got the credential so we can directly login to Firebase so this will be Firebase auth sign in with credential and then we can provide the credits so now basically we are also going to store the user value so this will return a user parameter if you see this class user so this will be a user parameter that will be written here so we can do something like this so now this will show me an error so we can wrap this in this particular thing and now we will be okay so ultimately what we are doing is we are getting the user that is written through this command sign in with credential and then we are storing the value of that particular thing inside this user parameter this is null now so we have to also write this here so if user is not equal to null then we can follow up with few steps okay so this will be something like this because we need to check here and if this is not equal to null then we can carry our logic if this is null then what you can do is we will stop the loading thing first this will be notified listeners and also we need to stop the loading in this also so whenever any issue occur we need to stop the loading after showing the snack bar so now our logic will be something like first of all we can take this on success this function that we are calling and other than that we can set the user ID so basically if you see this user value variable that we have so this will have few properties like the phone number the photo URL the user ID and so on so we can take the user ID from it and store it locally and store it or inside a rock provider so this will be user ID get user ID perfect and here we can do user ID is equal to user Dot uid so let me see what errors we have okay so this will be something like this now we can come to our OTP verification screen and here we need to check let's say verify OTP and then we have to check whether this user exists in our database yes or no so we will start with that thing only first of all we will create the function and this value so that you can access our auth provider this will be listen false and now as I am writing this lesson false I remember one more thing we can come directly here and we can write provider dot off auth provider and context and listen can be true and rather this will be is loading and then we can do full dot is loading so basically here we are writing listen is equal to true so whenever this function or whenever a value is passed to this is loading we will fetch the state or rather update the state so what we want is instead of this safe area or rather we can keep the safe area instead of the center widget we will do is loading is equal equal to true then we can do a center child of circular progress indicator which will be of color thought purple so now we can come to our verify OTP ap.verify OTP context will be this verification ID can be widget.verification ID user OTP and on success will be the function that we have to focus entirely so inside this on func on success function what we'll be doing is first of all checking whether user exists in the DB for that we can create the function in our auth provider first so database okay database operations let's say so we need to check this check existing user so this means we can return a true or false so we can start with the future function with the well written type of Boolean value true and false so this can be check existing user and we can do an async so basically we are going to document snapshot so this will be the reference of the place here we are going to search so I think we have to also initialize Firebase file store so I'll be showing you the structure here okay so this will be Firebase file store this can be similar to this perfect if you look at the structure okay so I think I have not updated the screenshot here for that structure so basically we generally have the collections where we will be storing the data so for this we will have the users collection and inside that each collection we will get different user IDs so this document ID will be present with the user ID so remember in this verify OTP we have saved the user ID globally so we can use that parameter here and now we can get it so this snapshot will be having a function I guess exists okay so if snapshot exists we can return true and let's say we also print user exist and else new user and this can be false so this is the function and now this will be check existing user then take the value and now as we got the value here we can do more operations so if value is equal equal to True which means user exists in our app else new user so for a new user okay so this is for the users who exist in our application for the new user we need to save the data to Firebase five store and the place here we are going to save the data is this particular user information screen so let's say we come here and we will directly shift the user to our user Navigator screen so this will be push and remove until and the route can be material page route Builder can be context and then we need to create the user information screen dot dot so we can to import material.dot and user information screen and let's say this is scaffold so now we need to just enter user information screen here and I think we need to just provide a semicolon here and we are good to go so this is for the new user and this is for the existing user and now if you look at the file store database or even if you look in the authentication section we got no users here as we have not verified the OTP and we can and after we verified the OTP then a new user will be created here so let's say we reload the application and I click on get started I will enter the phone number that we have which is the dummy phone number click on login and here we are inside the OTP verification screen we can enter the number as one two three four five six and as I click on verify it should show me a circular progress indicator so let's see okay Enter sick digit code let's see why it is showing me here this is already six digit and are we not setting up the what we have so let's see we print this OTP code in the deeper console or rather if you come here and print this here null why is it showing me null here so all submitted okay so this is not on submitted this is on completed my bad I'm not seeing this thing so I guess we can just reload and see this one more time so basically these type of Errors will come every time you start coding the app yourself so you can just so instead of getting overwhelmed from it you can just look at how you can solve it and go through line by line of how things are done I can click on login and here we are in the OTP verification screen so this will be one two three five six and it should show me a circular progress indicator and redirect me to the user information screen okay it should also print new user okay and now if you look at the database there will be no data entry in this High store database as we are not saving the user data right now but there will be an entry in this authentication section which is automatically detected by Firebase itself and this will also give us the user ID this is the user ID that we were saving in the but we have this particular string so now if you look at the database we don't have anything and but in the authentication tab we do have things here so we start so we will start by designing the user information screen and for the OTP verification you are quite done till here but let us shift to this what we have the user information screen also so we are in the user information screen and here and here we need to create different controller like name controller and this can be biocontroller and other than that okay email controller and as we have defined the controllers here it's the right time to dispose them whenever we don't need them so this is some good practice that you should adopt email controller and then we have biocontroller now for this thing what we can also do is let me start by looking at the design okay so this is a column and here we have text three text form field button and then the circle iftar so there can be body safe area child can be padding and this can be similar to the ones that we have till now article 25 horizontal 5 this is quite different I guess and the children can be single child scroll View which we obviously don't need okay so we can directly provide the paddings here and we can do something like this perfect and for the children a center child actually a column and the first children in this column will be are circular indicator so this will be an ink well because we need a on type functionality here and the child can be first of all we will see whether there are any image present or not if the image is not equal to null then we can display this particular section if the image is picked from the gallery and it contains some value which means this is not null then we will display the image there so for that we need to get or rather create this file so make sure don't import the dot HTML make sure to import this dot IO and this can be file so initially this will be an null value so this can be image so if image image equal to null then we need to do a particular container and else we will do another container let us see what we are going to code in this so if image is image so if image image is equal to null we can do a circular after where we will have background color candid Circle dot purple background color okay and this is having this size we can Define the radius to be 50. and other than that we can also Define the child which can be icon account Circle and size can be 50 let's say color can be colored thought white and other than that if we have any value in the image parameter then what we can do is we will do Circle F star background image can be image but rather this will be not a normal image this will be file image oh Scooby image and as this is null so we need to provide an exclamation mark here and radius can be 50 itself so now we got The Inkwell here next step will be to create the text fields so we can start by providing the text field inside and container and padding can be something like symmetric padding of vertical five and horizontal 15. and we can provide a margin also from Top so this will be name field then we can have email and then we can have what was the last field bio perfect so we can create one particular widget here which will be text feed and this will accept few values but let me just return by adding parameter here because we need a bottom padding from each of the fields a little bit text from field perfect now the parameter that we are requiring from the user is into text and this can be icon data and we also need a type of the text input and we can also provide the maximum lines because we need bio controller also and at last we will call our controller so let me just go to a name field and start assigning few values text field enter text can be John Smith this is a dummy name icons dot account Circle and input type can be text input type Dot name maximum lines can be one and that can be named controller so we got one value here which is not that much decorative right now and this can be email and then we have the bio so for the email what you will have is ABC at the rate example.com the icon we can have error I have the icon we can have is this icon dot email address and email controller this will have maximum two lines and enter your bio here and this can be bio controller for the particular icon this can be edit and now let us start designing our text field so we will have a prefix icon but before that let us provide the cursor color for file controller can be controller keyboard type can be input type maximum line can be maximum okay so this is maximum lines and it then this can be prefix icon foreign can be let's say 8.0 decoration can be box decoration border radius dot circular color can be color dot purple which is looking awkward right now but what we will have is child of icon size can be 20. color can be collected right and now this looks much better so other than that we will have other properties like the enable border outline input border and inside this outline recorder we will have border radius let's say 10 and Border Side which I think we can do colors are transparent or rather not colors dot transparent these can be purple or if we look at a design okay so these were transparent and then we can fill the color in it and this will be focused border and then we can provide into text which will be hinted text align hint with label with hint and Border can be input border dot none and fill color can be colored for purple dot shade 50. and fill will be true so now this looks much better so we got all of these things here other than that we can come back to this container and provide a little bit of sidewalks again with a height 20 and then we can call our custom button height 50. width can be and this child can be custom button which will have the text continue let's say and on press can be empty for now okay so this is not having good height here that is 280 perfect and then what we can do is we can store the data tour user data to database this was the thing that we've discussed here save data to firestore database so again we can do a function which is Feed Store database and we can create the instance for our auth provider and this will be listen false now before we start moving I want to create the model or the structure of our user data this will be user model if you see basically we will have the bio the created date the created add date the email the name the phone number then this profile pic which will be a string value and then the user ID so we can start by writing user model and here we will have properties like string name email bio profile pic created at phone number and then user ID so we can okay we can provide final values to this and so that we can create a Constructor perfect this can be required values so we can do something here and then this will be having one function from map where we can return user model and you can just do the same for all of these fields I already have them so I just copy and paste them here and this is from map which means we are getting the data from server and this is to map which means when we are sending the data to our server so this will be in this format to map so name email user ID bio profile pic phone number created that so inside this user information screen we will be passing the user parameter for the user model so this will be user model so the name can be name controller dot text Dot trim and we want to remove all the white spaces first and this will be email controller.text.trim for the bio this will be biocontroller dot text Dot trim and for the profile pic we don't have profile pic which we will update soon we don't have phone number rather I guess yeah not in this user information screen so we will update all these values soon and we can now see where that image is not equal to null and I'll see if the image is null we can also do one more thing which will be show snack bar please upload your profile photo and now and this continue button we can do something like door data if you click on continue please upload your profile photo we can increase the size for this button let's say nine zero so please upload your profile photo now for that thing if you remember we have The Inkwell for on tap so we can create the function here which will be for selecting image before that I wanted to show you the package that we are going to use for that which is image picker so if you see this is the package so we can just copy it here click on Save and if you come back to a YouTube folder where we have the snap bar we can create this function which will be our future which means we are returning the file that we are getting from user listen you pick image with a build context because you also want to display any error so this will be an async and now this will be null which means we have to also import this flutter dot IO and we can create this here try catch block show snack bar e Dot to string and in the drive block final pick image is equal to await image picker Dot pick image and now it is asking for the source if you hover over this image source dot gallery click on Save if picked image is not equal to null image that we have here will be updated with this Big Image dot path and we can then after all of these values we can return the image from this function and now inside this user information screen we just simply write this image or rather select image async image that we have here inside the user information we can update that with our pick image and if you see the return type this is also image this is also image and then set the state so now if you can see we can do this select image if you click on this name implementation found for better pick image and set this which means you have to restart and as we are accessing the user Gallery we need to add these parameters here if you come to your info.p list you need to add this NS photo library usage description if you have the xcode you can also do something from there also so you can come back here to using our xcode we can see the info.p list and here we can click on ADD button and NS or other photo I think this is in the Privacy thing access photo library user description and the value can be rather the yeah the value can be this excess allow us to upload images from your phone gallery to our server click on Save if you come to this and info.pls file okay so we got the value here NS photo library user description and then the string you can shift this down here but make sure it is after any key string pair so if you see info.p list I guess okay this is present here now from top to this bottom we can close this and we can close this and now we can just run this application again and wait for this to start application is running right now so now we can just click on this get started and here I will enter the phone number click on login and then this will open up the Safari browser window where this is going to validate the recaptcha thing and now I will enter the OTP as we already know the OTP one two three five six and then we are represent redirected to this user information screen because currently we don't have any data in the file store database also in the debug console we have this new user printed so we can click on this user console so after we click on that circular iftar you will see we are having this section where we where this is the string that we just added in the xcode this access allow us to upload images from your phone gallery to our server so we can provide access all photos and then we can select this particular photo and this will be updated here in real time so this means we have the image file here and we can upload or rather update these values also and bio can be hello this is shivansh from backslash flutter okay so we can come back here where we have the function so this user model will be updated with the name controller email bio but what we are going to do with this user model so in this if image is not equal to null which is true right now because we got the image here so once that is here present then we will be first of all where we have the diagram we will save the user data to file store Firebase file store so this will be something like AP dot save user data to Firebase this function is currently not present so we will go to our auth provider and below the place where we have the database operation we will start with this function which is a very important function so this will be save user data to Firebase and there will be values like build context obviously because we will be showing the snack bar if any error occur and this would take the user model also so other than that it will take the file because we need to upload this particular file so this basic structure is something like we will be uploading the file to our file store storage file based storage and then this is the screenshot file file based storage structure so there will be a directory profile pics and with the entries of this profile pic will be something like the user ID so basically let's say we get a new user register to our application then the Firebase will automatically generate a string so this these two are the automatic automatically generated user ID and then we are storing this particular string and this will be the name for the photo that a user uploads you can see the size 1.84 9965 KB and so on if you want you can provide an image compression method but we are not going to cover that thing in this video we can import this thing here and then we can also do on success function if we want let's see first if everything works fine and we can set is loading to True notify listeners try and then this can be on Firebase auth exception catch which will be e and then shows number e Dot message to string and we can also stop the loading and notify our listeners so now we come to our user information screen and if you see these parameters are required like the context which we already have here the user model which is this thing that we have and then we can provide a profile profile pic sorry which will be this image that we have in the global scope and other than that what were the function okay so on success which will be empty for now right now so we can go to a save user data to Firebase foreign catch first of all we will be uploading image to Firebase storage so we can create a function for that thing this future function will written the string and this string will be the URL if you see the structure this will be the URL for the image that we upload so this will be returning a string store file to storage there will be in reference and then the file that we want to upload so basically this reference will be the structure that I just shown you inside a profile pic then the user ID so final okay so this will be upload task upload task and then we have to initialize the Firebase storage also so Firebase storage Firebase storage copy paste copy paste and this will be Firebase storage dot ref not child child can be ref and then put file which will be a file and here let's say we await let's upload task to upload the file and this will be kind of let's say a snapshot so we got this here and then we can return the download URL let me just save it first so this is the snapshot Dot ref dot get download URL and then simply return the URL so now we can come to our function we are restoring the data to our Firebase so basically where this will be store file to storage and we need to provide the reference which will be something like profile pic and then the current user ID which we already stored globally in this auth provider and the file will be image okay so what was the file that you are getting profile pic and it then when this function is created which means the value is present then we can update our user model so our user model will have the profile pic URL which will be the value while it's showing an error okay so I think this will be like this nope with model dot created at okay so I would have to do all these things let's do or let's remove these final values because we already are having the required values here so created ad will be date time dot now so why is it showing me an error okay so millisecond since eposh and then two string then usermodel.phone number and we can get the phone number from our Firebase auth current user Dot phone number and user ID can be also fetched similarly so basically what we are generally in doing here is initially we were sending the user model and updating the few Fields like name email and bio because these are coming from this controller and then we shifted those values to the save user data to Firebase and then updated few values like the profile pic after this function then the created at the phone number the user ID and now we can also create a global user model here so this will be something that we can call in our home screen this you don't have to then do generally but I just do for this tutorial you can directly use the share preference to fetch the data okay so this can be something like this this and this and this if we come here we can update the user model with the latest user model that we have and now it's time to update all of these value to our database uploading to data base so this will be await Firebase storage dot collection or not storage this is the Firebase file store dot collection which will be users the document can be user ID and we can set the values like user model to map if you look at the two maps we were setting in this value in this particular format and then we can initiate on success method and we can set is loading as false and notify listener too to be present here and I guess we are good to go here let me just double check we can come to our user information screen so as we are here in the user information screen we need to first of all create this is loading thing that we have so kind of similar to one that we have in the OTP verification screen so this will be like this and we can have this thing and let's say is loading equal to true else this let's say right now it is false okay so I can shift this here something I guess yeah only this when only to change this when it is true so we can shift we can either come here and now once data is saved we need to store it locally also so for that we need to create a function in our auth provider which will be using the shared preference library that we have so here comes the main part of shared preference touring data locally because if you see after we upload we need to store file a set sign in and store data locally so we need to first of all create this future function save user data to SP ASP mean share preference and this can be shared preferences as a weight shared preferences dot get instance await as thought set string which can be let's say user model and then we need to encode this because this will be in the Json format and I guess we need to also import this so we can come here and we can write AP dot set or save user data to SP then after we save the user data to SP we need to also set the sign in remember the sign in that we have which were checking the sign in so we can do future set sign in which will be an async function again we can copy this line here foreign value which was this is signed in we can set true and in the general scope in the overall scope you can also set this true and notify the listener and we got this here so TP Dot set sign in and then after we got all of these thing then we can do a simple push Navigator push and remove until then this will be home screen so quite done with the user information screen I guess while it's showing me an error okay so context and then we will have okay material page route foreign quite a bit lengthy step that's the reason I use uh what we have Push named so we can see now let me just show that current database right now if you see current database is empty you can click on create and once the image is uploaded I guess it will redirect us to the home screen okay so we are in the home screen the image is quite lengthy one that's a reason it it took a good amount of time so here we have the user's collection then this is a particular user ID which you can see here this was automatically generated by Firebase 2883 2883 then we have bio this is shivans from backslash flutter created at email name for number profile pic if you click on this profile pic URL you can see this is the image and also in our Cloud what we have storage Firebase storage we get this profile pic folder inside this profile we have the name for this particular profile of user as this user ID and then that this is the size so this means we are in the home screen the home screen we can simply start by let's say foreign ER of our provider okay this is in the build method and we can return app bar with our background let's say purple title can be flutter phone auth and there can be actions like and now there is one thing that we have to do is currently if you see there we can go to the body tag center child this will be column Main and cos cross axis can be Center children can be circle after background color can be colored thought purple background image can be Network image and we have this user model then profile pic and radius can be 50. then simply we can return the text so this can be AP Dot usermodel.name and we can do same thing like phone number email bio and we get this data here but if we reload the application let's see whether we get these data or not so these data are not fetched right now because we are not saving the user model again so what we have to do is if you remember in our welcome screen where I mentioned you when true we will be fetching the local data so what we will be doing is we have to fetch this so this will become if AP dot is signed in is equal equal to true then we'll do this else do this so for the true part we will be coming here and for the what we have the else part will be coming here you can remove these things and let me just reload and we can go to our auth provider and create a function to get data from our shared preference so future get data from shade or let's say SP y this paste this string data is equal to s dot get string and this string will be user model that we have so this is a Json string so we can update the auth provider user model from map which we need to decode because earlier we encoded now we need to decode we can also set the user ID notify the listeners and now inside our get started screen we need to do something like a weight which you have to create this okay here AP dot get data from SP then or rather when complete then we can shift the user to our home screen click on Save provide a bit of comma there and we can just reload and I guess this should show me the home screen with the values okay perfect we can come back here also and I can be I think we can do push replacement on both side you can click on reload get started and we are in the home screen if we reload I guess okay now what if I click on this home screen button this should log out the application so we can come to this and here we will write foreign async await Firebase auth Hangout and we can also set if signed in is equal to false notify listeners and clear all shared different data so for that I guess we need to call this here SP dot clear perfect and here then navigate dot push material page route okay context and we can come to our home screen foreign [Music] not in the home screen if we reload this shade show me an error or not because he has signed out this will be welcome screen so now I can reload but if you remember in the OTP screen there was this value which was checking whether user exist in our application or not so what so currently the user exists in our app so we need to set that thing also so here we need to see the diagram if we take this scada data then set sign in and that then set shared difference so we need to get the data so for that what we can do is future and get data from file store await Firebase okay Firebase five store Firebase file store dot collection users Dock and now currently we don't save anything so we have to get the fireplace auth to get a current user ID because this is not saved only the user is authenticated so we can use this value then this will be document snapshot snapshot and we can do something like user model is equal to or rather this user model which is inside the application is equal to user model from map snapshot dot data I guess this will work now let's say we do something like this this can be here and we can also set the user ID foreign close this and now this will be AP get data from file store then save user data to SP then set sign in and then we can do the Navigator dot push and remove until material page route Builder context here we can go to our home screen what happened why is this showing me an error okay so this is push and remove until not name so now we can reload our application and as user exists in our database we can check one two three four five six click on next and here we are here in the home screen if you log out we can see the login functionality also works perfect so this was everything for this video in future I will be adding more functionalities to this OTP verification thanks for watching and do subscribe the channel if you have not subscribed yet thank you

Channel: Backslash Flutter

Views: 55,592

Keywords: flutter firebase authentication, flutter tutorial, firebase phone auth flutter, flutter, login ui, phone otp, phone otp firebase, authentication firebase, ios flutter, phone number ui, login page, login signup page, pinput, firebase, ui ux, android login signup, login signup mobile, flutter in hindi, flutter india, phone auth firebase, flutter firebase auth

Id: GoIREQjWiWk

Length: 134min 35sec (8075 seconds)

Published: Mon Dec 12 2022