Fingerprint Authentication for your Flutter Applications
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. 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 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 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.
Start enjoying your debugging experience — start using OpenReplay for free.
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.
https://www.dropbox.com/s/q7xzpcvgdfyvi1h/VID_20220810_184757.3gp?dl=0
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.
A TIP FROM THE EDITOR: For other way of implementing authentication, please consider our Implementing Facebook Authentication for Flutter article.
Originally published at blog.openreplay.com on August 29, 2022.