Biometric authentication in Flutter

Introduction

Biometric authentication lets users unlock apps using their fingerprint or face. It makes apps safer and easier to use without typing passwords.

When you want users to log in quickly without typing passwords.

To add extra security for sensitive information in your app.

When you want to replace PIN codes with fingerprint or face recognition.

For apps that require fast and secure user verification.

To improve user experience by using device biometrics.

Syntax

Flutter

final LocalAuthentication auth = LocalAuthentication();

bool canCheckBiometrics = await auth.canCheckBiometrics;
bool authenticated = await auth.authenticate(
  localizedReason: 'Please authenticate to access',
  options: const AuthenticationOptions(
    biometricOnly: true,
  ),
);

Use the local_auth package to access biometric features.

authenticate shows the biometric prompt to the user.

Examples

Check if the device supports biometrics before asking the user.

Flutter

final LocalAuthentication auth = LocalAuthentication();

bool canCheck = await auth.canCheckBiometrics;

Ask the user to authenticate with biometrics with a custom message.

Flutter

bool authenticated = await auth.authenticate(
  localizedReason: 'Scan your fingerprint to continue',
);

Use options to restrict to biometrics and keep authentication active if app goes to background.

Flutter

bool authenticated = await auth.authenticate(
  localizedReason: 'Use face or fingerprint',
  options: const AuthenticationOptions(
    biometricOnly: true,
    stickyAuth: true,
  ),
);

Sample App

This app shows a button to start biometric authentication. It checks if biometrics are available, then asks the user to authenticate. The message updates to show success or failure.

Flutter

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: BiometricAuthPage(),
    );
  }
}

class BiometricAuthPage extends StatefulWidget {
  const BiometricAuthPage({super.key});

  @override
  State<BiometricAuthPage> createState() => _BiometricAuthPageState();
}

class _BiometricAuthPageState extends State<BiometricAuthPage> {
  final LocalAuthentication auth = LocalAuthentication();
  String _message = 'Press the button to authenticate';

  Future<void> _authenticate() async {
    bool canCheck = await auth.canCheckBiometrics;
    if (!canCheck) {
      setState(() {
        _message = 'Biometrics not available';
      });
      return;
    }

    try {
      bool authenticated = await auth.authenticate(
        localizedReason: 'Please authenticate to access',
        options: const AuthenticationOptions(biometricOnly: true),
      );
      setState(() {
        _message = authenticated ? 'Authentication successful' : 'Authentication failed';
      });
    } catch (e) {
      setState(() {
        _message = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Biometric Authentication')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_message, textAlign: TextAlign.center),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _authenticate,
              child: const Text('Authenticate'),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

Test biometric features on a real device or emulator with biometrics enabled.

Always handle exceptions to avoid app crashes.

Biometric prompts are controlled by the device OS for security.

Summary

Biometric authentication uses fingerprint or face to secure apps.

Use the local_auth package in Flutter to access biometrics.

Check availability before asking the user to authenticate.

Practice

1. What is the main purpose of biometric authentication in a Flutter app?

easy

A. To send notifications to users

B. To change the app's theme colors automatically

C. To speed up app loading times

D. To secure the app using fingerprint or face recognition

Solution

1. Step 1: Understand biometric authentication

   Biometric authentication uses unique physical traits like fingerprint or face to secure access.

2. Step 2: Identify its purpose in apps

   It protects sensitive data by allowing only authorized users to enter.

3. Final Answer:

   To secure the app using fingerprint or face recognition -> Option D

4. Quick Check:

   Biometric authentication = Secure app access [OK]

Hint: Biometrics means using your body to unlock [OK]

Common Mistakes:

• Confusing biometric authentication with UI changes
• Thinking it improves app speed
• Assuming it sends notifications

2. Which Flutter package is commonly used to implement biometric authentication?

easy

A. local_auth

B. shared_preferences

C. provider

D. http

Solution

1. Step 1: Recall Flutter packages for biometrics

   The local_auth package provides access to fingerprint and face authentication.

2. Step 2: Compare with other packages

   http is for network calls, provider for state management, and shared_preferences for storing data.

3. Final Answer:

   local_auth -> Option A

4. Quick Check:

   Biometric package = local_auth [OK]

Hint: local_auth sounds like local device authentication [OK]

Common Mistakes:

• Choosing http for biometrics
• Confusing provider with authentication
• Picking shared_preferences for biometrics

3. What will the following Flutter code print if biometric authentication is available and successful?

final isAvailable = await auth.canCheckBiometrics;
if (isAvailable) {
  final didAuthenticate = await auth.authenticate(
    localizedReason: 'Please authenticate',
  );
  print(didAuthenticate);
} else {
  print('No biometrics');
}

medium

A. No biometrics

B. false

C. true

D. Exception error

Solution

1. Step 1: Check biometric availability

   The code checks if biometrics are available with canCheckBiometrics. If true, it proceeds.

2. Step 2: Authenticate and print result

   If authentication succeeds, didAuthenticate is true and printed.

3. Final Answer:

   true -> Option C

4. Quick Check:

   Available and success = true [OK]

Hint: Success prints true, failure prints false or message [OK]

Common Mistakes:

• Assuming it prints 'No biometrics' when available
• Expecting false on success
• Ignoring await causing errors

4. Identify the error in this Flutter biometric authentication snippet:

final didAuthenticate = await auth.authenticate(
  localizedReason: 'Scan fingerprint',
  useErrorDialogs: true,
  stickyAuth: true
);
if (didAuthenticate) {
  print('Access granted');
}

medium

A. No check if biometrics are available before authenticate

B. Incorrect parameter name localizedReason

C. Missing await keyword before authenticate

D. Missing else block after if

Solution

1. Step 1: Review biometric availability check

   The code calls authenticate without checking canCheckBiometrics first, which may cause errors on devices without biometrics.

2. Step 2: Validate other parts

   Await is present, parameter names are correct, and else block is optional.

3. Final Answer:

   No check if biometrics are available before authenticate -> Option A

4. Quick Check:

   Always check availability before authenticate [OK]

Hint: Check biometrics availability before authenticating [OK]

Common Mistakes:

• Skipping availability check
• Confusing parameter names
• Thinking else block is mandatory

5. You want to secure a Flutter app so it only allows access if biometric authentication succeeds. Which sequence of steps correctly implements this using local_auth? A) Call authenticate directly without checking availability. B) Check canCheckBiometrics, then call authenticate, then proceed if true. C) Skip biometric checks and use a password instead. D) Call authenticate and ignore its result.

hard

A. Call authenticate directly without checking availability

B. Check canCheckBiometrics, then authenticate, then proceed if true

C. Skip biometrics and use password only

D. Call authenticate and ignore its result

Solution

1. Step 1: Verify biometric availability

   Use canCheckBiometrics to ensure device supports biometrics before authenticating.

2. Step 2: Authenticate and check result

   Call authenticate and proceed only if it returns true, ensuring secure access.

3. Step 3: Avoid skipping checks or ignoring results

   Skipping availability or ignoring authentication result risks security.

4. Final Answer:

   Check canCheckBiometrics, then authenticate, then proceed if true -> Option B

5. Quick Check:

   Availability check + authenticate success = secure access [OK]

Hint: Always check availability before authenticating [OK]

Common Mistakes:

• Calling authenticate without availability check
• Ignoring authentication result
• Using password instead of biometrics when asked