#35 || Flutter Face ID/ Fingerprint/ Touch ID Local Authentication with GetX

[Music] hi my name is amar in this video i will discuss how to perform face authentication and fingerprint authentication in flutter using the local auth package and by using gatex here i have created the project flutter gatex fingerprint phase authentication by using the gate cli tool after that in the pubis ml file i have taken this local auth dependency okay now after taking this dependency in the project we need to do some configuration what configuration we need to do for ios in the info.plist file we need to add this line okay if i go to the project if i expand ios runner then you can see info.plist file is there in this file we need to add these two lines okay and in case of android what we need to do we need to modify the mainactivity.java file like this or the mainactivity.ktfi like this if i expand this android app src main kotlin package then you can see main activity dot kt file is there and the main activity dot kt file should be modified like this and if it is mainactivity.java then mainactivity.java should be modified like this okay after that in the androidmanifest.xml file we need to add the permission and the permission should be added like this okay now after making all these changes we can use the functionalities which is provided by the local auth package okay now let me move to the home controller file where i have already written the code let me make you understand here what i have done first of all i have created the object of the local authentication class which is provided by the local auth package after that here i have created three variables has fingerprint lock has face lock is user authenticated okay the initial value of all these variables are false and all these variables are reactive because here i have used dot obs okay after that here i have created a function get all biometrics and here i have used the async modifier okay in this function first of all i have written await local auth dot can check biometrics what this function is doing this function is checking whether the local authentication is supported in the device or not if the local authentication is supported then this variable will contain the value as true otherwise it will contain the value as false now if this variable is true then here inside the if what i have done i have created a list of type biometric type okay and here i have written await local auth dot get available biometrics what this function will do it will retrieve all the biometrics available on the device and it will be stored inside this variable okay after that here i have written has face lock dot value equals to available biometrics dot contains biometric type dot face after that i am checking whether the phase biometric is available or not if it is available then this variable will contain the value as true otherwise false similarly here i have written has fingerprint lock dot value equals to available biometrics dot contain biometric type dot fingerprint i am checking whether the fingerprint biometric is available or not if it is available this variable will contain the value as true otherwise false but suppose if the local authentication is not available on the device then obviously this if block will not execute this else portion will execute where i am calling the so snag bar method having the title as error message as local authentication not available and in the background color i have passed colors dot red now this so snack bar method i have created here you can see here i have created some named parameters and inside this function i am calling git dot snag bar where i am passing the title message color text as colors dot white background color as the color which i am passing here and in the snack position i have specified snack position dot bottom okay now in the on init method what i have done i have called the get all biometrics the function which i have created here okay now let me move to the home view part in the home view part you can see here it is extending gate view which is taking the controller type okay after that in the build method i have used the scaffold in the app bar i have given the text as local authentication after that in the body i have taken a column widget now in the column widget first of all i have taken a container okay in the container as a child i have taken a text widget having the text as biometric okay you can see in the output this biometric text is available after that there is a size box after that i have taken a container in the container i have taken a row widget in the row widget i have used obx widget in the obs widget i have written controller dot has fingerprint lock dot value this means if the device contains the fingerprint biometric then obviously the value of this variable will be true if it is true then we will get a check icon having the color as green and if it is not available then we will get a clear icon having the color as red and after that we will get the text as fingerprint authentication that's why here you can see since in my device fingerprint authentication is available we are getting this green check okay after that there is a size box again i have taken a container inside this container now i am checking controller dot has face lock dot value if the device supports the face authentication then obviously this has phase lock will be true and if it is true then we will get a green check icon otherwise we will get a clear icon having the color as red okay and after that the face authentication message is there now in my device both the biometrics are available that's why we are getting a green check if it is not available then we will get a clear icon having the color is red okay after that you can see i have taken a elevated button having the text as authenticate now whenever i will click on this button at that time i am calling the authenticate user method which is has been created inside the controller okay now let me move to the controller in the controller you can see this authenticate user method is there okay now in this authenticate user method here you can see i have written easy user authenticated dot value you if you remember i have created this easy user authenticated variable here okay here i have written dot value equals to await local author dot authenticate this authenticate method is provided by the local authentication class now here some parameters are passed localized region in the localized region i have written authenticate yourself after that biometrics only is true use error dialects the value of use error dialects is true now what is the meaning of this suppose that fingerprint authentication and the face authentication is available on the device but it is not set okay at that time if the value of use error dialog is true then a dialog box will come from where we can go to the settings where we can set the fingerprint authentication and the face authentication but if the value of use error dialog is false then exception will be generated that exception we need to handle in the cache block you can see here i have enclosed this code inside the try block okay now if any exception occurs then we need to handle inside the cache block right so if the value of use error dialog is true then if the local authentication means the face authentication or the fingerprint authentication is not set then automatically the dialog box will come from that dialog we can go to the settings where we can set our fingerprint or face authentication okay now the dialog which is coming what will be the captions of the button there in the dialog box that captions we can set here okay and that message i am passing here android auth string this okay now what is the meaning of sticky auth true that i will discuss later on right now here i am checking if he is user authenticated dot value this means if the value is true this means if the user is authenticated then i am calling the so snack bar method where i'm where i am passing the title as success message as you are authenticated okay and the background color i am passing colors dot green similarly if the user is not authenticated then obviously here i am calling the source network method where i am passing the title as error message as authentication cancelled and in the background color i am passing colors dot red and if any exception occurs then i am calling the so snack bar method having the title as error in the message i am passing the e.t string means whatever exception we are getting that will be appeared in the snag bar as a message and in the background color i am passing colors dot red okay now here let me show you the output in my device the fingerprint authentication is set if i click here then you can see this authentication is coming okay if i cancel it then you can see this snack bar is coming authentication cancelled if i click here again now if i authenticate this then you can see we are getting a message success you are authenticated okay now let me explain what is the meaning of this sticky auth let me click here okay now if i if the app goes to the background means if the pause method is called okay now if the app is again resume then you can see that dialog is again coming okay but if it is false if it is false you save this okay now if i go to the output now if i click here now if the app is paused now if i again the app is resumed then you can see the dialog is not coming okay that is the difference of sticky auth true and false let me make it true and this localized reason in the localized region i have given the message as authenticate yourself then you can see this message is coming here authenticate yourself okay whatever value you will provide in the localized reason that you will that you will get here okay now let me configure the face authentication then i will show you how the face authentication is working okay just wait for a while okay now i have configured the face authentication now if i click here then you can see it is asking for the face authentication now if i am providing my face then it is displaying confirm this means we are authenticated okay now let me click once again here but if the face authentication is wrong then we will get a error my face is identified confirm you are authenticated okay but if the face is not identified then we will get a error authentication error we will get okay this is how the face authentication and fingerprint authentication is performed in flutter using gatex and local auth package and this is the entire code okay this is the code for the home controller and this is the code for home view okay i hope you have liked my video if you have liked my video please subscribe to my channel thank you so much for watching you

Channel: Ripples Code

Views: 8,374

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, flutter local authentication getx, flutter faceid authentication getx, flutter fingerprint authentication getx, flutter touch id authentication getx, flutter local auth package with getx

Id: D5Xs7cv33lA

Length: 12min 54sec (774 seconds)

Published: Mon Mar 15 2021