How to Implement Face Recognition for User Authentication in FlutterFlow

1// Firebase Cloud Function: extractFaceEmbedding
2// Deploy via: firebase deploy --only functions:extractFaceEmbedding
3
4const functions = require('firebase-functions');
5const vision = require('@google-cloud/vision');
6const admin = require('firebase-admin');
7
8const visionClient = new vision.ImageAnnotatorClient();
9
10exports.extractFaceEmbedding = functions.https.onCall(async (data, context) => {
11  if (!context.auth) {
12    throw new functions.https.HttpsError('unauthenticated', 'Login required');
13  }
14
15  const { imageBase64 } = data;
16  if (!imageBase64) {
17    throw new functions.https.HttpsError('invalid-argument', 'imageBase64 required');
18  }
19
20  const [result] = await visionClient.faceDetection({
21    image: { content: imageBase64 },
22  });
23
24  const faces = result.faceAnnotations;
25  if (!faces || faces.length === 0) {
26    throw new functions.https.HttpsError('not-found', 'No face detected in image');
27  }
28  if (faces.length > 1) {
29    throw new functions.https.HttpsError('invalid-argument', 'Multiple faces detected');
30  }
31
32  const face = faces[0];
33  // Build a 128-element embedding from landmark positions
34  const landmarks = face.landmarks || [];
35  const embedding = [];
36  for (const landmark of landmarks) {
37    embedding.push(landmark.position.x / 1000.0);
38    embedding.push(landmark.position.y / 1000.0);
39    embedding.push(landmark.position.z / 1000.0);
40  }
41  // Pad or truncate to exactly 128 dimensions
42  while (embedding.length < 128) embedding.push(0.0);
43  const normalized = embedding.slice(0, 128);
44
45  return { embedding: normalized };
46});

1// Custom Action: enrollFace
2// Packages required: image_picker, firebase_core, cloud_functions
3// Return type: String (success message or error)
4
5Future<String> enrollFace() async {
6  final picker = ImagePicker();
7  final XFile? photo = await picker.pickImage(
8    source: ImageSource.camera,
9    preferredCameraDevice: CameraDevice.front,
10    imageQuality: 85,
11  );
12
13  if (photo == null) return 'Cancelled';
14
15  final bytes = await photo.readAsBytes();
16  final base64Image = base64Encode(bytes);
17
18  final functions = FirebaseFunctions.instance;
19  final callable = functions.httpsCallable('extractFaceEmbedding');
20
21  try {
22    final result = await callable.call({'imageBase64': base64Image});
23    final embedding = List<double>.from(
24      (result.data['embedding'] as List).map((e) => (e as num).toDouble()),
25    );
26
27    final uid = FirebaseAuth.instance.currentUser!.uid;
28    await FirebaseFirestore.instance.collection('users').doc(uid).update({
29      'faceEmbedding': embedding,
30      'faceEnrolled': true,
31      'faceEnrolledAt': FieldValue.serverTimestamp(),
32    });
33
34    return 'Face enrolled successfully';
35  } on FirebaseFunctionsException catch (e) {
36    return 'Enrollment failed: ${e.message}';
37  }
38}

1// Custom Action: authenticateWithFace
2// Return type: bool
3
4Future<bool> authenticateWithFace() async {
5  final picker = ImagePicker();
6  final XFile? photo = await picker.pickImage(
7    source: ImageSource.camera,
8    preferredCameraDevice: CameraDevice.front,
9    imageQuality: 85,
10  );
11
12  if (photo == null) return false;
13
14  final bytes = await photo.readAsBytes();
15  final base64Image = base64Encode(bytes);
16
17  final functions = FirebaseFunctions.instance;
18  final callable = functions.httpsCallable('extractFaceEmbedding');
19
20  try {
21    final result = await callable.call({'imageBase64': base64Image});
22    final liveEmbedding = List<double>.from(
23      (result.data['embedding'] as List).map((e) => (e as num).toDouble()),
24    );
25
26    final uid = FirebaseAuth.instance.currentUser!.uid;
27    final doc = await FirebaseFirestore.instance
28        .collection('users')
29        .doc(uid)
30        .get();
31
32    final storedEmbedding = List<double>.from(
33      (doc.data()!['faceEmbedding'] as List).map((e) => (e as num).toDouble()),
34    );
35
36    final similarity = _cosineSimilarity(liveEmbedding, storedEmbedding);
37    return similarity >= 0.85;
38  } catch (e) {
39    return false;
40  }
41}
42
43double _cosineSimilarity(List<double> a, List<double> b) {
44  double dot = 0, normA = 0, normB = 0;
45  for (int i = 0; i < a.length; i++) {
46    dot += a[i] * b[i];
47    normA += a[i] * a[i];
48    normB += b[i] * b[i];
49  }
50  if (normA == 0 || normB == 0) return 0;
51  return dot / (sqrt(normA) * sqrt(normB));
52}