How to use Ionic Biometric Auth to Protect Your App

[Music] hey simonides what's up welcome to a new quick win today we're going to talk about biometric authentication which means face id or fingerprint and we will use this in combination in an application um like inside a password manager or a banking app that you might have used in the past so you've seen this before uh if you put the app to the background you come back and you see a lock screen or you have a running timer that shows five minutes until lock out and then when you lock out or you put the app to the background you can enable the functionality of the application again by using face id or touch id and that's exactly what we're gonna do so we are not going to implement the whole json web token flow or any kind of token based uh stuff you can do this on your own but this is just the part of showing the lock screen and locally locking your application you can get started with a blank new ionic application and the capacitor biometric of plugin this plugin will handle basically everything for us we can check it out somewhere on github here it's not yet inside the capacitor community so um the name might change in the future but it was actually the one that was the most recent early updated plugin additionally uh we need three pages we need the login just to show a little login i actually don't know why but it looks good the inside area and the lock screen which will display as a modal and then we need the service which will handle all the excess of the timer uh you can also directly go ahead and run the ionic build and add the native platforms because we need to dive into the native platforms so for android you need to navigate to appsource main java whatever main activity uh it's the usual procedure for capacitor plug-ins import the biometric auth plug-in and edit within the init function this time we also need to add a little information for ios so we can do this inside visual studio code we don't really need xcode for this the only thing we need to add is the ns face id usage description key and an according description so whatever your application uh needs um well put it into there use something uh useful in the past my apps got rejected because of such a string it wasn't the face id usage description but something else so always take this uh really serious okay uh we've generated a few pages i already deleted the home page and within the app routing you can now change it so your login page is the first page that we display and then we got the inside and unlocked actually we don't really need the lock page at all yeah we can i think we can remove it hopefully we will see later if we get any into any trouble now let's try and start with our access ooh we shouldn't see this you haven't seen this uh we want to do this together okay let's let's leave it like this okay we got the blank access servers uh you can also inject the platform and the modal controller and a logo timer which i use the behavior subject perhaps you could also just use a number but i felt like using the subject and emitting new values felt just a bit better so let's start by resetting our log out timer you could easily trigger this functionality in the places where you need to for example the user has performed some kind of action uh you could use an http interceptor and whenever there's a successful http request you reset this logout timer it's really up to you when you're going to trigger this we will just trigger it inside our inside area but basically we will say lockout timer next and then the duration for which you wanna enable your application uh let's just say let's say 10 seconds for now so that's a nice timer for testing then we got a function or we should write a function decrease timer in which we decrease the timer so we will use settimeout for this there we go uh every second we want to run this function and if if this.lockouttimer value is equal to null we want to do some special action which means locking our application and otherwise uh we will just say this the lockout timer next i kind of feel like this is overkill with the behavior subject but without the behavior subject my view wasn't updating so i was you could use this with the editing pipe easily but i really feel it it's like overkill i don't know why uh okay so if we're not yet at zero we will just uh set our lock timer to the new value so alt value -1 and then call the function again so it will be triggered a second later if we are at 0 we gonna call a function to lock our application and in this case i'm actually going to bring that snippet in we want to present a modal our locked page oh did you yeah you did it right so we can simply put it in here this dot lock application this is really uh um well not too intelligent lock mechanism it visually locks the application since we're bringing up a model but it's not locking uh the whole application itself if you want to protect it even more uh you could perhaps add a variable like is locked which you set true or false depending on whatever condition and then you write another guard functionality and check for is locked so people really can't access other pages inside the application if the application is locked so this is really just a basic implementation i didn't want to do too much i wanted to show the general flow with a biometric authentication now if we reset the lockout timer we should also start the timer again which is done with decreased timer and of course we also want to listen to the platform pause event which is really important so we can subscribe to it not really interested in the value if there's any and whenever the platform pause is called it basically means a cut over app is put into the background or capacitor app is put into the background so in that case we will immediately lock our application that's a very good mechanism uh to subscribe to this pause event you could also use the uh resume event um it doesn't really matter too much i think if you want to make it secret uh try to lock the app as uh as fast as possible right with the pause event so now we got our service in place uh let's quickly move to the login page in fact uh let's just do it in here i will just add a button uh with a router link to go inside so um i will also on the side try to somehow open my device preview the problem is biometric authentication of course won't work inside the browser so therefore uh we will check it out on a real device after i've added that code or if i've actually the input for it yeah i know what you think simon could have done that up front and i totally agree with you but never mind we're now inside the application we got the preview so i can do login and i'm inside that's cool but we don't have any timer running yet so let's move inside the inside page my naming is always on top for these things um private access service access service kind of hard work for me uh and we're gonna actually use the um let's use the ion view um will enter that's also the did enter i think but that ion view uh will enter well it doesn't really matter let's use iron you did enter and here we're going to call the access service uh reset logo tile because we just entered the page or some kind of action occurred and we want to reset the timer we of course also want to display the user i've got this in some banking applications where a little timer is running at the top so we're going to keep track of the lockout timer by using the access service lockout uh yeah i really don't know why there's a problem lockout timer as observable but it should work like this so now we get the timer we reset it on that page and we now just need to display it um i for this example just edit a little footer with a row column 12 and then automatic lockout the only thing that's maybe a bit difficult is this part so basically the locker timer isn't observable that's why we use an as in pipe uh we could leave it like that already that would be fine to display the seconds um but i wanted to use the angular date pipe to show minute seconds and to use the angular date pipe with our example we need milliseconds so we also need to multiply this and in the end you get this kind of once again overkill expression um just to make this more uh difficult for you now let's check it out on the app again and then we see automatic log out in 12 10 okay the timer is way too hot way too high i really don't want to wait that long with you let's do it with three seconds but yeah i could have refreshed it now and we see that we get to the lock screen my lock screen has a little bit of color already but besides that no real functionality so by now the application is locked and we need a way to unlock the application and therefore we will bring in the plugins from capacitor core and destructure it so we can use the biometric auth from the plugins object that's what we want to get um again this won't work on uh um browser so i will also bring in a few variables uh in case you want to show a fallback for example with a password the user could define like a number sequence after the first login and then that number sequence could be checked now as a fallback for the code also if the face id fails a few times which can happen currently during the code crisis um with the face being covered like this it's always a good idea to implement a fallback for your user as well now since the log page is basically a mobile page i will also inject the modal controller since we need to manually dismiss it later on and now uh we're gonna get started right inside the ng on init when the page comes up and check if the biometric auth is actually available we will keep track of this as biometric of equals available equals please please um why is there no typing yeah so if you check out the git repository you will see somewhere uh that there's actually available.heads interesting naming i might have named it differently but i'm not the creator so i'm not going to complain about it and if the user has biometric authentication we can directly call a function to open biometric authentication um you could also leave this out and just do it on a button click but it's usually a lot nicer if it immediately starts the authentication logic again so let's call this one from here and there we go now as we can see on the uh page somewhere here um we now need to call biometric auth verify and that's what we're going to do we can pass in different values here once again really no typing makes me kind of sad and i'm not sure why because usually this work maybe if i import import um capacitor biometric auth like this yeah then i actually kind of get a bit of typings but and we see that options is only a reason and here we see that options has a lot more options so it's really um yeah whatever let's comment this one out again so we can use it like this i will use reason i think reason is used as ios string and title is used for android so if the authentication result is verified once again i don't have any code completion i just found it here it's verified true or there's the status in that case we can go back to the real application in our case we will just uh call another function because i will use this in another place again and i will not only dismiss the mobile controller but i will pass in reset true and i will tell you why in a second to keep up a little bit of tension here so if the authentication with face id or touch id is successful we're gonna try to dismiss the lock screen um we also need to handle the input of the password so let's create another function for that and let's call this one unlock and we will do a super secret check if password is equal to one two three four uh really dummy example we're gonna call it dismiss lock screen as well you could also now um be more creative let's say on three failed authentications with code or with biometric authentication you even bring the user completely back to the login screen and you lock him out or her out that would be possible as well on top of that dismissing the lock screen might not be enough for you perhaps you also have a token based solution with access and refresh tokens in that case after dismissing the lock screen you might have to request a new token but i really didn't want to blow up this tutorial to too much information now within our lock page uh we're gonna need a bit of content what we need is in fact the ng if show fallback uh well since we have show fallback shoot at any times uh it will be displayed all the time so it's up to you if you want to show the fall black or implement some kind of logic for the fallback do you want to allow academic to use of course i wanted um can you do it oh it immediately works uh you might not even know why it works but it already works so uh what we got in here is uh we actually have we ever seen that screen show fallback is so fallback what's the value of show fallback it's true so that's fine um we got just an icon the input for our password the button to use that password field and another icon to manually trigger the uh dialog once again i'm really not sure why we don't see the changes right now but perhaps it's because we also still need to add a bit of css to make it look even better so now let's try and see what happens after the automatic lockout looks almost good but it doesn't look good where's the content of my locked page uh show fall like show fallback definitely true um sir can you can you please just just do it right am i on the wrong page what's going on where's my information let me check this out i actually don't know where went wrong i just removed the ngf for now so now we can see our super uh special password input unlock with code and a button to trigger the dialog again so i could use password one two three four i feel like it's not going to work okay it's going to work that was unexpected uh let's try and cancel the face id again and let's try to trigger it manually and that works as well i also ran this example on my android device with fingerprint it worked really awesome right out of the box now the one thing that i forgot to mention is why are we dismissing the mobile controller with reset true now if we check out the xs servers again where we call the modal there's actually a block on this miss which checks if we dismissed it and the data contains reset in that case we're going to reset the log out timer initially i had this a little bit different and directly from the log page called the service to reset the timer the problem was if we import the access service here and in the access service we import the log page you get a circular dependency warning and you really don't want to have this in your application so this way makes it all easier if the model of the lock screen is dismissed with uh some flag to reset the timer the reset lock or timer will be just reset to whatever well you got in here and just to prove that my angular date pipe is working correctly you see it's ticking down from two minutes now until our next lockout i hope you enjoyed this quick win on biometric authentication for ionic applications it's just the basic example of how you could add another layer of security to your applications in fact let me quickly show you the last example uh bringing up to the background opening it again works perfectly in fact i was a bit too fast today because the platform pause event wasn't triggered on ios i tried this on android it worked it didn't work on ios so i completely removed the reference to platform and instead used the app from the capacitor plugins and with app we can listen to different events like the app state change now this also wasn't working one hundred percent usually you could just listen to state is active and if the app is not active lock your application but the problem was that this was actually also triggered while using face id on ios so i had like an infinite loop of luck applaud events and therefore i also added the check to check if the logo timer value is above zero um just to make sure i also added this logout timer next zero in lock app just to make sure it's definitely just showing one time but once you get this in place you can actually log in with face id we can kill it or bring it to the background and once we bring the application back we will see it is locked so i hope you enjoyed this quick win on biometric authentication for both ios and android it's just another layer of security that you can add to your application on top of your existing authentication system whatever you got a json web token xs refresh token just make sure uh that this is not your only way of securing the application because this is just uh a little barrier between unauthorized access to your application but you should always prevent false access with an unverified token or expire tokens or anything like this on your backend side so this is just a little bit of sugar on top but it's actually really cool to easily make sure your application goes to this lock state once it's in the background or after a specific time if you enjoyed this video please hit the like button and stay subscribed so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ioniq academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive slack channel so we can get your app out i hope you enjoyed this video i will see you inside the next video have a great day and happy coding silent

Channel: Simon Grimm

Views: 6,650

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: l7Tuts4bjpE

Length: 22min 11sec (1331 seconds)

Published: Tue Dec 22 2020

Reddit Comments

[u/electricono]

Thanks for this!