Fingerprint Authentication for your Flutter Applications
Tags: flutter, authentication
Published: 2022-08-29 22:26:56

by [Emmanuel Uchechukwu](https://blog.openreplay.com/authors/emmanuel-uchechukwu)


Fingerprint authentication has become an essential requirement in our mobile applications. It is the latest and the most reliable innovation in identity and access management. Fingerprint authentication is a form of biometric technology that enables users to access information or services using fingerprint images. It can be defined as verifying a user's identity based on a stored fingerprint template. This form of authentication provides the user with a lot of advantages few of which are:

- It is much harder to fake than identity cards
- it cannot be guessed
- It is considered one of the most secure authentication methods.

Flutter provides us a package known as [local_auth](https://pub.dev/packages/local_auth). This Flutter plugin provides means to perform local, on-device authentication of the user.
In this article, users will learn how to implement this functionality in a flutter application.

## Setting Up The Flutter Project

To follow up with this tutorial, click [here](https://github.com/UcFlutter/Fingerprint-Auth-Starter.git) to clone the starter files created for this project and run `flutter create .` and then `flutter pub_add local_auth` to add needed dependencies.

Open your `pubspec.yaml` file, and you should see the `local_auth` package added on *line 16* below:

```
name: fingerprint_auth
description: A new Flutter project.

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: ">=2.17.6 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  local_auth: ^2.1.2 #This line was added

dev_dependencies:
  flutter_test:
    sdk: flutter
    
  flutter_lints: ^2.0.0
  
flutter:

  uses-material-design: true
```

Next, go to your `android > app > src > main` and open the `AndroidManifest.xml` file add the code below:
```
<uses-permission android:name="android.permission.USE_BIOMETRIC"/>
```

The code above specifies a system permission the user must grant for the app to operate successfully.

Lastly, go to your `android > app > src > main > kotlin` and open the `MainActivity.kt` file and change it to the code below:

```
package com.example.fingerprint_auth

import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
}
```

We changed it because `local_auth` requires using a `FragmentActivity` instead of an `Activity`.


## Open Source Session Replay

_[OpenReplay](https://github.com/openreplay/openreplay) is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![replayer.png](https://static.openreplay.com/images/banner-blog.png)

_Start enjoying your debugging experience - [start using OpenReplay for free](https://github.com/openreplay/openreplay)._


## Adding Functionalities

With all the configuration complete, let us begin by creating our functionalities. First, let us import the `local_auth` packages.
```
import 'package:local_auth/local_auth.dart';
```

Next, we will create an instance of our `LocalAuthentication` class:
```
LocalAuthentication auth = LocalAuthentication();
```

With that done, we will create an asynchronous function to perform authentication when we click the button:
```
Future authenticate() async {
      final bool isBiometricsAvailable = await auth.isDeviceSupported();

      if (!isBiometricsAvailable) return false;

      try {
        return await auth.authenticate(
          localizedReason: 'Scan Fingerprint To Enter Vault',
          options: const AuthenticationOptions(
            useErrorDialogs: true,
            stickyAuth: true,
          ),
        );
      } on PlatformException {
        return;
      }
    }
```

Let us break down the code:
- First, we check to see if the device can check biometrics or default to device credentials.
- Next, we authenticate the user with the biometrics available on the device by calling the `authenticate()` method. This method also allows the user to use device authentication such as pin, pattern, and passcode.
- The `useErrorDialogs` parameter checks to see if the system will attempt to handle user-fixable issues encountered while authenticating.
- The `stickyAuth` parameter is used when the application goes into the background for any reason while the authentication is in progress. While set to true, authentication resumes when the app is resumed.

Time to implement the `onPressed` functionality:
```
onPressed: () async {
            bool isAuthenticated = await authenticate();

            if (isAuthenticated) {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return const SecretPage();
                  },
                ),
              );
            } else {
              Container();
            }
          },
```

We checked to see if the authentication returns to `true`, then it should take us to the `SecretPage` screen.

## Testing the Application

Now let us test the application. On your terminal, run the code below:
```
flutter run
```

The code above will build and install the app on your device or emulator.

[![video](https://blog.openreplay.com/static/320800224c30cdf4481df6b6a0e4760b/898e6/video.png)](https://blog.openreplay.com/339c8f25e73b243f8cca52c00bfbb670/video2.3gp)

## Conclusion & Resources

In this tutorial, we learned about how we can easily integrate fingerprint authentication in a Flutter application.

Here is a link to the [Github Source Code](https://github.com/UcFlutter/Fingerprint-Auth-Complete.git).

> A TIP FROM THE EDITOR: For other way of implementing authentication, please consider our [Implementing Facebook Authentication for Flutter](https://blog.openreplay.com/implementing-facebook-authentication-for-flutter) article.

[![newsletter](https://blog.openreplay.com/static/e6b18eda7a327511296a2f27692f9c70/e9957/newsletter.png)](https://newsletter.openreplay.com/)