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.
Read more about Flutter app development services from mobikul.
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
|
1 2 3 |
dependencies: local_auth: ^1.1.11 |
Step-2 Setup for Android
Add permission in your manifest file
|
1 2 3 4 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app"> <uses-permission android:name="android.permission.USE_FINGERPRINT"/> <manifest> |
Change your MainActivity.kt as below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
1 2 3 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
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(() {}); } } |
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.