Local Auth

What is Local Auth?

When a user’s fingerprints, facial patterns, or voice are used to authenticate their identification, this is known as biometric authentication. Almost every phone now includes biometric authentication or Face Id. Instead of inputting a password, we may simply press the fingerprint to authenticate.

For the best user experience, we recommend apps that have fingerprint authentication for Android phones and face ID for iPhones.

How can we achieve this with our flutter application?

‘local_auth‘ package will help us to implement these features in our flutter application.
Now, let’s move on to the implementation part of this package.

To Implement the lacal_auth in Flutter you have to follow the following steps:

Step-1 Add Local Auth dependency in your pubspec.yaml file

dependencies:
  
  local_auth: ^1.1.11

dependencies:

local_auth: ^1.1.11

Step-2 Setup for Android

Add permission in your manifest file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_FINGERPRINT"/>
<manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.app">

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

Change your MainActivity.kt as below

package <your.package.Name>

import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

package <your.package.Name>

import androidx.annotation.NonNull

import io.flutter.embedding.android.FlutterFragmentActivity

import io.flutter.embedding.engine.FlutterEngine

import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterFragmentActivity() {

override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {

GeneratedPluginRegistrant.registerWith(flutterEngine)

}

Here, we have completed the setup for android.
Now, move to the iOS setup

Step-3 Setup for iOS

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>

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

We have completed the setup for Android and iOS, let’s move on to our dart side.

Step-4 Check is device have any authentication

final LocalAuthentication auth = LocalAuthentication(); //----Initialization
auth.isDeviceSupported().then((value) {
      if (value) {
        checkAvailableResult();
      } else {
        setState(() {
          message = "Not supported or added in device";
        });
      }
    });

final LocalAuthentication auth = LocalAuthentication(); //----Initialization

auth.isDeviceSupported().then((value) {

if (value) {

checkAvailableResult();

} else {

setState(() {

message = "Not supported or added in device";

});

}

});

Now, we will manage our application according to the result of the above-mentioned block.

Step-5 We will show the available options if device have any

canCheckBiometrics() ==> To check whether there is local authentication available on this device or not

void checkAvailableResult() async {
    bool canCheckBiometrics = await auth.canCheckBiometrics;

    if (canCheckBiometrics) {
      availableOptions = await auth.getAvailableBiometrics();
    } else {
      message = "Unable to check biometric";
    }
    setState(() {});
  }

void checkAvailableResult() async {

bool canCheckBiometrics = await auth.canCheckBiometrics;

if (canCheckBiometrics) {

availableOptions = await auth.getAvailableBiometrics();

} else {

message = "Unable to check biometric";

}

setState(() {});

}

From this step, you get the available options of authentication on your device.

Step-5 Finally, we are ready to authenticate

 bool didAuthenticate = await auth.authenticate(
                          localizedReason: 'Test Authenticate');
                      setState(() {
                        if (didAuthenticate) {
                          message = "Success";
                        } else {
                          message = "Fail";
                        }
                      });

bool didAuthenticate = await auth.authenticate(

localizedReason: 'Test Authenticate');

setState(() {

if (didAuthenticate) {

message = "Success";

} else {

message = "Fail";

}

});

Here, we have done our work.

You can check the complete code below

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

import 'package:local_auth/local_auth.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  List<BiometricType> availableOptions = [];
  final LocalAuthentication auth = LocalAuthentication();
  String message = "";

  @override
  void initState() {
    super.initState();
    auth.isDeviceSupported().then((value) {
      if (value) {
        checkAvailableResult();
      } else {
        setState(() {
          message = "Not supported or added in device";
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
         
          title: const Text('Authentication'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Text(message),
            const SizedBox(
              height: 10,
            ),
            ListView.builder(
                shrinkWrap: true,
                itemCount: availableOptions.length,
                itemBuilder: (context, index) {
                  BiometricType type = availableOptions[index];
                  return ListTile(
                    onTap: () async {
                      bool didAuthenticate = await auth.authenticate(
                          localizedReason: 'Test Authenticate');
                      setState(() {
                        if (didAuthenticate) {
                          message = "Success";
                        } else {
                          message = "Fail";
                        }
                      });
                    },
                    title: Text(type.name),
                  );
                })
          ],
        ));
  }

  void checkAvailableResult() async {
    bool canCheckBiometrics = await auth.canCheckBiometrics;

    if (canCheckBiometrics) {
      availableOptions = await auth.getAvailableBiometrics();
    } else {
      message = "Unable to check biometric";
    }
    setState(() {});
  }
}

100

101

102

103

104

import 'package:flutter/material.dart';

import 'package:local_auth/local_auth.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Demo App',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

@override

State<StatefulWidget> createState() {

// TODO: implement createState

return MyHomePageState();

}

class MyHomePageState extends State<MyHomePage> {

List<BiometricType> availableOptions = [];

final LocalAuthentication auth = LocalAuthentication();

String message = "";

@override

void initState() {

super.initState();

auth.isDeviceSupported().then((value) {

if (value) {

checkAvailableResult();

} else {

setState(() {

message = "Not supported or added in device";

});

}

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Authentication'),

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisSize: MainAxisSize.max,

children: [

Text(message),

const SizedBox(

height: 10,

ListView.builder(

shrinkWrap: true,

itemCount: availableOptions.length,

itemBuilder: (context, index) {

BiometricType type = availableOptions[index];

return ListTile(

onTap: () async {

bool didAuthenticate = await auth.authenticate(

localizedReason: 'Test Authenticate');

setState(() {

if (didAuthenticate) {

message = "Success";

} else {

message = "Fail";

}

});

title: Text(type.name),

);

})

));

}

void checkAvailableResult() async {

bool canCheckBiometrics = await auth.canCheckBiometrics;

if (canCheckBiometrics) {

availableOptions = await auth.getAvailableBiometrics();

} else {

message = "Unable to check biometric";

}

setState(() {});

}

As a result, you will get the demo working application of authentication.

Hopefully, this blog will be helpful to you to understand the Carousel Slider. If you have any queries, please write them in the comment section.

Happy Coding!!

Vipul Chauhan 28 February 2022

. . .

What is Local Auth?

How can we achieve this with our flutter application?

Step-1 Add Local Auth dependency in your pubspec.yaml file

Step-2 Setup for Android

Step-3 Setup for iOS

Step-4 Check is device have any authentication

Step-5 We will show the available options if device have any

Step-5 Finally, we are ready to authenticate

Happy Coding!!

Leave a Comment Cancel Reply

Message Sent!