Fingerprint authentication in Flutter

AUBY Khan
CodeChai
Published in
3 min readSep 9, 2017

Using fingerprint (or Touch ID on iOS) is often a mandatory requirement in mobile apps that require some kind of user authentication. Luckily, Flutter has a plugin (maintained by Flutter team itself) which makes this task a piece of cake, literally.

Flutter has been progressing at a rapid pace and a lot of plugins are now available at Dart package repository. The search function is currently not as good so you may need to manually traverse the pages to find out the one you are interested in. But worry not, I already have done it and will be publishing some posts to cover the most important ones.

Adding the plugin

The plugin that we are looking for is called local_auth and it provides easy to use API to integrate fingerprint authentication on your cross-platform app made with Flutter, the most awesome cross-platform mobile development SDK.

To add the plugin, open pubspec.yaml and add the following:

dependencies:
local_auth: "^0.0.1"

The updated dependencies section in pubspec.yaml should look like this:

dependencies:
flutter:
sdk:
flutter
local_auth: "^0.0.1"

If you’re using IntelliJ IDEA with Flutter plugin, you’ll get a tip to get the packages which you can use. Otherwise just use the following command (from within your project’s root) to get the package.

$ flutter packages get

This will add the package to your project.

Additional setup for Android

Your Android app will need additional permission to be able to use the fingerprint sensor. Add the following to your AndroidManifest.xml (your_project_dir\android\app\src\main\AndroidManifest.xml) besides other permissions.

<uses-permission android:name="android.permission.USE_FINGERPRINT"/>

Triggering authentication

Triggering authentication is fairly straightforward. We just need a couple of lines of code to trigger the fingerprint auth dialog.

var localAuth = new LocalAuthentication();

bool didAuthenticate = await localAuth.authenticateWithBiometrics(
localizedReason: 'Please authenticate to show account balance');

There are some more variations to this function which let us customize the dialog even more. Details can be found here.

Handling errors

LocalAuthentication.authenticateWithBiometrics() function throws the following 4 types of errors

  • PasscodeNotSet
  • NotEnrolled
  • NotAvailable
  • OtherOperatingSystem

The error codes are self explanatory and can be handled like this:

try {
var localAuth = new LocalAuthentication();

bool didAuthenticate = await localAuth.authenticateWithBiometrics(
localizedReason: 'Please authenticate yourself');
// check didAuthenticate and take action
} on PlatformException catch (e) {
if (e.code == auth_error.notAvailable) {
// The device does not have fingerprint or Touch ID. Handle this error condition here.
}
}

Learn more

As you can see, it is so easy to integrate local authentication to your app with Flutter. There is a lot of cool stuff available to explore at their online documentation.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.

--

--

AUBY Khan
CodeChai

Muslim | Learner | Coder | Techie | Mentor | Speaker | Partner @activemake | #GDG | #FlutterKarachi #FlutterPakistan | #Flutter #iOS #Android #Xamarin #IoT #UX