Flutter fingerprint scanner authentication local auth
Flutter fingerprint scanner authentication local auth

Hi Guys, Welcome to Proto Coders Point, In this Flutter Tutorial we will demonstrate on how to implement flutter local_auth library to add fingerprint scanner to your android or iOS apps.

Video Tutorial 

x
Flutter local auth - App usage through Fingerprint Authentication

Introduction of Local_Auth Flutter library

This local auth flutter plugin, will help you to perform local, i.e on-device authentication of the user.

By using this library you can add Biometric aithentication to login in your Android or iOS Application.

NOTE: This will work only on android 6.0.

Let’s Start

Flutter Authentication | Flutter Fingerprint Scanner | Local Auth Package

Step 1: Create new Flutter project

I am using android studio as my IDE to build/develop Flutter Apps, you may you any of you favourite IDE like : VSCode

In android Studio : File > New > New Flutter Project  > Finish

Step 2: Adding Local_auth dependencies

Once your new flutter project is ready or you might have opened existing flutter project.

Now, on your left side of your IDE you may see your project structure, under that find pubspec.yaml file where you need to add the local auth dependencie

pubspec.yaml

dependencies:
  local_auth: ^0.4.0+1

As you can see in below screenshot.

adding local auth plugin flutter

Step 3: Adding  USE_FINGERPRINT permission

USE_FINGERPRINT PERMISSION IN ANDROID

In your Flutter Project

android > app > src > main > AndroidManifest.xml

add the below permission

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">

  <uses-permission android:name="android.permission.USE_FINGERPRINT"/>  <!-- add this line -->

<manifest> 

as show in below screenshot

adding use finger permission android manifest

USE_FINGERPRINT PERMISSION IN IOS

In your Flutter Project

ios > Runner > Info.plist 

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

as shown in below screenshot

adding faceID touchID in flutter ios

Step 4: Flutter Code

main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePageAuthCheck(),
    );
  }
}

HomePageAuthCheck.dart

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

class HomePageAuthCheck extends StatefulWidget {
  @override
  _HomePageAuthCheckState createState() => _HomePageAuthCheckState();
}

class _HomePageAuthCheckState extends State<HomePageAuthCheck> {
  //variable to check is biometric is there or not
  bool _hasBiometricSenson;

  // list of finger print added in local device settings
  List<BiometricType> _availableBiomatrics;


  String  _isAuthorized = "NOT AUTHORIZED";


  LocalAuthentication authentication = LocalAuthentication();

  //future function to check if biometric senson is available on device
  Future<void> _checkForBiometric() async{
    bool hasBiometric;

    try{
      hasBiometric = await authentication.canCheckBiometrics;
    } on PlatformException catch(e)
    {
      print(e);
    }

    if(!mounted) return;

    setState(() {
      _hasBiometricSenson = hasBiometric;
    });
  }

//future function to get the list of Biometric or faceID added into device
  Future<void> _getListofBiometric() async{
    List<BiometricType> ListofBiometric;

    try{
      ListofBiometric = await authentication.getAvailableBiometrics();
    } on PlatformException catch(e)
    {
      print(e);
    }

    if(!mounted) return;

    setState(() {
      _availableBiomatrics  = ListofBiometric;
    });
  }

  ////future function to check is the use is authorized or no
  Future<void> _getAuthentication() async{
    bool isAutherized = false;

    try{
      isAutherized = await authentication.authenticateWithBiometrics(
          localizedReason: "SCAN YOUR FINGER PRINT TO GET AUTHORIZED",
          useErrorDialogs: true,
          stickyAuth: false
      );
    } on PlatformException catch(e)
    {
      print(e);
    }

    if(!mounted) return;

    setState(() {
     _isAuthorized = isAutherized ? "AUTHORIZED" : "NOT AUTHORIZED";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter local Auth Package"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Text(" Is BioMetric Available ? : $_hasBiometricSenson"),
            RaisedButton(onPressed: (){
             _checkForBiometric();
            },color:Colors.blue,child: Text("Check",style: TextStyle(color: Colors.white),),),


            Text(" List of Available Biomatric LIST : $_availableBiomatrics"),
            RaisedButton(onPressed: (){
              _getListofBiometric();
            },color:Colors.blue,child: Text("Check List",style: TextStyle(color: Colors.white),),),


            Text(" Is AUTHORIED ? : $_isAuthorized"),
            RaisedButton(onPressed: (){
              _getAuthentication();
            },color:Colors.blue,child: Text("AUTH",style: TextStyle(color: Colors.white),),),
          ],
        ),
      ),
    );
  }
}

then, thus you flutter application is ready with Fingerprint and FaceID authentication.

Explaination of above code and the properties been used.

First of all

I have Created an instance of a class i.e LocalAuthentication, This class is provided in local_auth package, this will help us in getting access to Local Authentication of the device.

LocalAuthentication authentication = LocalAuthentication();

By using this Class instance object we can make use of different properties such as:

  • canCheckBiometrics: This will return true is Biometric sensor is available.
  • getAvailableBiometrics: This will give list of Biometric finger print.
  • authenticationWithBiometrics: This will invoke a pop up, where it will ask you to “Scan for fingerprint/faceID”, then, if the authentication get matched then you are been authorized or you are unauthorized.

autherticationWithBiometrics has some more properties such as

  • localizedReason: Show a Text on the pop dialog box. flutter fingerprint authentication dialog box
  • useErrorDialog: When set to true, will show a proper message on the dailog screen, weather your device have Available Biometric if not then in alert diaolog it will show a message to go to setting to set a new Fingerprint. when no fingerprint authentication added in device
  • stickyAuth: When set to true, whenever you app goes into background and then you return back to app again, the Authentication process will continue again.

Function Created in above to code to check the same

1. To check if device have biometric sensor or not

//future function to check if biometric sensor is available on device
  Future<void> _checkForBiometric() async{
    bool hasBiometric;

    try{
      hasBiometric = await authentication.canCheckBiometrics;
    } on PlatformException catch(e)
    {
      print(e);
    }

    if(!mounted) return;

    setState(() {
      _hasBiometricSenson = hasBiometric;
    });
  }
hasbiometric

This function will return true if device has biometric sensor else false.

2. To get the list of fingerprint added in your local device

//future function to get the list of Biometric or faceID added into device
  Future<void> _getListofBiometric() async{
    List<BiometricType> ListofBiometric;

    try{
      ListofBiometric = await authentication.getAvailableBiometrics();
    } on PlatformException catch(e)
    {
      print(e);
    }

    if(!mounted) return;

    setState(() {
      _availableBiomatrics  = ListofBiometric;
    });
  }
list of finger print available flutter

This will return array list of fingerprint

3. To check fingerprint authentication

////future function to check is the use is authorized or no
 Future<void> _getAuthentication() async{
   bool isAutherized = false;

   try{
     isAutherized = await authentication.authenticateWithBiometrics(
         localizedReason: "SCAN YOUR FINGER PRINT TO GET AUTHORIZED",
         useErrorDialogs: true,
         stickyAuth: false
     );
   } on PlatformException catch(e)
   {
     print(e);
   }

   if(!mounted) return;

   setState(() {
    _isAuthorized = isAutherized ? "AUTHORIZED" : "NOT AUTHORIZED";
   });
 }

This function will invoke a dialog box when user will be asked to touch the fingerprint scanner to get access to further app process.

Flutter app local login using fingerprint scanner, access to app with local finger print authentication