Biometric Authentication In Flutter Application

We learn how to add fingerprint authentication to your flutter apps

Hello Everyone!we learn how to add fingerprint authentication to our flutter application in a very easy way. As a developer, bio-metrics is very safe. In this blog, we learn how to implement Biometric Authentication in Flutter Application.

For Biometric Authentication we need our local database by which we can check the fingerprint.

We use many types of bio-metric :

• BiometricType.face
• BiometricType.fingerprint
• BiometricType.weak
• BiometricType.strong

Implementation:

First, we have to create a new For BioMetric Authentication first we need to add dependencies in pubspec. ymal which is local_auth.

dependencies:
  local_auth: ^1.1.10

 local_auth: This Flutter plugin gives the means to perform local, on-device authentication of the user. Import the following file into your StatefulWidget class.

import 'package:local_auth/local_auth.dart';

On supported devices, this includes authentication with biometrics such as fingerprint or facial recognition. It supports Android, IOS, and Windows. For local_auth we have to check the capabilities of the device.

>Device capabilities: If we want to use Fingerprint Authentication so we have to check the capability of our device for check the capability, we should call canCheckBiometrics()or isDeviceSupport()

import 'package:local_auth/local_auth.dart';
final LocalAuthentication auth = LocalAuthentication();
final bool canAuthenticateWithBiometrics = await auth.canCheckBiometrics;
final bool canAuthenticate = canAuthenticateWithBiometrics || await auth.isDeviceSupported();

canCheckBiometric() only designate whether hardware support is available, not whether the device has any biometrics enrolled. To get a list of enrolled biometrics, call getAvailableBiometrics().

This plugin will build and run on SDK 16+, but isDeviceSupported()will always return false before SDK 23.

> Dialogs:

The plugin provides default dialog’s for the following cases:

1. Passcode/PIN/Pattern Not Set: The user has not yet configured a passcode on iOS or a PIN/pattern on Android.
2. Bio-metrics Not Enrolled: The user has not enrolled in any biometrics on the device.

import 'package:local_auth/error_codes.dart' as auth_error;
    try {
      final bool didAuthenticate = await auth.authenticate(
          localizedReason: 'Please authenticate to show account balance',
          options: const AuthenticationOptions(useErrorDialogs: false));
    } on PlatformException catch (e) {
      if (e.code == auth_error.notAvailable) {
        // Add handling of no hardware here.
      } else if (e.code == auth_error.notEnrolled) {
      } else {}
    }

If you want to edit dialog, so you can pass AuthMessages for each platform in which you want to edit the message.

import 'package:local_auth_android/local_auth_android.dart';
import 'package:local_auth_ios/local_auth_ios.dart';
    final bool didAuthenticate = await auth.authenticate(
        localizedReason: 'Please authenticate to show account balance',
        authMessages: const <AuthMessages>[
          AndroidAuthMessages(
            signInTitle: 'Oops! Biometric authentication required!',
            cancelButton: 'No thanks',
          ),
          IOSAuthMessages(
            cancelButton: 'No thanks',
          ),
        ]);

>IOS Integration:

You need to add these lines in Info. plist file. Failure to do so results in a dialog that tells the user your app has not been updated to use Face ID.

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

>Android Integration:

• If you are using FlutterActivity directly, change it to FlutterFragmentActivity in your AndroidManifest.xml.
• If you are using a custom activity, update your MainActivity.java

import io.flutter.embedding.android.FlutterFragmentActivity;
  public class MainActivity extends FlutterFragmentActivity {
 }

or MainActivity.

import io.flutter.embedding.android.FlutterFragmentActivity
  class MainActivity: FlutterFragmentActivity() {
 }

we also give the permission for using local_auth, add these lines in AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>

To check if local authentication is available on this device.

Future<void> _checkBiometric() async {
  bool canCheckBiometric = false;

  try {
    canCheckBiometric = await auth.canCheckBiometrics;
  } on PlatformException catch (e) {
    print(e);
  }

  if (!mounted) return;
  setState(() {
    _canCheckBiometric = canCheckBiometric;
  }
  );
}

We create a final variable with the name auth in which we pass LocalAuthentication().

final auth = LocalAuthentication();

To get the list of enrolled biometrics on this device we create a list which is biometricType.

Future _getAvailableBiometric() async {
  List<BiometricType> availableBiometric = [];

  try {
    availableBiometric = await auth.getAvailableBiometrics();
  } on PlatformException catch (e) {
    print(e);
  }

  setState(() {
    _availableBiometric = availableBiometric;
  });
}

Also create a String variable to inspect the biometric, whether it's successful or unsuccessful. Then we create a method, and in the starting, we pass authenticated as false. and after that, we define authentication with biometrics.

And use the parameters of it, localizedReason in which we define the string, set useErrorDialogs as true also set stickyAuth as true. in this method, we also check whether the bio-metric is authenticated or not.

Future<void> _authenticate() async {
  bool authenticated = false;
  try {
    authenticated = await auth.authenticateWithBiometrics(
        localizedReason: "Scan your finger to authenticate",
        useErrorDialogs: true,
        stickyAuth: true);
  } on PlatformException catch (e) {
    print(e);
  }
  setState(() {
    authorized =
        authenticated ? "Authorized success" : "Failed to authenticate";
    print(authorized);
  });
}

After creating all these methods, call these methods to initState().

@override
void initState() {
  _checkBiometric();
  _getAvailableBiometric();

  super.initState();
}

Let’s come to UI part, In UI part return the scaffold in buildContext. add gave the background color of the Screen. In the body of the Scaffold pass Column(), take text as children,

and pass Login text. Create a FloatingActionButton and pass _authenticate at onPressed.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.blueGrey.shade600,
    body: Padding(
      padding: const EdgeInsets.symmetric(vertical: 12.0,     horizontal: 24.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Center(
            child: Text(
              "Login",
              style: TextStyle(
                color: Colors.white,
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 50.0),
            child: Column(
              children: [
                Container(
                  margin: const EdgeInsets.symmetric(
                   vertical: 15.0),
                  child: const Text(
                    "Authenticate using your fingerprint instead of    
your password",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, 
                   height: 1.5),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.symmetric(
                  vertical: 15.0),
                  width: double.infinity,
                  child: FloatingActionButton(
                    onPressed: _authenticate,
                    elevation: 0.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.symmetric(
                          horizontal: 24.0, vertical: 14.0),
                      child: Text(
                        "Authenticate",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Conclusion:-

In this article, we have been through why Bio-metric is important and how to implement this in any Flutter Project. And also learn the importance of local_auth and how many types of Bio-metric are in this package.