Implementing Biometrics in Flutter: A Practical Tutorial

Flutter, Google's popular cross-platform mobile development framework, offers a seamless way to integrate biometric authentication into your applications. This guide will walk you through the steps involved, providing clear explanations and code snippets.

Introduction

What is Flutter?

Flutter is an open-source UI toolkit developed by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It utilizes the Dart programming language and offers a wide range of pre-designed widgets and tools for creating high-performance apps.

What is Biometric Authentication?

Biometric authentication uses unique physical characteristics—such as fingerprints, facial recognition, or iris scans—to verify a user's identity. It provides a secure and convenient way to authenticate users without needing passwords.

Types of Biometric Authentication

  1. Fingerprint Authentication: Uses fingerprint sensors to verify identity.
  2. Face Recognition: Uses facial recognition technology to authenticate users.
  3. Iris Scanning: Uses the unique patterns in the iris for authentication.
  4. Device Credential Authentication: Utilizes device PINs, patterns, or passwords for authentication.

Key Steps for Implementing Biometric Authentication in Flutter

1. Add Dependencies

To implement biometric authentication, use the local_auth package in Flutter, which supports various biometric methods:

dependencies:
  flutter:
    sdk: flutter
  local_auth: ^3.1.0  # Check for the latest version

 

Run flutter pub get to install the dependency.

2. Configure Platform-Specific Settings

For iOS:

Open ios/Runner/Info.plist and add the following configuration to request biometric authentication:

<key>NSFaceIDUsageDescription</key>

<string>We need Face ID to secure your data.</string>

<key>NSBiometricsUsageDescription</key>

<string>We need biometrics to authenticate you.</string>

 

For Android:

Ensure you have the appropriate permissions in android/app/src/main/AndroidManifest.xml:

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

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

 

Enable biometric authentication in your android/app/build.gradle file:

android {
    defaultConfig {
        ...
        // Add this for biometric compatibility
        minSdkVersion 23
    }
}

 

3. Implement Biometric Authentication

Use the local_auth package to check and authenticate biometrics. Below is an example of how to implement fingerprint and face authentication:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthScreen(),
    );
  }
}

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final LocalAuthentication _localAuth = LocalAuthentication();
  String _authorized = 'Not Authorized';

  Future<void> _authenticate() async {
    try {
      final isAvailable = await _localAuth.canCheckBiometrics;
      final isEnrolled = await _localAuth.isDeviceSupported();
      if (isAvailable && isEnrolled) {
        final authenticated = await _localAuth.authenticate(
          localizedReason: 'Please authenticate to access the app',
          biometricOnly: true, // Use only biometrics
        );
        setState(() {
          _authorized = authenticated ? 'Authorized' : 'Not Authorized';
        });
      } else {
        setState(() {
          _authorized = 'Biometrics not available or not enrolled';
        });
      }
    } catch (e) {
      setState(() {
        _authorized = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Biometric Authentication')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _authenticate,
              child: Text('Authenticate'),
            ),
            Text('Status: $_authorized'),
          ],
        ),
      ),
    );
  }
}

 

New to Flutter app development and considering biometric authentication? Our experienced developers can guide you through the process, providing tailored solutions to meet your specific needs. 

Summary

  • Add Dependencies: Install the local_auth package in your Flutter project.
  • Configure Settings: Update platform-specific settings for iOS and Android.
  • Implement Authentication: Use the local_auth package to implement and handle biometric authentication, including fingerprint and face recognition.

Implementing biometric authentication in Flutter enhances security and user convenience by allowing users to authenticate using their unique physical characteristics. This approach not only improves the security of your application but also offers a modern and user-friendly way of managing access. 

flutter