How To Do Flutter Biometric Authentication For Android And iOS

In the last blog, we discussed constructing UI using flutter by developing a login page. Moving on, in this article, we will discuss how to do flutter biometric authentication for android and iOS.

Let’s start….

Step-1: Install The Required Plugin

👉 To use the authentication, we need to add the following plugin in our pubspec.yaml.

👉 This flutter plugin provides local & one-device authentication for users.

👉 Means include authentication with biometrics like fingerprint and facial recognition.

👉 Add this plugin to your pubspec.yaml

dependencies:  

 local_auth: ^0.6.3+1

Step-2: Import The Following File In Your Stateful Widget Class

import 'package:local_auth/local_auth.dart';

👉 To check whether there is local authentication available on this device or not, call canCheckBiometrics (if you need biometrics support) and/or isDeviceSupported() (if you need some device-level authentication)

bool canCheckBiometrics = await auth.canCheckBiometrics;

Currently, the following biometric types are implemented

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

Step-3: Pre Requirement

Before starting the implementation let’s do the setup.

Android
Update your project’s AndroidManifest.xml file to include the USE_BIOMETRIC permissions:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

          package="com.example.app">

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

<manifest>

iOS
Add these keys to your info.plist file.

<key>NSFaceIDUsageDescription</key>

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

After installing the plugin will need to implement code for the authentication with fingerprint in android & facial recognition in iOS.

👉 Firstly, we need to define one variable to identify the type: a fingerprint or face biometric.

bool fingerPrint = false;

bool isAuth;

👉 After defining it in initState() we need to check for the biometric type, same as below.

@override

void initState() {

 super.initState();

 currentHomeScreen = "loginPage";

 if (globalBiometricType == BiometricType.face) {

   fingerPrint = false;

 } else {

   fingerPrint = true;

 }

}

👉 Once it is done, then we need to implement the actual logic of the biometric check.

void _checkBiometric() async {

 print("active bio seq");

 final LocalAuthentication auth = LocalAuthentication();

 bool canCheckBiometrics = false;

 try {

   canCheckBiometrics = await auth.canCheckBiometrics;

 } catch (e) {

   print("error biome trics $e");

 }

 print("biometric is available: $canCheckBiometrics");

 List<BiometricType> availableBiometrics;

 try {

   availableBiometrics = await auth.getAvailableBiometrics();

 } catch (e) {

   print("error enumerate biometrics $e");

 }

 print("following biometrics are available");

 if (availableBiometrics.isNotEmpty) {

   availableBiometrics.forEach((ab) {

     print("\ttech: $ab");

   });

 } else {

   print("no biometrics are available");

 }

 bool authenticated = false;

 try {

   authenticated = await auth.authenticateWithBiometrics(

       localizedReason: 'Touch your finger on the sensor to login',

       useErrorDialogs: true,

       stickyAuth: false,

       androidAuthStrings:

           AndroidAuthMessages(signInTitle: "Login to HomePage"));

 } catch (e) {

   print("error using biometric auth: $e");

 }

 setState(() {

   isAuth = authenticated ? true : false;

 });

 print("authenticated: $authenticated");

 if (isAuth) {

   print('bio Login seq');

   setState(() {

     _idInputController.text = globalPrefData.getString('user_loginId');

     _pwInputController.text = globalPrefData.getString('user_loginPassword');

     _btnController.start();

     FocusManager.instance.primaryFocus.unfocus();

   });

 } else {

 }

}

Here I am getting from shared pref to apply to the login fields automatically using fingerprint or facial recognition.

Similarly, you can use the biometric types as a lock to the as well. You can also use alternative plugins to implement biometric authentication, like biometric_storage 4.1.3.

Note: You can set the stickyAuth option on the plugin to true, so the plugin does not return failure if the system puts the app in the background. This might happen if the user receives a phone call before they can authenticate. With stickyAuth set to false, this would result in the plugin returning a failure result to the Dart app. The plugin will retry authenticating when the app resumes if set to true.

Related Read: Getting Started With Flutter BLoC Pattern