How to Integrate Facial Recognition for User Authentication in FlutterFlow

In FlutterFlow, go to Custom Code → Custom Widgets → Add Widget. Name it FaceCaptureWidget. In the pubspec dependencies, add camera: ^0.10.0 and google_mlkit_face_detection: ^0.9.0. The widget initializes the front camera, displays a live preview, and adds an oval face guide overlay. When the user taps Capture, it takes a picture, runs google_mlkit_face_detection on the image, and checks: (1) exactly one face detected, (2) face confidence > 0.95, (3) face size is at least 20% of image width (user is close enough). If all checks pass, it calls the widget's onFaceCaptured callback with the image file path. For liveness detection, require the user to blink: check that eyesOpenProbability changes from > 0.8 to < 0.2 within a 3-second window before accepting the capture.

1// FaceCaptureWidget — simplified structure
2import 'package:camera/camera.dart';
3import 'package:google_mlkit_face_detection/google_mlkit_face_detection.dart';
4
5class FaceCaptureWidget extends StatefulWidget {
6  final Function(String imagePath) onFaceCaptured;
7  const FaceCaptureWidget({required this.onFaceCaptured, Key? key}) : super(key: key);
8
9  @override
10  State<FaceCaptureWidget> createState() => _FaceCaptureWidgetState();
11}
12
13class _FaceCaptureWidgetState extends State<FaceCaptureWidget> {
14  CameraController? _controller;
15  final FaceDetector _faceDetector = FaceDetector(
16    options: FaceDetectorOptions(
17      enableClassification: true, // enables eyeOpenProbability
18      minFaceSize: 0.2,
19    ),
20  );
21  bool _blinkDetected = false;
22
23  Future<void> _captureAndVerify() async {
24    final image = await _controller!.takePicture();
25    final inputImage = InputImage.fromFilePath(image.path);
26    final faces = await _faceDetector.processImage(inputImage);
27
28    if (faces.length != 1) return; // must be exactly one face
29    final face = faces.first;
30    if (!_blinkDetected) return; // liveness check
31    if ((face.headEulerAngleY ?? 0).abs() > 15) return; // face forward
32
33    widget.onFaceCaptured(image.path);
34  }
35}

Deploy a Firebase Cloud Function named registerFace. It receives the base64-encoded face image and the authenticated user's Firebase UID (verify the ID token with admin.auth().verifyIdToken). It calls AWS Rekognition IndexFaces on a collection named app-faces with the image bytes and ExternalImageId set to the user's UID. Rekognition returns a FaceId (a UUID representing this face in the collection). Store this FaceId in Firestore at users/{uid}/faceId. Also store faceRegisteredAt: serverTimestamp() and faceRegistrationStatus: 'active'. Return {success: true, faceId} to FlutterFlow. In FlutterFlow, add this as an API Call in the API Manager, triggered from a Register Face button in the user's profile or onboarding flow. Send the base64 image from the Custom Widget callback and the Firebase ID token in the Authorization header.

1// registerFace Cloud Function
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const AWS = require('aws-sdk');
5
6const rekognition = new AWS.Rekognition({
7  region: process.env.AWS_REGION,
8  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
9  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
10});
11
12exports.registerFace = functions.https.onCall(async (data, context) => {
13  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
14  
15  const { imageBase64 } = data;
16  const uid = context.auth.uid;
17  const imageBytes = Buffer.from(imageBase64, 'base64');
18  
19  const result = await rekognition.indexFaces({
20    CollectionId: 'app-faces',
21    Image: { Bytes: imageBytes },
22    ExternalImageId: uid,
23    DetectionAttributes: ['DEFAULT'],
24    MaxFaces: 1,
25    QualityFilter: 'HIGH'
26  }).promise();
27  
28  const faceId = result.FaceRecords[0]?.Face?.FaceId;
29  if (!faceId) throw new functions.https.HttpsError('failed-precondition', 'No face detected');
30  
31  await admin.firestore().collection('users').doc(uid).update({
32    faceId,
33    faceRegisteredAt: admin.firestore.FieldValue.serverTimestamp(),
34    faceRegistrationStatus: 'active'
35  });
36  
37  return { success: true, faceId };
38});

Deploy a Cloud Function named verifyFaceLogin. This function is called BEFORE the user is authenticated (it's a pre-auth endpoint). It receives the base64 face image. It calls AWS Rekognition SearchFacesByImage on the app-faces collection with the image, requesting the top 1 match with similarity threshold 90. If a match is found, it retrieves the ExternalImageId (which is the user's UID stored in step 2). It then uses Firebase Admin SDK to generate a custom auth token for that UID with admin.auth().createCustomToken(uid). It returns the custom token to FlutterFlow. In FlutterFlow, create a login page with the FaceCaptureWidget. On capture, call this Cloud Function, receive the customToken, and use a Custom Action: FirebaseAuth.instance.signInWithCustomToken(customToken) to complete the login. This does NOT use a password — the face is the credential.

Create a new page named FaceLogin. Add the FaceCaptureWidget (from Custom Widgets) to the page. Add a Text widget showing 'Look at the camera and blink to sign in'. Add an onFaceCaptured callback: when the widget fires this callback with the image path, an Action Flow begins: (1) Read image file → encode to base64 using a Custom Function. (2) API Call → verifyFaceLogin Cloud Function with the base64 image. (3) If the response contains a customToken, execute a Custom Action: await FirebaseAuth.instance.signInWithCustomToken(token). (4) Navigate to the home page. (5) If the response contains an error (no match), show a Snackbar: 'Face not recognized. Please try again or use your password.' Add a fallback 'Sign in with password instead' TextButton below the camera.