Building A Secure Biometric Login App With Flutter
In today’s digital age, security is of utmost importance, especially when it comes to sensitive data and personal information. Biometric authentication has become increasingly popular for its convenience and enhanced security. In this tutorial, we’ll walk through building a Flutter app with biometric login functionality using the local_auth package.
Step 1: Setting Up Your Flutter Project
First, ensure you have Flutter installed on your machine..
Create a new Flutter project using the following command:
flutter create biometric_login_app
Navigate to your project directory:
cd biometric_login_app
Add the local_auth
package to your pubspec.yaml
file:
dependencies:
flutter: sdk:
flutter local_auth: ^1.1.8
Run flutter pub get
to install the dependencies.
Setup:
IOS Integration
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>
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.
Android Integration
* The plugin will build and run on SDK 16+, but isDeviceSupported()
will always return false before SDK 23 (Android 6.0).
In Your Adndroid/App/Build.Gradle
min sdk : 23
Activity Changes
Note that local_auth
requires the use of a FragmentActivity
instead of an Activity
. To update your application:
If you are using FlutterActivity
directly, change it to FlutterFragmentActivity
in your AndroidManifest.xml
.
If you are using a custom activity, update your MainActivity.java
:
import io.flutter.embedding.android.FlutterFragmentActivity;
public class MainActivity extends FlutterFragmentActivity { // ... }
or MainActivity.kt:
import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() { // ... }
to inherit from FlutterFragmentActivity
.
Permissions
Update your project’s AndroidManifest.xml
file to include the USE_BIOMETRIC
permissions:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.app">
<uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>
On IOS SIMULATOR:
1.Go to Features and make sure Face ID is enrolled.
2. Open IOS settings -> Accessability -> FaceID and Attention and make sure its enabled.
Step 2: Implementing Biometric Authentication
Now, let’s integrate biometric authentication into our app. We’ll start by adding the necessary imports and initializing the LocalAuthentication
instance.
import 'package:flutter/material.dart';
import 'package:local_auth/local_auth.dart';
final LocalAuthentication _localAuthentication = LocalAuthentication();
String _biometricType = '';
Future<void> _checkBiometrics() async {
bool canCheckBiometrics = await _localAuthentication.canCheckBiometrics;
if (canCheckBiometrics) {
List<BiometricType> availableBiometrics = await _localAuthentication.getAvailableBiometrics();
if (availableBiometrics.contains(BiometricType.face)) { _
biometricType = 'Face ID'; }
else if (availableBiometrics.contains(BiometricType.fingerprint)) {
_biometricType = 'Fingerprint'; }
if (mounted) {
_authenticate();
} ,
},
}
Step 3: Implementing Biometric Authentication Logic
Next, let’s define the _authenticate
method to handle the biometric authentication process.
Future<void> _authenticate() async {
bool authenticated = false;
try { authenticated = await _localAuthentication.authenticate(
localizedReason: 'Authenticate to access the app',
useErrorDialogs: true, stickyAuth: true, );
} catch (e) {
print('Error: $e');
}
if (authenticated) {
// Biometric authentication successful, navigate to the main screen
Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => MainScreen()),
);
}
}
Step 4: UI Implementation
Now, let’s create a simple UI to trigger the biometric authentication process.
dartCopy code
class BiometricLoginPage extends StatelessWidget {
@override Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text('Biometric Login'),
),
body: Center(
child: RaisedButton(
onPressed: () {
_checkBiometrics();
},
child: Text('Authenticate with $_biometricType'),
),
),
);
} }
Step 5: Testing
You can now run your Flutter app on a physical device or emulator to test the biometric login functionality.
flutter run
Conclusion
Congratulations! You’ve successfully implemented biometric authentication in your Flutter app. Biometric login not only enhances security but also provides a seamless user experience. Feel free to customize the UI and add additional features to suit your app’s requirements.
That’s it for this tutorial. Happy coding!
You can view the full code on our github repository here.
TURN YOUR APP IDEA INTO DIGITAL REALITY @ WWW.IDIGISOLWEB.COM