Flutter — Local Authentication with Fingerprint and Face recognition
Many users rely on fingerprint or face recognition authentication to enable secure access to their devices. Sometimes we might want to use the same authentication mechanism to allow the user access to our app, or part of it, in a secure and effortless way.
While working on a project of mine, I needed to implement this feature, I gave the user a protection option in the settings which will basically ask for a fingerprint or face recognition authentication before he’d be able to access the app data.
In this article, we’re going to implement this feature using the local_auth library, it is going to work seamlessly on both, Android and iOS and we’ll implement it as a service using get_it.
Adding local_auth to our project
First of all, let’s start by importing the local_auth and get_it library to our pubspec.yaml.
Setting up our LocalAuthenticationService
In our service folder, create a local_authentication_service.dart file and populate it with the following code.
- _auth variable simply instantiates the LocalAuthentication library, nothing special here.
- bool _isProtectionEnabled keeps track of the respective setting, in a real-world app, it should be stored in the shared preferences, although it goes beyond the scope of this article.
- isAuthenticated variable will keep track of the authentication
Finally, the authenticate method launches the authentication flow with the OS related dialog.
The stickyAuth property is set to true, so the plugin does not return failure if the app is put to the background by the system. An example might be if the user receives a call before they get the chance to authenticate. With the stickyAuth property set to false, the plugin would return failure to our dart code.
Setting up the service locator
Create a service_locator.dart file in our services folder and register the LocalAuthentication singleton as follows.
Call the seupLocator() function from your main function.
Android Integration
In order to have the authentication working correctly on android, we have to do basically two things.
First, we’ve got to update the AndoridManifest.xml file to include the USE_FINGERPRINT permission as follows.
Secondly, in our android app’s MainActivity.java file we have to change the extended class from FlutterActivity to FlutterFragmentActivity, with the relative import.
iOS Integration
The local_auth plugin works with both, TouchID and FaceID. However, for the latter, we need to add the following key-value pair to the info.plist file
Building a basic UI for the example
We’re pretty much done with the logical part. Let’s quickly build the UI in order to test it out.
The UI consists of a simple centered button, the important code is the LocalAuthenticationService that is gotten using the locator, and the authenticate method called in the onPressed of the button.
Considerations
In the LocalAuthenticationService the isAuthenticated variable will be false in the following cases.
- The user hasn’t been authenticated yet
- The user canceled the authentication
- The authentication failed too many times (fingerprint not recognized)
It is going to be true when the user is authenticated successfully. In a real-world app, it might be useful to handle these as you see fit.
GitHub link for the code shown in this article
All the code I have put in this article along with examples on how to use it are available at this link on GitHub.
Conclusion
This as been a quick article/snippet in order to get you started with the local authentication flow in flutter. I hope you enjoyed the article and that it helped you build a secure flutter app!
Who are you and where can I contact you?
You can find me on
- Instagram: Daniele Cambi (https://www.instagram.com/dancamdev/)
- Twitter: @dancamdev (https://twitter.com/dancamdev)
- Email: dancam.dev@gmail.com
Daniele Cambi (dancamdev)
