Flutter : Enable Finger-Print authentication

hello my goodness friends on the internet how you are doing okay welcome to amazing another amazing tutorial today today's tutorial is going to be awesome and i'm going to do my best to to keep it short and i think i believe it's something you guys should walk we really love so today's topic we are going to be looking on how we can create a local authentication in our float application so the local authentication that i'm going to be focusing on is the fingerprint authentication so you also know about uh you use various apps they they ask you to turn on two-factor authentication or to secure your account uh apps like a fintech application uh app that stores your required uh uh important documents and just just apps that store sensitive data so they will require you to set a two-factor authentication either using a pin to assess your your your app or using a fingerprint depending on the type of device if it has fingerprint or not so in this tutorial i'm going to show you how to integrate fingerprint in your floater application all right so let's get started so currently as you can see i just have a simple application and uh this is the home page of the app and you can see the settings button that will take us to settings page and from this settings page we can uh toggle between okay let's say we toggle through so that means we have set uh we have selected secure account and then whenever we log in again it's going to show us to authenticate all right but for now it's not it's not working so if you can see if i refresh it nothing is actually happen that's because uh if you go to my uh this is the splash screen and if you go to my uh sorry now this one account page you see that i'm only just a setting state okay to the secured variable you just uh created above here so it's scared and then i'll just set state to just change the state of the app uh the switch so you can see it's not really working it's not doing anything so uh first thing first uh we need to add some few dependencies uh to actually depend on this application okay and also one thing sorry uh if you go to my splash screen you can see after three seconds i navigate once the splash screen shows after three seconds i might navigate to my app page which is actually uh the main page which is actually the home page of the application which is this side okay here you see the flat application app and when we click on this settings icon it opens that's a switch page so it is more like my main activity uh yeah my material app my material widget then i return splash screen and then from spray screen i return this one okay so that is just it nothing much going on here but before you start your project i want to uh make you want to make sure you have two dependencies because that's what we are going to be using the loader local auto dependency that will give us access to the fingerprint and also the shell preference as well that will help us to store the state of the uh the if the user have just maybe they have selected uh secure accounts so we just need to store that state okay so that we can read it later or whenever they open the application all right and one other thing again you go to your uh your android okay app source and you see your main then from main you will see your main active no no main activity your android manifest.smfi and you want to make sure you add this uh this permission which is our fingerprint permission uh because we need it since we are going to implement in our mumbai application all right so uh with that form for uh for now let's see what we are going to do now is to save this state whenever the user selects it then they go back let the states still be the way they selected it so to do that i'm going to be creating a new class and that is going to have more like a shared preference class that will help us to store the user's data like the odd state so i'll call this one db provider okay so don't worry now this app i'm not really going to use okay so this should be provider instead of db provider i'm not going to be using an estate management so this is just going to be a pure uh set state uh kind of app so you guys will just understand it and maybe hopefully you can uh translate it to uh whichever one that you understand better which is any state management package you understand better all right so i'm going to be creating a class and i'll call this one db provider like so okay let me increase this a little okay so inside this db provider i'm going to be creating an instance of shell preference remember already uh i've already added shared preference in my perspective tml file so we have no worries there then what i'm going to do now i'm just going to initialize the shell preference uh package uh the class sorry and once we do that you want to make sure you import it as well all right so once we have that class initialized we are going to create another method which is a meter to store save the odd state of the user okay so i'm just going to copy i'm just going to paste this here so which is our save out state and see what he's doing is actually taking a boolean value which is because this switch when you toggle between on and off that's why returns true or false so if he's in off state that means he's going to return true if he's in the truth uh onstage is going to return you know if he's in off state it's going to return false if he's in all states it's going to return true so we need to store those states and using the save alt state here so the next thing we are going to do is to create a method that is going to read that that odd state for us and then we can use it to check if the user have already selected this stuff if it's true or if it's false all right so this is the method i'm just going to remove this stuff because it's not needed and remove this stuff okay because it's not needed and now we can make this one to be uh we can add this stuff to get rid of that error and now you can see what is happening so we take first of all we create an instance of the preference which is this and then we check if the instance contains this key which is status so if it contains the key we just read the value so the value can be true or false and then we just return it but if it's false maybe if it does not contains this key we just return force by default so this toggle switch is going to be off by default okay so that's it and we don't really need to touch anything here so what i'm going to do now inside this account i'm going to set the state and also save it and then we can whenever we come to this page you will read the states that it is if it's saved or not all right so that that one will be quick and we don't really need to waste more time there now it's going to be more like a simple stuff so what i'm going to do first thing first is to uh i'm going to create a ver i'm going to read from it first okay i'm going to read uh from initstate i'm going to read from that db provider and get the the hot state and then set it initially set it to the switch so i will be calling a db provider okay member is the future so it returns at the boolean so if if db provider get all state dots okay then so i'm going to wait for it to complete and then we can retrieve the value from it so what i would do i'll just set state directly uh yep just set the states to that secured which is this secured uh equal to the value so whatever it is we just set it there okay and that is looking back to uh once we select that stuff so i'll be giving a dv provider dot uh save state yeah save all state and then i'll pass in the value yeah whatever the user passed in i'm gonna save it there and okay let's go back i've saved it and if we click here okay i'll go back there and click this so if we go back now to this page let's say we go back and come back again because you already selected it to be first it's going to be first here so if i you can see uh it's it's it's still is the first then if i click here now and let's say i go back you see uh it's now true okay so this is my like this one is helping us to save the data and this one is helping us to change it with time and then this one is helping us to read the data and then set the initial value okay whenever we come into this page so you can actually print it out to see the value that is printing and that would be cool so uh we are good to go from here because uh now you can see how to persist the state of a switch yeah so for safe force if you come back still the same thing yeah so if we sit through if you go back and come back it's still the center even if you do a hot restart of your app uh still going to take us to this page all right so the next thing we are going to do now is to check uh from the splash screen instead of navigating directly to the home page we need to check if the uh the user if the uh the odd state is true so if the all state is true we want to show them the fingerprint dialog but if the odd state is false then we just take them directly to the home page all right so if it's true that means already secured their account is secured but if it's first we just take them directly so how do we handle that first thing i'm going to do i'm just going to comment this stuff away okay let's see if it's still true okay it's the true so what first one thing i'm going to do now is to check if the value if is equal to force okay so that means okay sorry not value i'm supposed to read from the dv provider again to actually retrieve the current state of the art so i'll say got state dot then so if uh if the value is equal to force so what i'll do in this case is just to navigate the user directly to to the home page okay yeah straight up to the home page so i'll just remove the comments cut this and then i'll direct them to the home page but if not let's say if it's already true then we can just let me just paint uh show or state show authentication okay yeah so i'm just gonna show authentication here and then we can comment this stuff so let's see what will happen if i do a hot restart remember this stuff is already true so we should see this print statement rather than going directly to our home page so let's see what happens here welcome and after 30 seconds we have this show authentication so in this case now we can't really go into the home page because this stuff is set to false okay but if i set it now to true and see what will happen it will just take us to the home page directly okay let's see all right you can see now we're in the homepage and now this stuff is stiff but because i check for through here but if i toggle it and then do the number but let's keep it to the normal stage states that it's supposed to be so if it's false take us to this page if it's true i'll just show the authentication all right so once you are here now it's time for us to start integrating the fingerprint uh um logic okay still going back to my prospect of the ml5 i've already added this locator so you might be on the latest version uh it depends on when you're watching this video and then we have also added uh if you go to our main activity we have added permission for uh using fingerprint so you don't want to forget that so make sure you add it as well okay now we are going to go over to the first thing i'm going to do i'm going to create a provider also and this one is going to be a screen provider that's going to handle the screen art for us so i will call this one screen proof a screen lock provider sorry okay so i'm just trying to separate everything rather than having everything in one class so i'll separate it and now i'm going to have a class and that class name is going to be a screen lock okay so i'm going to call it uh screen lock okay yeah screen lock and then i'll be creating a simple constructor yeah more like to accept the contest so once i get that uh make sure you import the content as well so i just created a simple constructor that accepts the contest i use cts as a contest you can see bit content is there then the next thing i'm going to do now is to initialize our the local ont because it will help us to call the authentication uh to listen to every method or object inside the uh authentication okay so you want to make sure you import that one as well it's coming from the local alt so you don't need to be scared just install the just import are the dependency look at all dependency in your floater app and you should be good to go all right so the next thing i'm going to be doing now is to actually check if our if uh i'm gonna check for something so like to authenticate the users okay so it's going to be a method and so the method is like this so for now i'll just uh okay i'm just going to remove this okay so yeah i'll explain this later so just leave the errors for now and let's import our platform first okay so see what is going on here this is a method void authenticate user string and part all right so this part i will use it to differentiate if because we are going to be calling this method from two places first is from the splash screen when the user values is true then we can just call the authenticate user to show the dialog and secondly we are going to be calling it inside account yeah inside account whenever the user tries to toggle we are going to call the method okay and then save the states and then show because before the toggle we need to confirm if they are the actual user so we need to bring up the authentication flow for them to authenticate using their fingerprint for us to be sure okay that this is the correct user of the phone okay that's trying to authenticate all right so that was what uh that's why i put this part so if you splash screen i'm i'm gonna i'm gonna show you as we progress i'm gonna show you how to handle that then the next thing we can check it can check your biometrics to check if the device actually have biometrics so if uh can check biometrics is true then we can just carry out all the authentication flow so we can check get the list of the types and then platform we can check if platform is android then if it's available biometrics or contains biometric dot type then we can implement that face id but i'm not going to be touching face id in this tutorial then else if the uh biometric is equal to a fingerprint or biometric what we do it's actually a touch id so we can de-authenticate our weight on the skate dot and get users so the localized reason is more like uh something that is going to show in your app like to tell you that hey please authenticate to access app authenticate to access your account authenticate to view your details yeah you can change it to whatever you want okay so this uh this stuff has so many things you can actually work on it has used error dialogue blah blah blah and things it can actually work so if you want to restrict it to just biometric only you can set it to true all right sensitive transaction blah blah blah yep then we can check if did authenticate is equal to true diamonds after the user have clicked maybe authenticated their fingerprint and if it says sources response then we can carry out any activities we want to do here okay then if then else so the reason why i'm putting the system the navigator.pop if is if after opening the app from the splash screen that you try to authenticate is not the right fingerprint what we just do we just have to uh close the app entirely so i don't know if this will work for ios as well but i think this is for android we use systemnavigate.pop to close the app okay without killing the that virtual machine okay so this will just close the app for us entirely all right so that's what that navigator.pop does so still remember then if is ios we can implement ios so this package has a tutorial on that but since i'm not building on ios it's for android i won't be touching the ios part then uh if still going back to the can check biometrics if it's true we carry out all this activity then if it's first we can do our pin code checking so you can rather look for any picot package online and implement that one okay so yeah that's it and but for now i just i commented it and nothing is going on there so what i would do now remember i put this part okay and i need one more thing again a value more like if we are storing it let's say we are coming from the account i need to store the value like i'm going to pass this value but if you're coming for a splash screen i'm not going to pass the value so it's going to be optional so what i'll do i'll create an optional parameter here again which is a boolean that will store if is true or false value that the user are selected okay so you're going to understand why i'm doing that later on so here now i'm going to check something so if the the part is equal to splash what we can do is to uh check if the authenticate is equal to true then what we can do here now is just to call okay if authenticate is equal to true what we can do is just to navigate so i'll go over to my splash screen copy this method if it's true we just navigate directly into the home page okay i hope you get you understand uh what we are trying to do here okay so just navigate to the home page and for this contest remember already created a constructor here so i'm going to be getting it from this contest here all right and whenever we call this class we're going to pass that contest from there so see what is happening here now if the part is equal to splash screen i'm going to check if the indication is true then if it's true we navigate to home page but if it's false just close the app completely all right but we don't want to do that same thing inside my account page because it's not nice when i switch on toggle then you now close the app entirely yeah it will be nice so that's that's why i use this if statement to differentiate it and i passed a con a parameter here to pass the part so that we can actually uh write another method so i'll check here now else okay let's say the the part is not equal to splash screen what i can do still the same thing i would check i will check if uh did authenticate if did authenticate is equal to true so in this case i'm not navigating to any page okay yeah i'm just not navigating to any page the only thing i'm doing here is just to save the hot state okay and so now you know why i pass in that value so i'm going to save the odd state here that's why i pass this value okay so what i'll do i'll go over to this accounts page and this stuff is not going to be happening here anymore i will cut it off and go here then i will now save it here okay so now you know why i copied i added that or state that's a value the boolean value so it will be passed whenever we call this method from the accounts page all right so this value i think it should be like this okay like so then else we don't really want to do anything okay we only want to handle if the authentication is true but if it's false we can still stay on that page but just close the dialog so the plugin is going to handle that by closing the dialogue for us automatically so guys you've seen how uh you can you can see at the flow and every other thing so what i'll do now i'll go to my splash screen okay and then i'll call this authenticate user and then pass in the path so i need to copy this part now to make mistake so i'll call screen log dot blah blah blah okay so uh i will check here now if the db provider.get or state is then uh if the value is forced navigate to homepage but else then we don't need to show authentication again we can just call screen lock like so and then pass in the contest and then i'll call authenticate user and then pass in the path okay so in this case now nobody i'm not be passing the value because it's not required because when the part is equal to splash we didn't use when the part is going to slash we didn't use the value so i don't need to pass that on but while it's equal to uh something else let's say an empty string that means it's coming from account then we can now save the value okay so i'm going to do a hot restart here now you can see that the okay for now i don't know i don't know it's actually a wrong stuff but but since it's already my phone i already have my fingerprint authentication it's going to work very well but something something there's an error and which says no fragment activity uh look at odd plugin requires activity to be a fragment activity so this is more like this this is an error i got while trying to uh to implement this plugin and i actually spent a lot of time trying to fix this stuff and it gave me a headache so what i did but hopefully i was able to get the solution so i'll be showing you guys uh in this video so what you want to do you go to your android and that's because uh this stuff runs in form of a fragment i don't really know how to explain it but i think it depends on fragment to run so what we're going to do we're going to go to our kotlin file and go to your main activity.kotlin and now we have flutter activity here yeah you'll notice that so what you're going to do now is just to change this floater activity to flutter fragment activity okay like so flutter fragment activity and so this one now is uh uh io.floater embedded.android or floater activity so i need to change that to fragment activity like so flutter fragment activity okay so that should fix all right so the error is gone so you need to change it that way and once you are done i don't think it's going to work even if we do hot restart because it's more like we are changing the main activity stuff but let's try to see let's try to see if it's going to work because my best method is to kill the app and now we run it again but let's see if it works without killing the app okay it's just showing the errors so that means it i thought it has not really the changes that we have made here so what i'm going to do i'm going to kill the app entirely and then once that is done i'm going to rebuild it again so let's give this a few seconds and uh yep close this image codec and then we can run it again few seconds all right guys so you can see as we just open up the app as the app just finished launching it showed the uh the authentication for us you can see that yeah so uh you can see the message which i added which is more like the localized message uh which is please authenticate to access app you can see where it's showing here place a dedicated access app so you can actually change it to any word you need so let's say now i authenticate this application now i'm going to put my fingerprint right away and once it accepts it it takes us directly to the homepage because my my fingerprint is correct okay but i want to test it without a fingerprint because you can say if the odd state is true we navigate to this page then if it's not then close so what i'm going to do i'm going to run it again and in this case i'm going to decline like once the uh the authentication comes up i'm going to put the wrong finger and then close the dialog let's see what will happen so in this case watch what i'm going to do i'm going to put a wrong finger you can see it shows not recognized if i put the wrong finger again not recognized so uh then in this case the user will want to like try to close this dialog so maybe they will just click outside the box and once you click outside the box it's called this method system.navigato.com they need to close the app that means you don't have access into the app anymore so let me go back again let's try to uh set the state now let's see what will happen in this method so now i'm going to yeah authenticate properly with my fingerprint it takes me direct to the app and now what i'm going to do now inside the accounts page which is this page and instead of saving it directly yeah so what i'm going to do i'm going to be calling the screen lock screen lock and make sure you pass the contest and then i'm going to say authenticate user and the path is not really needed for this one but i've just passed the parts to the account so it should be different from splash and then now we are required to pass in the value so the value i'm going to be passing this value okay based on what changes okay right i'm going to pass the value and save this once we save that now so watch what happens if i click on force it will ask me okay something is wrong i'm going to do a hardware start here to just fix all those errors so don't it's not really a big deal so i'm going to fix that error right now so i'll do it how to start and it brings up this stuff our authenticate and then go into our app then right now i'm going to toggle this stuff back to force and then it asks me to authenticate my fingerprints to actually disable it so i'm going to do that and right now if we do a hot way start because this stuff is false if we do it remember we're already our chick farm condition inside this flash screen okay so if we do hot we start now it's not going to take us to that dialog page it's just going to take us directly to the home page yeah because this stuff now has been set to false right awesome so let's say the user now wants to uh toggle this stuff on again if you click here it's going to tell us to confirm okay you need to uh do this it changes and if you say force you still need to change it again but in this case now i can remember i actually use this stuff i use a check for part statement so if i click anywhere outside this bus it's not going to close the app rather to just close the dialog awesome so what about i noticed something you can see this message is same place as you get to assess the app it's not really like this it shouldn't be like this so it should be something like uh please uh if it's coming from here so it's just say please authenticate okay so but if you are coming to assess the actual show please on the getty app so how do we do stuff like that very simple very simple everything is simple so we can just add a parameter here which is more like a message parameter so it's going to be a string and we can call it message so depending on what we pass it's just going to be there then right here now instead of having this stuff here now i'm just going to remove it and then pass in the message okay like so then inside my account once we are trying to authenticate i'm going to pass in the message here the dynamic message so which would be please confirm fingerprints okay like so okay confirm i think i just i'm missing a spelling there all right so i'm going to go to splash screen again and then right here i'm going to set that up message which is message and it's going to be please certificate to access the app i'm going to save that do a heart rate start and to take us to home page and right in our homepage i will click on settings okay sorry hold on wait for it now click on settings and then try to authenticate you see the message is going to change for us which is please confirm fingerprint all right so i'm going to set to the fingerprint to secure this account now once it's secured if i go back and come back you can see it's still going to be secured and now in this case i'm going to close the app like i'll do a hot restart to see what will happen what we show the message that's going to show like this so it should be please certificate to access a different message from the other one please negative sensor so you guys seen how to make it dynamically so once we authenticate it takes us to this page all right so this is what i want to show you guys how to perform fingerprint education in your flutter application i hope you really enjoyed the video and please do not forget to subscribe and like and also share the video if you love it if you actually uh saw some kind of things i didn't do properly or you have some suggestions you can put it down in the comment section below and i will do my best to get back to that and i'll see you in the next video

Channel: Destiny Ed

Views: 5,034

Keywords: flutter, touch id, local auth, flutter local authentication, authentication, secure flutter app

Id: v8d8obIxw3s

Length: 30min 23sec (1823 seconds)

Published: Mon Feb 28 2022