How to Create a Secure Login System with Biometric Authentication in FlutterFlow

Create a Custom Action checkBiometricSupport that imports the local_auth package. Call LocalAuthentication().canCheckBiometrics and LocalAuthentication().isDeviceSupported() to verify the device has biometric hardware and at least one biometric enrolled. Return a boolean indicating support. Call this action on app startup and store the result in App State isBiometricAvailable. Use this value to conditionally show or hide biometric-related UI elements throughout the app.

1// Custom Action: checkBiometricSupport
2import 'package:local_auth/local_auth.dart';
3
4Future<bool> checkBiometricSupport() async {
5  final auth = LocalAuthentication();
6  try {
7    final canCheck = await auth.canCheckBiometrics;
8    final isSupported = await auth.isDeviceSupported();
9    if (!canCheck || !isSupported) return false;
10    final available = await auth.getAvailableBiometrics();
11    return available.isNotEmpty;
12  } catch (e) {
13    return false;
14  }
15}

After a successful email/password login, if the user has enabled biometric login (App State isBiometricEnabled == true), create a Custom Action storeCredentials that uses flutter_secure_storage to save the email and a refresh token. The secure storage encrypts data using the device keychain (iOS) or KeyStore (Android). Never store the raw password; store the Firebase refresh token instead, which can be used to re-authenticate. Write: storage.write(key: 'user_email', value: email) and storage.write(key: 'refresh_token', value: token).

1// Custom Action: storeCredentials
2import 'package:flutter_secure_storage/flutter_secure_storage.dart';
3
4Future<void> storeCredentials(
5  String email, String refreshToken) async {
6  const storage = FlutterSecureStorage();
7  await storage.write(key: 'user_email', value: email);
8  await storage.write(key: 'refresh_token', value: refreshToken);
9}

Create a BiometricPromptPage that appears on app launch when isBiometricEnabled is true. Display a fingerprint or face Icon (large, centered), a Text ('Verify your identity'), and a 'Use Password Instead' TextButton below. On Page Load, trigger a Custom Action authenticateBiometric that calls LocalAuthentication().authenticate(localizedReason: 'Verify your identity to access the app'). On success, read stored credentials from flutter_secure_storage, use the refresh token to re-authenticate with Firebase, and navigate to the home page. On failure, increment a failedAttempts Page State counter. After 3 failures, navigate to the standard login page.

1// Custom Action: authenticateBiometric
2import 'package:local_auth/local_auth.dart';
3
4Future<bool> authenticateBiometric() async {
5  final auth = LocalAuthentication();
6  try {
7    return await auth.authenticate(
8      localizedReason: 'Verify your identity to access the app',
9      options: const AuthenticationOptions(
10        stickyAuth: true,
11        biometricOnly: false,
12      ),
13    );
14  } catch (e) {
15    return false;
16  }
17}

On your SettingsPage, add a Row with Text ('Biometric Login') and a Switch widget. Show this row with Conditional Visibility only when App State isBiometricAvailable is true. On Switch toggle ON: first authenticate with biometric to confirm the user owns the biometric, then set App State isBiometricEnabled to true and store current credentials using the storeCredentials Custom Action. On Switch toggle OFF: set isBiometricEnabled to false and delete stored credentials from flutter_secure_storage using storage.deleteAll(). Persist isBiometricEnabled in the user Firestore document so the setting survives app reinstalls.

Create a PINEntryPage as a fallback after 3 failed biometric attempts or when biometric hardware is temporarily unavailable. Use a Column with a Text ('Enter your PIN'), four Container boxes showing entered digits as dots, and a custom number pad Grid of Containers (1-9, 0, backspace, confirm). Store the PIN hash (not plain text) in flutter_secure_storage when the user first sets it up. On PIN entry, hash the input and compare with the stored hash. On match, read credentials from secure storage and auto-login. After 5 failed PIN attempts, require full email/password login and clear stored credentials.