How to Implement Face ID and Fingerprint Authentication in Flutter

hello everyone how's it going welcome back to the channel in today's tutorial I'll be showing you how to implement the biometric authentication in your flatter app for Face ID and fingerprint recognition this is a great way to add an extra layer of security and convenience for your users and it's actually easier than you might think so stick around and let's get started so if you actually find this to be helpful and interesting consider subscribing like and share the video as well so with I said let's jump writing so in my me that's far I've created an ALT screen that's a stateful withit with a scold right so let's install this local alt dependency that help us with the biometric authentication so I'll pop up my ter over here and install that so flat up at local so once you have a successful installation when check the ppml file you can see the local Al is being added to the dependency right um so let's proceed with the configuration on on IOS and Android right so with the iOS we need to add this to the info the pist file the key and the string so I'll just grab that over here so within the is folder the runner folder you can see the info the P list so you paste it in the DAT file so I'll changing the string over here so basically this app uses face ID to provide a secure [Music] authentication so you can see in the changes over here so that's basically the setup for the iOS so with the Android um we need to find the file name as the main activity do Java or main activity. K any of them and replace it with this code right and also add the permission to use our biometric so in our Android folder um the app folder the source the main folder um the cink folder comes with the main activity. KT right so in here we need to modify this code so it's going to be flatter fragment activity right flatter fragment activity so I'll just grabb that over here with the import as well and replace it with the default one so basically the main activity is going to be flatter fragment activity so once you have that you need to save in the changes and so the next step is to add the permission to use our biometric right so I just grab this permission over here and also within the Android manifest file you can paste it over here so let's actually get rid of the Manifest over there there you go so let's save any changes over here so we've done with the iOS and Andress setup So within my old screen I'll start by creating an instance of the local authentication right so final local authentication then the variable name is going to be O then we initialize that so this is the way we create an instance of the local authentication so top we be creating an enom right of the support state so basically it's going to be an neration so enum support state so basically this will check for whether the device is supported or not right so can pass in the unknown supported and also unsupported so I'll create a variable of support states which is going to be of type the enom of support state right so support state then the variable name is going to be support state so initially you're going to assign it suppos the dot unkknown there you go so below over here I'll create um a variable of available biometric types right this variable is going to hold the available biometric types whether um fingerprint or face ID or both right so it comes as a list so list of biometric type the variable name is going to be available biometric types sorry available Biometrics right um so below here is going to be an init state right so in our in state we're going to call an alt instant dot is device support So this check whether the device is supported right with the results right and the result comes as a Boolean so it's supported so we can just say itate and assign the supported value to the variable we've created over there right so set state then we can just call our variable support state and assign the value of our is supported right so and if this is true we actually going to return the supported do supported else you're going to return the supported do unsupported so basically the is device supported method checks whether the device Dev Hardware support any form of local authentication such as fingerprint or facial recognition then we get a results back as a Boolean right and the say State update the support state variable so that's basically it so below that I'm going to create a function and this function is going to check for biometric right so it's going to be an asynchronous function since it's a future the type is a future so in here I'll create a variable of retain type bu can check biometric so it's going to be a late variable um within that we going to have try let's handle the exception and it's going to be on platform exception platform reception catch then we handle the eror over there um so in our Tri block we can assign our variable can check by Metric we are wait and call a alt instance which has the method can check by Metric on it right so we can assign that value to it and we can just print um biometric supported right so we can just print that variable to actually know if our device support the biometric so that's basically it and within our exception you can just print um the arrow and we can set that to false as well so that's basically it um below that is also going to be another function and this function is basically going to get is the available um biometric types right so it actually comes as a list so the fun name is going to get available by Metric so in that we doing something similar creating a variable and the return type of that variable is going to be a list of biometric type you can have a particular divice that supports both um face ID and also fingerprint as well so you can just get that list so we'll be having a try also a catch block and the exception is going to be on a platform exception so you can catch that over there so in our Tri block we can just assign a variable biometric types so with the alt instance we can have the method get available Biometrics right that get is the available Biometrics and below that we can just print our biometric types as well so you can see it's on the console so on platform exception we can actually print the aror over here so once we have that we check if not mounted we can actually return that then we can set itate and assign our available Biometrics the value of our biometric types remember I've already created available biometric variable at the top so this function basically gets us the the available Biometrics and so let's move on to the last function so this function basically going to authenticate um our biometric right so the function is going to be authenticate with Biometrics it's going to be an asynchronous function so in that as usual we going to have a try catch block right so it's going to be on platform exception so in our Tri block we'll be creating a variable authenticated right so the return return type of this is going to be a bullan right so we await and call our alt instance which as the method authenticate and we need to pass in the localized regon right so um it expected string so it's going to be authenticate with fingerprint or face ID there you go we can actually provide an additional information to this um authenticate method right so we can pass in options and the options comes with um authentication options you can pass in um the sticky all can set that to true and also can just pass a biometric only to be true so that's basically it um so below that we can check if mounted if not mounted we can actually return and if everything is okay and mounted you can check the authenticated State variable right so if you authenticated let's actually navigate to a different page so with a navigator um material page route you can use Navigator push that takes in the context and also the material page route and the material page route takes in the Builder and the Builder intent takes in the function and returns a wiget right so in I return the home which is not created so on platform reception we can actually print the arrow and also return as well so let's proceed to create a file within our Li folder so I'm going to name this file as the home do do and create a state for wiget over here and name it as home and return um scal fold so we need to import material of that so with the within the scaold it's going to be an ad bar with a title of home so let's get rid of the conses over there so the body of this um scaffold is going to be a center wiget but the test as as it ch right so the test is going to be Authentication successful so you only going to have access to this page if you are being authenticated with um the face IDE or fingerprint right so in our old screen we can actually import our home over here there you go um so that's basically it um so let's actually call this function in our any state so we can call we can check for biometric and also get um available Biometrics as well so let's start working within the scaffold in authentication screen so let's start with an up bar and provide some title to it right so the title is basically going to be a test wiet um the test is going to be biometric Authentication um so the body of this C is going to be a center regit with the column as it child right and the column T in the children so actually let's set this main as this alignment of this column to be main as this alignment of Center this will align it at the center and the first chart of this column is going to be a test widget right and this test widget is going to display whether um the device is supported or not so we are going to base on the support state variable right we check if the support state variable is equal to um support state do supported right we're going to return a string with a test of um biometric authentication is supported on this device we proceed to check again if else if our support state variable is equal to support state do um unsupported right let's display a different message actually it's going to be the same biometric authentication is not supported on this device so the default state is going to be checking for biometric support so that's basically what we be displaying within this test test we are going to Bas on our support state and check whether our device is supported and or not supported and display accordingly so let's provide some style to this test right so with the test how we can just assign it a color right so let's do some fancy stuff over here the color is going to base on so let's provide a font we to be B and come to the color so with the color it's also going to base on our support States right we want to render different colors based on our support state so if our support state is equal to um support state do supported the color is going to be green so do green else if I supposed it thisal to supported do unsupported I'm going to have a color of red so the default case is going to be a gray color so colors. Gray there you go so below the test is going to be a s box with a height of 20 just to give it enough space So Below the SI BX is going to be a test wiget right so this test widget is going to display the available um biometric type right so the test is going to display um supported Biometrics right so in here we assign it um our available Biometrics right so this basically going to display um our biometric types and we we also need to provide some spacing as well so below that we are going to have a role with the children right so in our children the first let's say the m as this alignment of the row to be main as this alignment do Center to align its children and the first chart of this row is going to be an image right the image is going to be from my assets folder and the name of the image is going to be face id.png so basically we are going to align an image and a button in the row or horizontal format so let me actually run the app there you go you can see our biometric authentication is supported on this device and the supported biometric is um the facial recognition only so I just provided an image so let's reduce this image by providing it a width and height value of four and setting the fit to be boss fit. cover right so next to this image is going to be um an elevated button so that comes with an on press so we going to provide it authenticate with Biometrics once the button is clicked and the chart of this button is going to be a test widget so the chart of this button is going to be a test wiet displaying the test of authenticate with face ID right so you can actually render a different test based on the available biometric types over here right so let's provide some spacing over here as well so this will be name to the with so I think that's basically let's give it a try so first of all you need to check the features and make sure that this is enrolled so none can see face not recognized so let's give it one more try and choose matching face and there we go we've been navigated to um so let's try with the Android you can see biometric authentication is not supported on this device so let's fix that so you need to go to the settings on your Android check for security and privacy choose device unlock right and choose face and fingerprint unlock so you can go with the pin one so first of all you need to create a PIN to um have access to create a face or fingerprint right so we need to a pin so once you have the pin created you can proceed to um set up a fingerprint right so you can go with face idea as well so let's set up a fingerprint over here so you can choose the thread dot up there and choose the fingerprint on this session so you have finger one up to 10 so I'll choose finger two and tou my sensor to activate this so this simulates um the fingerprint fingerprint um setup so once we have that set up when we reload this you can see um there you go I biometric authentication is Now supported on this device and you can see the available types so you can proceed to authenticate so when hit on authentic you can see the bottom sheet requiring so touch s over here so first of all I'll go with the wrong one you can see not recognize so I'll choose the right one there you go and we have access to our homepage so that's basically it seeing our nextal until then stay tuned

Channel: CodeWithDarkwa

Views: 4,080

Keywords:

Id: LVsCNUTxrvo

Length: 21min 49sec (1309 seconds)

Published: Sun Dec 10 2023