Updated 29 April 2023
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.
‘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:
|
1 2 3 |
dependencies: local_auth: ^1.1.11 |
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
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.
|
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.
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.
|
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.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.