Flutter Local Authentication Tutorial - Flutter Face ID & Fingerprint Authentication Guide

in this video I'll show you guys how to implement local authentication within ref flutter application this process is going to work for both IOS and Android and I'll show you how to not only Implement biometric authentication which includes fingerprint scanning as well as face ID but also password based authentication which includes the user's passcode or pattern that they've set on their device to learn about local authentication we're going to be building a very simple application that is going to basically when it opens up not display the user's bank balance to them but upon clicking on this Floating Action button it's going to present them with a dialogue through which they can either provide their biometric information by using a fingerprint which I'll show you or the pattern that they've actually used on their device and once the authentication was successful they'll be shown their actual balance and then we can click on this button again to log the actual information once more and have the user reauthenticate themselves using let's just say this time a patron and this is going to work the same on iOS as well the only thing that's going to differ is whether you're using fingerprint authentication or face ID depending upon the actual capabilities of your device so to get started what we're going to be doing is actually using a package that's available to us on pub. called local off and this package is going to provide us with all of the functionality we need to actually integrate local authentication capabilities within our application so let's copy this actual dependency and as a side not links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point and as always smash the like button and subscribe to my channel so that you get notified every time I release a new video so coming back to the code let's come back to our pope.l file under the dependency section I am going to paste this in and then do command save while this is going on the next thing that we're going to be doing is actually setting up our application properly for both Android and iOS so that this package is going to work as intended so to do that you can either follow along with the video that I'm going to be showing you or you can come down to a specific part within the documentation for this package that's on pub. and that's going to be for iOS integration so let's do iOS integration first because it's a little easier and then we can go to Android so for iOS all we need to do is come to our iOS folder then Runner and open up our info. pist file and then here within the dictionary that defines all of the permissions that our application is going to access I am going to paste this key string pair that we see here which is basically going to let the actual Apple device know that we're running our application on that hey this application is going to request face ID usage from from the actual device and that's pretty much all we have to do so with this done just make sure that you do command save and save the changes and then that's pretty much it and that's all of the setup we had to do for iOS coming to the Android side of things it's going to be a little bit more involved but it's going to be very simple as well all we have to do is come to Android app Source Main and then we need to come to the point where it says cotlin and open up the main activity. KT and here we're going to do the following the first thing that we're going to be doing is that we are going to import a different fragment activity instead of the one that we're using right now so as you can see that our application is using flutter activity we are going to be importing flutter fragment activity and making sure that our main activity extends that and that's all we had to do so the code again is available here on the pub. dev page for local a and this is the section that I'm referring to once this is done the last thing that we have to do is basically tell the Android app similar to what we done for iOS that heyy we're going to be using the biometric capabilities that are available on the device so for that what we have to do is basically come back to our Android folder open up app then come to Source then Main and within main we are going to have this Android manifest.xml file here after the Manifest tag but before the application tag I am going to paste in the following use permission clause which basically defines that hey our application is going to use biometric capabilities and that's all we had to do so with this done the last thing that I'd like to let you know that if for some reason you'd like to test whether the device has fingerprint capabilities on it then you'll have to Target API 29 or higher the thing that we're going to be doing is basically allowing the user to use whatever biometric authentication that's available on the device so if it's face ID it'll use that if it's fingerprint it'll do that otherwise it'll divert to using the users pattern or password or whatever thing they've said so once this is done I can actually close down the actual Brower browser window and let's give our application a test run by coming to the main. dart file and then just running it and hopefully our application is going to spin up on the simulator build successfully and then I will resume the actual video Welcome Back everybody so as you can see the application is now running on my simulator so we can go ahead with building the actual UI and then from there we'll move onwards to implementing the authentication so to implement the UI it's going to be very simple I've just created a stateful widget which for now has a build function that returns a scaffold and then on the main. dfall set the material apps home property to homepage and that's pretty much all there is everything else will build from scratch on the actual scaffold I'm going to set the body property to a call to a function called build UI and then my build UI function is basically going to handle all of the logic for building the UI and it's going to be very simple my function is going to return a widget and it's going to callcore build UI and then within this I am going to firstly return a sized box then this sized box is going to have a fixed width and this width will be the actual width of our device like so and then the child within this actual size box is going to be a column like so and then the column is going to have a children's list which for now is going to be empty with this done as you can see everything looks good so the next thing that I'm going to be doing is just adding some children to the column the first child that I'm going to be adding is going to be a text widget that basically shows us our account balance like so so you can see there it is and then to fix up the actual alignment I'll come back to my column and add the appropriate alignment properties once this is done the next thing that I'm going to be doing is copying this actual text pasting it two more times and what I'm going to be doing for the second text widget is basically adding in the following string which is just some random arbitrary bank balance that I've created like so and then for the last one it's just going to be the following star signs like so as you can see so now what I'm going to be doing is basically going ahead and creating a variable or a property on my homepage state which is going to keep track of whether the user has authenticated themselves or not so I'm going to do boore is authenticated and then I'm going to set this equal to false then I'll take this is authenticated and I'm going to do the following I'll say that if the user is authenticated then we only add the following widget within our columns children list and then I'm going to do the following for the last text as well I'm going to say if the user isn't authenticated so if is authenticated is false I can do that by adding an exclamation mark before the actual Boolean value then we will just show this text so now if I go ahead and I set is authenticated to true and restart my app you can see that we see the balance if we set this to false then we don't see the balance so now with this done we can actually work on the implementation Logic for the button that is going to trigger our local Au mechanism so to do that we are going to be doing the following firstly I'll come to my scaffold and on that I'm going to set the floating action button property and then I'm going to set that to a call to a function which is going to be OD button then what I'm going to do is basically create this function and I'm going to say that this function is going to return a widget and it's going to be called underscore o button and then within this I'm going to say that we're going to return a floating action button then for the onpressed callback for now I'm going to do the following which is to just say that onpress is going to be an empty function called call back and then I'm also going to set the child for this icon so the child is going to be an icon widget and the icon for this is going to depend on whether we are authenticated successfully or not so if we are authenticated and I'm using a tary statement here then we're going to use the icons do lock icon and otherwise if this is not the case then we're going to use icons. loock open like so and do command save so now the button is being shown to us and as you can see it's showing me an unlock icon so this is basically letting me know that if I click on it it'll unlock the app and then once we authenticate it'll show a log button here and then we'll switch between actually using this button to change the status of whether we should authenticate our souls or not so now with this done to quickly see if this button's working I'll say set state within this and I'm going to say that is authenticated is going to be the opposite of is authenticated like so and that's all we had to do so let's do command save and now if I click on this button the balance is revealed to us click on it again the balance is not revealed to us so everything's looking good so we can actually move forwards so now we're ready with actually implementing the authentication capabilities so to do that I'm going to be doing the following the first thing that I'm going to be doing is determining whether the user has already authenticated themselves or not if they have already authenticated themselves that means that they click on this button and now we need to close down the app lock it down so that they can't see their balance anymore so I'm going to do if underscore is authenticated then we'll do something otherwise we'll do the following so otherwise I'm just going to call set State once more and I'm going to say that now is authenticated is going to be set to false and now we can come to the point where it's saying is authenticated so here I'm going to do the following if the user is not authenticated then we run some Logic for actually performing the authentication otherwise we just set is authenticated to false so that we close down our actual app so the first thing that we're going to be doing to kick off our local authentication logic is to actually check whether our device supports biometric authentication or not some devices that your application might be running on might not have the ability to have fingerprint or face ID based authentication on them so in that case you can fail the actual process and let the user know that hey this device doesn't support fingerprint based authentication or you can fall back to just using a password or something like that but to check if your device does support this kind of authentication you can do the following you can do final and then we're going to have a Boolean value and I'm going to to say that this is going to be called can authenticated with Biometrics and I'm going to set this equal to await and this means that I need to mark my onpress function call back as async and then here I am going to say the following which is O and then I'm going to do dot can check biometric but this brings us to the point where we have to now import the actual local L package so to do that I will come to the top of my homepage State and here I'm going to do the following I'll create a variable final I'm going to call call this local authentication I'm going to call this Au and I'm going to set that equal to local authentication like so and that's all we have to do and I'll mark this as actually underscore then we'll take this come back to our function I'm going to do underscore o and then we can do do can check Biometrics and this is basically going to let me know whether we have biometric capabilities available to us or not so biometric means both fingerprint and face idid so let's do print here and we can do can authenticate with Biometrics and let's do save and then let's click on this button and you can see that it says true so this means that this device has some kind of functionality on it that allows us to either use fingerprint or face ID just as a side note to actually test these capabilities on a physical device you'll need to ensure that you set up either fingerprint based authentication or face ID whether you're using Android or iOS but for the purposes of this tutorial since we're using a simulator this is the process for actually registering a fingerprint on Android so to register a fingerprint what you can do is on any Android simulator I'm using pixel 7 specifically come and open up the settings and then go to the settings section here what you're going to be doing is then scrolling down all of these details and coming to the point where it says security and privacy within security and privacy the first thing that you'll have to do is come to device unlock and set up a screen lock which is either going to be a password or pin or a patron and once you've set up a password or pin or a patron then you're going to come to the face and fingerprint unlock Section and here you're going to do the following you'll firstly enter the pattern that you've created in the previous step and then you can come to either setting up face unlock which doesn't work on a simulator but it will work on a physical device and then I'll show you how to set up face unlock on iOS as well and then what you can do is also use pixel imprint to add fingerprints so for fingerprints I'll click here and then I'll delete the existing fingerprint that I have then what I'll do is basically click on add a fingerprint and then we have to do the following we'll click on this site section that you see on our Android simulator and click on these three dots this is going to open up the settings for our simulator we'll come to the point where it says fingerprint and then here you're going to select a fingerprint I'm going to select fingerprint one and then I'm going to click touch sensor and this is going to simulate on the device somebody touching the actual fingerprint scanner then touch sensor again and there we go the fingerprint has been added so now with this done just keep this setting section open it will come back and now we can come back to our application because now we've set up fingerprint authentication on our device so now what I need to do is once I've ensured that we can check with biometric I can do the following which is if can authenticate with biometric then we'll do the following otherwise we don't do anything and here I'm going to do the following I'll actually call the function which is going to allow us to show the pop-up to the user to authenticate themselves so it's going to be as follows I'll do final Bo and then I'm going to do did authenticate and this is going to be a variable that will store the result of our authentication process so whether the authentication was successful or not and then I'm going to do a wait o dot and then I can do authenticate there we go and then that's pretty much all we have to do and then we have to provide a reason for why we need authentication so here I'm going to say the following which is that please authenticate so that we can show you your bank balance there we go like so once this is done there are a bunch of different properties that you can give to to this actual authenticate function to determine what the functionality for this is going to be and you can specify them by using the options property and this options property is going to take in an object of type authentication options and here we can set a lot of things but for example by specifying biometric only to true I can let the actual authenticated function know that hey the only legal ways through which the user can authenticate themselves are going to be biometric based authentication which is fingerprint and face ID so by setting this to true we're locking down the actual ways through which the user can authenticate themselves but if we set biometric only to fals then the user can use password based pin based pattern based in addition to biometric based authentication so let's start with biometric only to true and that's all we have to do and then once this actual process completes then I'm going to do the following which is to do set State and then here I'm going to do is authenticated is equals to the actual result from the function which was stored within did authenticate so now that this is done the last thing that I'm going to be doing is basically wrapping this whole function block within an actual Tri catch block so that we can catch any exceptions that occur and not make our actual device craft so I'm going to do catch e like so and then I'm going to do print e there we go and that's pretty much all we had to do so we had try and then I'm going to basically fix up the actual indentations basically add the remaining semicolon and there we go so now within our TR catch block we have the actual call to our function to authenticate ourselves so now we can test it out because we do have a fingerprint set up on our device which means we do support some kind of biometric based authentication so let's click on this button and there we go it's showing me that hey authentication is required and then let me show you something if for some reason I select a finger that's different to the actual finger that I registered for a authorized fingerprint so let's do finger two and touch the sensor you can see that it tells me it's not recognized and it's not showing me the balance anymore and the apps locked but if I use finger one which is the one that I had registered on this device but if you're testing it on a physical device you use your own finger which hopefully is the finger you use to unlock your device and you click touch sensor there we go and our apps unlocked so that's pretty much all there is to implementing local authentication so now what I'm going to be showing you is that if I come to the a authenticate function to the Biometrics only property and set this to fals then this means that we allow both biometric authentication as well as any other authentication options that might be available on the device such as pin or pattern so if I click here you can see that now I have an additional option that hey if you can't use your fingerprint or any biometric then you can just use the pattern or the password or the pin that you had used so I'm going to do the patn and this way the same information will be unlocked for us as well so you can see that it's working as intended and everything seems to be working the way it's supposed to so the last thing that I'm going to be doing is just making sure that my actual if statement here for if authenticated is as follows so I need to actually add the else Clause here and remove it from here like so and then paste it here so now the logic will work as intended so what we're basically doing now is that if the user isn't authenticated we call all of the logic for actually showcasing to them the authentication dialog and then authenticating them otherwise we just set the is authenticated to false so that we can lock our device back back down and then show this to the user again so now that everything on the Android side of things is working and this process is now going to work when you register a face ID as well then it show you the face ID prompt I'm going to quickly take you to the iOS side of things and show you how you can work with the actual local Lo package on iOS as well so I'm going to pause the video open up an actual iOS simulator and then I'll resume the video Welcome Back everybody so as you can see the application is now running on my iOS simulator and for the actual simulator that I'm using it's iPhone 15 Pro Max so this device only supports face ID based authentication it doesn't have a fingerprint authentication system on it so to test face ID what you can do is actually come to the top and then here you have the features button where you have face ID and then you can click on enrolled and this is basically going to let the emulator know that hey you have the actual capabilities for face ID and now that this is done you can actually click on matching face or noning face to actually trigger what happens when the actual face ID dialogue is shown to us so if I come back we haven't changed the code a bit but if I click on this button you're going to see that it's asking me do you want to allow the app to use face ID will do allow so once you see this dialogue it's basically going to be the same process on either a physical or a simulator device on a simulator you'll just have to click some buttons on a physical device you'll have to show your face which should come to Features face ID and click on matching face and there we go with this this means that the face ID match was successful and it unlocks it I can close it down and now I can come back and click on it again show face ID and I can come to face ID and set non-matching face and this time it's going to let me know that face was not recognized so I can either try again or I can cancel and the balance is not being shown to me so with that that's pretty much it for today's tutorial I hope that you learned a thing or two about how to implement local authentication within your flutter application and integrate fingerprint recognition as well as face ID capabilities within your application as always don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 3,071

Keywords: flutter local auth, flutter, flutter authentication, flutter fingerprint authentication, flutter fingerprint auth, flutter fingerprint login, flutter fingerprint scanner, flutter face recognition, flutter face id login, flutter face id authentication, flutter biometric authentication, flutter biometric authentication example, flutter local auth fingerprint, flutter local auth face id, local auth flutter, local authentication, local authentication flutter, flutter pattern lock

Id: cYeQCGr6F7c

Length: 20min 3sec (1203 seconds)

Published: Wed May 08 2024