Flutter - Firebase Mobile Phone Verification | Firebase Auth (2021)

okay let me write my number and let's click on send i should receive an sms from firebase i guess there it is if i copy this and if i paste it in the otp and if i click on verify this should take me to the home screen so that's where i can great [Music] hello friends i'm maz aftab from easy approach and in this video we are going to integrate mobile verification from firebase authentication in our flutter application i already have a video on this topic however the video is too old actually because i've made it almost one and a half years ago and a lot of deprecated stuff in that video so people were actually requesting me to remake the video and also there are a lot of stuff that's uh changed until now from from google uh to make sure the device safety so we have to do uh some additional stuff in order to uh run the application or in order to completely integrate firebase authentication uh in our flutter application so let's start making this thing so i'm actually starting from the very scratch we just created a new flutter application a new project and you can see there is nothing i have done with the code it's just the default code so that you can you guys can really see the progress so first of all what i'm going to do i'm going to add some dependencies in pubspec.yml file so that we can have the features that is required in the application to integrate firebase authentication so there are two dependencies uh the first one is firebase score to use firebase actually in the floor application and the other one is firebase authentication which is more specific to authentication stuff so once you edit these two dependencies you can click on pubget this would install these dependencies in the application and then you can use you can also use the latest dependencies however i'm still using flutter 1.2 not upgraded to flutter two because i have uh the older projects that's actually uh using dependencies so which requires 1.2 and they cannot run uh till now they cannot run on 2.0 so i will uh i will soon update it to 2.0 but right now i'm using 1.2 so uh you can add the version you can update it based on what version of letter you are actually using now the second thing that we need to do or we can close this pubspec.yaml file since we don't need it again now the second thing that we need to do is uh we would have two screens in our application the first one would be uh the login screen on which user can enter the credentials like his phone number and the code he will receive and once uh he will be verified then he will be navigated to the home screen so there will be basically two screens in the application so what i'm gonna do inside the lib i'm gonna create a package uh or folder you can say uh with the name screens and inside this i'm gonna have to a stateful visit because for the state management i'm not going to use some other state management since the topic is really specific to firebase authentication so we can just go with the with the state management uh using stateful widget so the first screen will be the login screen you can name anything you want login underscore screen and let's make it a stateful widget and let's give it a name log in a screen and also we need to import material dot dot at least that's good and the second screens sorry the second screen actually uh will be the home screen so home underscore screen and this also will be a stateful widget first of all let's import material.dart and then you can make a stateful widget the name home screen and for now uh because we normally use a scaffold as the base widget or as the root widget for every screen so that we can use material design design components like app app bar and floating action button and so on so we need to have a scaffold in in build secondly uh just to identify these screens and uniquely we can just simply use a center widget and we can have a text home screen okay so we can do the same we can just copy this thing and we can have this code and login as well just rename it to login now the first by default let's remove this access comments by default our application will take user to login a screen right now because after some time we will surely going to have some verification if the user is already logged in then he will surely be taken to the uh to home screen rather than login but right now because we don't have any functionality so far so we are just going to navigate users to the login screen by default so let's reference here login screen okay so let's run the application to see uh what we have so you can see the user is taken to the login screen and if i can remove the debug debug banner because i don't like it so you can just make it false okay that's great now the mobile verification has actually two steps in the flow the first step is user has to give the mobile number uh so that we can forward it to firebase and then firebase will send the otp code to the to the user physical device so then user has to provide the otp code that he has received in his physical device so obviously we are going to have two different views in the login screen the first one will be for letting user give his mobile number and the second one will be uh to use a give his otp code that he has received and then after taking the otp code we will further verify if that matches to the uh to the one that is sent by firebase on the device and then we can take the take user to the home screen so basically we are going to have two states uh in we can actually make enum for for showing two different uh views in the login screen and we can we can give a name to both of the state the first one or we can maybe show show mobile uh number state a show mobile actually form state so that user can give the mobile phone number because that's actually the first step and the second state we can make sure otp code is state so in that in this case uh actually the firebase already sent the otp and now user has to provide the otp so we can render the ui based on the current estate of the login screen so because it's just a theory uh so maybe you're not actually getting my point but let's uh make some code so that you can really understand so what i'm going to do as i said we have two different estates in the login flow so what i'm going to do i'm going to create an enum so i'm going to say it login estate actually or mobile verification state will be more better that's great and i'm gonna have two different values in it the first one will be you can give any name but just to clear things the first one will be show mobile phone state mobile form state so in this case uh our application will show a mobile form in which user can enter his mobile number and then we would have some some button like uh send or verify something like that and the second step or the second state will be show otp form estate so in this case the fab is actually already sent the code on the physical device of the user and then this estate will be active in the in the in this state actually we will show the the otp form so user can enter the otp that he has received on the device and then we can verify so these are two states that's actually uh we need to we need to check so the initial state when the user of will come first time on this screen the initial state will be obviously because user has to first provide his phone number uh to actually receive the otp code so the first state or the current state should be the the first one which is show mobile phone state mobile form state and what we can do now we can remove this and we can actually check if the current state equals to show from mobile form state then we can have a show mobile form widget we don't have it right now but surely we are going to have it and we can pass the contacts and else if the other state is the current state actually then we would have get otp from widget so we are going to have these two widgets function soon in the application so i hope you will get it and now we can create these two methods that will return the form widget okay that is good so we have two empty functions that will return obviously the form in case of mo get mobile form widget it will return the mobile form uh widget and in this case we will return the get otp form widget basically they will be same because uh there must be a text a text field and then a button in in both of the cases just we will associate different controllers uh in in both of the cases and we will just rename few things and rest will be same now first let's create this get mobile form our widget so basically i'm going to have two different widgets in vertical direction the first one will be text field and the second one will be button so obviously we need to have a column widget so that we can have multiple widget and volte vertical axis so the very first widget will be obviously the text field so that we can take input from the user and let's uh let's assign some hint to it so that user can know okay that's great and since right now we have the default estate show mobile form state so obviously this will show the the phone number one okay so just to make everything in the center we can have a spacer before the content before the first widget and we can have a spacer after the lost widget that's great and the second thing or we're going to have let's first have some vertical space using size box of maybe 16 pixels okay then we need to have a flat button inside the on press we are right now are having just empty function but we'll surely do some coding and in the child we can have some text like verify maybe in the capital let's format this code okay also we can we can give some color to the to the button and also we can give some text color because we are using a blue background color so we need to have the foreground color of something white or brighter so i'm using white okay let's refresh it so you can see uh the basic form and there's no padding at all in the around this uh whole thing so what i'm going to do i'm going to cut this thing or rather than just having this as it is i'm gonna wrap the content inside the container okay so we need to cut it from here and let's make container inside the child we can paste it and we can also provide the padding maybe of 16 pixels now what we have to do uh we have uh the text field we have the complete form uh we can have we can associate a controller with this text field so that we can get the value from this text field in future so let's create a final phone s phone controller and that should be text editing controller and let's create another one because we are going to use for otp also that's great so we can associate the controller with this text field this should be phone controller and similarly the same code will be inside the will be inside this otp form just we need to change few stuff the first thing that we need to add is uh maybe we can do this uh thing send and we can keep the other one to verify and here we can change to otp enter otp and also don't forget to change this phone controller to otp controller that's great now before continuing further because we have almost done with the ui we need to now add the the flutter project in firebase project because we have just added a few dependencies in in flutter level in pubspec.yaml file however we need to explicitly add our flutter project in firebase project and we need to explicitly add some dependencies in native level so what i'm gonna do i'm gonna open google chrome and i'm gonna open the uh the project that i have just created so this is phone verification project and firebase it's it's just a new uh project you can create up your own project there's nothing issue in this and what you can do you can add the device uh in this flutter in this firebase project so for adding the flutter project in this firebase project uh you you can you have to basically choose these two both if you your application support multiple platforms and this is uh what flutter made for however we are just going for the learning purpose we are just going to add for the android module okay the first thing that we need to define in order to register the application in this uh project we need to have android package name and for getting the android package name what you have to do you have to go inside the android module in your project and then inside the app we would have a build.gradle file and you can you can find the application id which is actually the package name and you can cut this sorry you don't have to cut this you just have to copy this and you can paste it here that's great now you have to provide some app nickname uh which is just optional so let's give it anything that's great now we have to provide the debug signing a certificate sha one certificate and you can see it's optional however in the case of firebase authentication it's necessary so you can see the text below uh for google sign-in or mobile verification uh this is actually required so for obtaining this sha1 what we need to do what we can do there are actually a couple of options but i'm i'm going with the basic one with the easy one however this is little long compared to the first one the other one so what you can do you can open the android module separately and then you can open this gradle however this will take some time to show the options and you can see it's now showing the option so in in in the android we have uh maybe we have the app sorry we have the task and inside the task we have android and inside the android we have signing report so just double click on the signing report you can see this will generate the sha-1 as well as sha-256 and we will actually need both right now we just need the sha-1 but obviously in the future uh well we when we configure a few more stuff then we will need this hsa 256 also in this in the same project so what i'm gonna do right now i'm just gonna copy the sha one and you can you can copy both and you can save it on maybe text on some notepad or something and you can use in the future you don't have to write you don't have to obtain this again and again because i think this is same in all the cases so first of all i'm gonna paste the sha-1 here and i can click on register app now we need to do the second step which is to download uh this google services.json file so let's click on the download and this will download the file you can locate uh in the explorer or something okay so we already have a file downloaded couple of times so what i'm going to do i'm going to delete the the already existing file so that it comes with the proper name move to trash where it is move to bin okay okay i'm gonna download it again so that it does not add the post fix with it now this is just google services because the name should be same okay so what we need to do now this file should be copied or moved to the android module and inside the android module we have app folder so this should be inside the app folder in the android module so what i'm gonna do you can see this is the android module and this is the app folder so this file should be placed should be copied in this so i'm just gonna drag the file and i'm just gonna drop it in the app folder and you can just click on refactor this will add the file in the project and now we can proceed with the next step so the next step is we need to add few stuff in the project level build.gradle files so this is the actually thing that we need to add in the build script we have couple of things repositories and dependency and inside the dependency we need to paste this google gms google services so let's go inside the project level gradle build file so you can find it here and inside the dependencies you can just paste this line that's great so we don't need to add anything more now the second step of in this step actually is we need to add few stuff in app module build.gradle file which is app level gradle build file so the thing that we need to add is the first thing is we need to add this line so i just copied it and let's open the app level gradle fill file which is actually inside the app folder and the very first thing we need to add is after apply plugin that's great and then we need to add these two stuff in the dependencies so the first one and the second one that's great so we can continue with the next step i think this is enough we have successfully added and you can see the device here is the device that you have added in this firebase project now we need to enable the firebase authentication service uh in in this firebase project so for enabling this you need to go in authentication and then you need to click on the setup sign in method and in the phone you can enable it that's great and you can see oh it's saying that phone notification phone authentication actually requires additional configuration steps so we will click on this android to see what's inside it or maybe i can summarize it for you but for now you can click on the save so this is now enabled and the second thing that we need to make sure is a lot of the stuff that we have already done on this on this file we need to go on enable app verification okay so recently firebase added the phone verification system with the firebase authentication so you can see it's saying to use phone number authentication firebase must be able to verify that phone number sign in requests are coming from your same app so there are actually two ways that firebase actually accomplished this the first one is the safety net so if the user has a device with google services installed so firebase will verify uh it that it is the legitimate device and there's nothing additional uh you need to do just uh to actually sorry just to enable the safety net uh you have to do two steps the first one you have to enable this service from the google cloud and then you have to add uh the app as such a 1 256 fingerprint on your project and the other option is recaptcha verification and if the user does not have this google services installed then obviously fireball firebase will verify the mobile using this recaptcha verification so in this case you need you just need to add a single dependency so i have actually copied the dependency so you just need to add the dependency on native level so this is actually the browser dependency so for the recaptcha thing the 5 is actually enforce or the android device enforce to open the uh the browser actually to show the captcha for verification so this dependency should be here in case of recaptcha and then the first let's complete this first thing you first have to click on this android device check api you have to enable it actually before running the application so make sure you select here the same of project that's actually we are using so this is phone verification so let's search for the phone verification and you can find it let's click on this and make sure it's completely uh you can see now viewing project form verification okay so now you can enable this service which is android device verification so this actually uh we need this in case of safety net mobile identification or the verification so once it is enabled that's great you can see this is enabled and the second step in order to let in order to have this in safety net completely successfully work you need to add uh the sha-256 as well we have recently added the ssj1 but now we have to add the ssj256 also so in this uh for adding this you can just click on this project setting and you can go at the at the bottom and you can see the ssh certificate already added but it is shff1 so in order to add ssj256 also you just need to paste the sha-256 code you don't need to do anything so i have already the sha-256 so let's copy this and since we have uh both of the ssh certificate we can close the android module and you can just simply paste it and you can see by default or automatically it detects that this is ssd 256 because it's a lengthier in the in the length okay so now we can click on the save button so we have actually uh completed all the stuff uh for actually firebase uh work uh properly okay so now we have done with all the all the configuration stuff and we can close uh all the unnecessary files okay so mostly we'll work on this login screen so just close the project explorer also and let's do the real coding stuff so firstly what i'm gonna do uh before using firebase in the application uh we need to enable or initialize the firebase in in the project so for initializing at the firebase in the project or we need to write few lines in the main function so basically we first need to write firebase dot initialize app and you can see this is a future so we need to add a weight keyword before it and since we are using a weight we need to add the async as well and there's one more thing uh before actually we call this run app which actually uh opens the flutter app which actually starts the flutter application so before this run app this is just a dart stuff and when this run app executes so this is actually the dart communicates with flutter so what we are actually doing we are initializing this flutter uh initialize app before flutter application runs so when whenever we have such sort of situation we have to uh write a line which is flutter widget binding widget flutter binding etching i think and we have to ensure in is initialize so whenever we have to communicate with flutter framework before it actually runs we have to write this code so this three or a couple of lines is actually are actually for initializing the firebase in the project now what we have to do uh the first thing is in this login screen we first need to get the reference of the firebase authentication so we can use uh the the methods or the future that's inside it for for signing in the user or signing out or whatever the thing is so let's uh right five this auth and let's create the instance you can just say auth and just initialize it using firebase auth dot instance so this will provide you the instance and then you can use whatever inside it and for the mobile verification we have actually um a feature which is called verify phone number and you can see it's actually a future and there are different callbacks associated with it so i will come on each one by one so first we we have to use here a weight and since we are using a weight we can use here async that's good and now uh i will talk about these callbacks one by one this is just the phone number that you need to provide to the firebase that's actually given from the user given by the user so we can just get the phone number using phone controller.txt and this is actually verification completed callback so let's write the code for it so whenever the verification is automatically done we actually receive uh the phone auth credential i will explain it further uh soon and these are all the callbacks that's actually future so we need to add async and this is how the structure will be whenever the verification fails in case user has given the wrong mobile number or in case user has provided the wrong otp that he has received so we receive inside the verification we receive actually verification failed instance which is uh which contains the error and all the stuff and this code sent will be will call would get called whenever we receive code from the firebase on the mobile on the user physical device so uh whenever this callback gets called we normally update the ui to show uh the the otp form so the user can give the otp because this make sure this callback make sure that the code uh is successfully sent to the user mobile and now he can he can enter the otp so the first thing that we receive in this is verification id which is actually unique in each of the verification requests that goes from app to the firebase and this will be in the future this will be also used uh for for letting user uh into the app and signing it to the app so uh we will need this verification id uh in the in the future also it contains the resending token so we are not going to use this resending token however this should be here okay and this is uh the acing future so we need to have this and at the last we have the code auto retrieval timeout and what happens is there is some threshold for the for the auto verification uh something like 60 seconds maybe or maybe 30 seconds i'm not sure so after the after the timeout has occurred for the auto verification completed this callback gets called so inside it we receive the verification id which we also receive in case of code sent and we will not use it also the main thing that we will going to use is this code sent to update the ui from login form from phone form to the otp form we will also use this verification completed to let user into the app automatically and this will be this will verify the user uh actually android itself will verify the user we don't have to explicitly do anything but we will surely will work on this first and once we achieve this functionality then we will write the code for verification completed because it's just a simple couple of lines code and we also going to use this verification field in case we get any error in case the user has provided the wrong otp or the wrong mobile number we will print the error on the console or maybe on the snag bar okay so now first uh let's start with the code sent uh callback because this is the most essential uh we will actually show the otp code of ui uh we will actually update the ui whenever this callback would get called so first of all what i'm gonna do i'm gonna call the set state to update the current estate of the login or the mobile verification uh you know you already know we have the current state show mobile form state which is the default state but whenever we receive the code we need to change this current estate to the show otp code state what was the name of it so it's mobile verification state and inside it we have to update it to show and you can see it's again cannot be used god's final i've made it final okay so we don't have need to have this final we can just make it mobile verification that's great and now the second thing is we need to save this verification id because it's just a local and it only can be accessible inside this code send callback but we surely need to take user to the or we we surely need to update the ui uh to the otp code and whenever the otp code will be filled and the user will would click on the on the button that will be verify or send whatever the button will be on the otp form then we will trigger the signing in so we need to have this verification id for signing in so we need to save this uh in the global level so what i'm going to do i'm going to create a string verification id so that i can cached it and simply i can can use this dot verification id and i can replace it or update it with this that's great also for the verification field we can just print the error on the on the console or maybe on snack bar so for having a snack bar what i'm gonna do the more good way is to associate a key with the scaffold let's make a final global key with the scaffold state and let's name it the scaffold key we can use it to show the snack bar and we can associate this key with the scaffold that's great and for showing the snack bar we can simply access this scaffold key and we can get the current state then we can write show snack bar by this way you don't have to worry about the context you just need to call you just need to get the reference of the scaffold key and then you can show the snap bar the other way requires the context so we can show the snack bar with the text and you can access this verification field and inside it we have the message so we can simply print the message that's great before moving to uh signing in uh uh for functionality uh what i'm gonna do i'm gonna add the uh loading stuff because uh the verify phone number will take some time so we need to for adding the interac interactivity in the application we need to add the loader as well so what i'm going to do i'm going to create a bool variable uh with the name show loading and by default it will be false but whenever this uh before this verify phone number call we will call the set state and we will change the show loading to true also if the verification completed we will again call the set state and it will change the show loading to false and this will be the case in case of we get the verification field and also when we get the code on the device this should be they should be loading and since we already have a set state we don't need to have explicitly and in case of code auto retrieval timeout there should not be the verification uh there should not be the loader false because uh because this will get called in any way since we are not right now doing the code for the verification completed so this will get called so there there is not and there is no uh need to explicitly remove or hide the loader in this case and what we can do now whenever we can check if the show loading is true so if show loading is true then in this case we can have a center widget with the circular progress indicator and if it is false then we can check the current state and rest all the things will be same now let's complete the rest of the functionality uh we have actually done the code for for the code sent and we have updated the ui and we have also saved the verification id because this verification id will be useful for for getting the reference over getting the object of phone authentication credential because using this uh object you can directly sign in uh the user to the uh to the firebase so in case of verification completed which is done by android device automatically you receive this phone or credential and then you can you just need to call another future and you need to pass this uh this object and then it will take you it will actually sign in uh the user uh and in case of uh this code sent we need to explicitly get this uh object and you can get this object using the verification id and also the code that is provided by the user so let's create uh let's get this instance first and then we can use in both of the cases we can just have a future for signing in using phone auth credential and we can use in both of the cases so first of all let's create this phone authentication credential so obviously we are going to create it inside the flat button of get otp form widget because uh we will get the otp code once user press on this button so let's make it async because we have to have the await keyword inside it and to obtain the phone auth credential we have we have phone auth provider and inside it we have create sorry we have just credential and here we have to pass the verification id and here we have to pass the otp code that user has given so with this you can you can create the phone auth credential and then we can use uh this phone or credential to sign in to the application so uh what i'm gonna do i'm gonna call a future or or a function that is not currently present but we will surely make it sign in with phone or credential so we will use this uh object to sign into the to the firebase because so we are getting the same object in in case of verification completed which is also done by android so this future this function will be useful in that case also and this should accept the phone auth credential object so let's create this function okay let's take it at the top and this function will be will be called in case of verification autocompleted also however uh i'm just commenting this thing because if we make this thing active then it will enable it will verify the mobile automatically and we don't have to hope we don't have to update the ui and we don't have to explicitly give the code so firstly we want to check we want to verify the functionality of this thing so that is why we need to make this comment so that we can completely first test this and make sure that this is working and then we can just recommend it and we can move to the next thing so let's uh first of all let's make this asynchronous because we are going to use a weight keyword inside it and then or what we can do we can use the alt reference and inside it we have sign in with credential okay so we are going to call this sorry sign in with credential and you can see it's a future that returns the auth credential so i'm gonna have a final auth credential equals to await because this is a future credential okay and inside it we can pass the phone auth credential that's great and what we can do we can also wrap this thing inside try and catch and this will be firebase auth exception if you get any and in case we get some exception we can simply uh but what we can do first of all before running this uh function because calling this uh sign in with credential because this is a long task we need to have uh loading visible so let's make it true and if we get exception let's make it false also we can show the exception on the scaffold so i mean on the snack bar so we can call show snack bar with the snack bar we can have a text widget and inside it we can just simply e dot message let's format the code and this is great and now if uh the flow goes this way i mean there's no exception so we need to after this we need to call set state again and we need to show make sure loading false because this is the correct flow and we didn't get get any exception and we have uh uh we have make the loader visible so we have to make it hidden also and now we have to check if the odd credential contains the user credential or or the user object actually so if this is not null it means it contains the user object and the login has successfully completed then we need to take user to the uh to the home screen and let's make it material page root and here we need to have the contacts and then we can call the home screen that's great so this is great and we can minimize this and there's some error saying okay so we have passed the otp controller we have to pass the text instead inside okay so you can see we have obtained the phone auth credential and we have called the phone auth credential sign in with phone or credential that's great this will be the flow in case of user explicitly give the code and once we receive the code we have false if i did the show loading we have update the ui and we have saved the verification id that's great in case of error we have just snag bar and that that's all looks good and okay so let's do something in the in the home screen also and what i'm gonna do i'm gonna add the sign out functionality also so inside the scaffold i'm gonna have a floating action button and floating action button and in the on press what i'm gonna do i will show you later and in the in the child we can just have a icon and icons dot sign out i think or maybe log out yeah and for signing out we first need to obtain the firebase auth instance like we get in the in case of uh in case of login screen so this is five is auth instance dot instance okay and what we have to do we have to call async and we simply need to call the auth dot sign out you can see it's a future so we need to add the weight and once it is successfully signed out we we can navigate user back to the previous screen which is the login screen or we can also do push replacement nothing that will be more good material page root context login screen um that looks all great okay so let's run the application because i haven't run it uh once on the on the device because uh this uh should be tested on the real device so what i'm gonna do instead of uh running this application on emulator i'm gonna test it on the real device i've connected with the uh with the cable with the usb cable and i'm gonna open the console also to see if it gives any error and i will uh it it will be really awesome if we don't get the error in first go because i'm expecting a lot of errors because since we haven't tested the app once so what i'm gonna do i'm simply uh just give me a time i'm actually connecting uh to visor okay so it will take some time okay so you can see it's uh showing the app and i'm gonna run the application on my device you can see i've connected i've selected my device and let's uh click on this play button this will take some time okay so don't worry it's just a warning so the app is being installed and you can see the application that's successfully installed and if i open the application so this should show the login screen and the log and the mobile phone form because the current estate is the mobile phone form and if i if i give my number four one so here's my number if i click on the send button this should show the loading also this will uh this should show a send the otp on my mobile so you can see it's showing the loading and okay so you can see i have received the otp also and i have copied it and let's paste it on this form let's click on the verify and you can see we have successfully uh on the home screen and if i go and check if that really happened i mean the user has really uh come came into the app so what i can do i can go under the authentication and you can see there is the entry against my phone number so it means really the user has come to the app and he has uh successfully authenticated and what what will happen if i click on this logout button so this should take me to back to the login form and if i open reopen the app because so we haven't really checked if the user is already logged in or not so this should show the same login screen however this should show uh in case it's already no i think we have log out so if i again log in to the app okay that's great okay this is the home screen if i close the app and if i reopen it so basically this should this should take me to the home screen however let's run the app however this is this is taking us to the login screen because uh we haven't really checked if the user is already logged in or not so what we can do uh we have to write a small code so what we can do we can have another widget which i am calling initializer which will decide which screen to go initializer widget maybe and initializer okay that's great and what i'm gonna do by default i'm gonna i'm gonna show a loading at the center and inside the image state what i can do first i can get the reference of this auth where we fire this all dot instance and i can also have a firebase user which is just user so this is the user that is currently logged in in a system so you can get the firebase user equals to auth dot current user and what we can do if it is and we can also make another bull is a loading which is by default will be true and we can make is loading false at the last so if it is is loading true then we can show the scaffold with the loader however if there's no loading we need to check if user is null so if user is null then we will show uh the login screen however if it is not null we will show the home screen um that's great let's test this okay and rather than showing the login screen by default we will have the initializer widget okay let's uh run the app again because you know we have already logged in so this should take us to the by default this should take us to the home screen so you can see we have navigated to the home screen if i close the app and reopen it again to make sure that it's uh working so i have closed the app and let it open first and we have to verify if it is taking us to the home screen and you can see it's taking us to the home screen if i if i click on this sign out and if i close the app and reopen it this should now take us to the login screen instead of home screen so wow it's working so this is it from this video in this video we have actually uh integrated firebase authentication mobile authentication specifically in the flutter application and we have we have seen that how to enable the mobile verification uh which is uh the new addition in the configuration uh to actually ensure that the device is really uh the same device that's uh registered on the firebase auth so uh we have to enable the fi the safety net and we have to also add the dependency in case of recaptcha so this these are the few a new stuff and also uh the last video as i said contains the deprecated stuff so this would really help uh you and because this is the latest video so i hope you like it if you like please give a big thumbs up and if you haven't subscribed the channel please subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 38,362

Keywords: flutter, firebase, authentication, firebase authentication, firebase authentication in flutter, firebase authentication flutter, firebase auth mobile, mobile phone verification, mobile, phone, sms, otp, verification, firebase authentication with flutter, flutter and firebaee, flutter and firebase, easy approach, flutter video tutorial, firebase and flutter video tutorial, tutorial, video, how to integrate firebase, integrate firebase auth, firebase auth integration with flutter

Id: W19IfZ-nqB8

Length: 61min 46sec (3706 seconds)

Published: Thu Apr 01 2021