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.

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.

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

Daniele Cambi (dancamdev)