Building A Secure Biometric Login App With Flutter

In today’s digital age, security is of utmost importance, especially when it comes to sensitive data and personal information. Biometric authentication has become increasingly popular for its convenience and enhanced security. In this tutorial, we’ll walk through building a Flutter app with biometric login functionality using the local_auth package.

Step 1: Setting Up Your Flutter Project
First, ensure you have Flutter installed on your machine..

Create a new Flutter project using the following command:

flutter create biometric_login_app
Navigate to your project directory:

cd biometric_login_app
Add the local_auth package to your pubspec.yaml file:

dependencies: 

flutter: sdk: 
flutter local_auth: ^1.1.8

Run flutter pub get to install the dependencies.

Setup:

IOS Integration
Note that this plugin works with both Touch ID and Face ID. However, to use the latter, you need to also add:

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

to your 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.

Android Integration

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

In Your Adndroid/App/Build.Gradle

min sdk : 23

Activity Changes
Note that local_auth requires the use of a FragmentActivity instead of an Activity. To update your application:

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.kt:

import io.flutter.embedding.android.FlutterFragmentActivity 

class MainActivity: FlutterFragmentActivity() { // ... }

to inherit from FlutterFragmentActivity.

Permissions
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>

On IOS SIMULATOR:

1.Go to Features and make sure Face ID is enrolled.

1. Open IOS settings -> Accessability -> FaceID and Attention and make sure its enabled.

Step 2: Implementing Biometric Authentication
Now, let’s integrate biometric authentication into our app. We’ll start by adding the necessary imports and initializing the LocalAuthentication instance.

import 'package:flutter/material.dart'; 
import 'package:local_auth/local_auth.dart'; 


final LocalAuthentication _localAuthentication = LocalAuthentication(); 
String _biometricType = ''; 

Future<void> _checkBiometrics() async { 
  bool canCheckBiometrics = await _localAuthentication.canCheckBiometrics; 

  if (canCheckBiometrics) { 
     List<BiometricType> availableBiometrics = await _localAuthentication.getAvailableBiometrics(); 

  if (availableBiometrics.contains(BiometricType.face)) { _
     biometricType = 'Face ID'; } 
  else if (availableBiometrics.contains(BiometricType.fingerprint)) { 
    _biometricType = 'Fingerprint'; } 


  if (mounted) {
   _authenticate(); 
  } ,
 },
}

Step 3: Implementing Biometric Authentication Logic
Next, let’s define the _authenticate method to handle the biometric authentication process.

Future<void> _authenticate() async { 

  bool authenticated = false; 

  try { authenticated = await _localAuthentication.authenticate( 
    localizedReason: 'Authenticate to access the app', 
    useErrorDialogs: true, stickyAuth: true, );  

  } catch (e) { 
  print('Error: $e'); 
}

if (authenticated) {
   // Biometric authentication successful, navigate to the main screen 
   Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => MainScreen()),
 ); 
 }

}

Step 4: UI Implementation
Now, let’s create a simple UI to trigger the biometric authentication process.

class BiometricLoginPage extends StatelessWidget { 
@override Widget build(BuildContext context) { 

return Scaffold( 
appBar: AppBar( title: Text('Biometric Login'), 
), 

body: Center( 
child: RaisedButton(
       onPressed: () { 
         _checkBiometrics(); 
       }, 
       child: Text('Authenticate with $_biometricType'), 
       ), 
     ), 
   ); 

  } }

Step 5: Testing
You can now run your Flutter app on a physical device or emulator to test the biometric login functionality.

flutter run

Conclusion
Congratulations! You’ve successfully implemented biometric authentication in your Flutter app. Biometric login not only enhances security but also provides a seamless user experience. Feel free to customize the UI and add additional features to suit your app’s requirements.

That’s it for this tutorial. Happy coding!

You can view the full code on our github repository here.

[TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB

](https://www.idigisolweb.com)