FaceAttend

Face Recognition Attendance & Authentication App

A Flutter mobile app that uses face recognition, Firebase Authentication, Firestore, and TensorFlow Lite to provide secure user registration, face enrollment, face login, and attendance-ready identity verification.

---

Overview

FaceAttend is a cross-platform Flutter application designed for biometric authentication and attendance management.
The app allows users to create an account, enroll their face, and later verify their identity using face recognition.

The project uses a local MobileFaceNet TensorFlow Lite model to generate facial embeddings, then compares those embeddings using cosine similarity. Firebase is used for authentication and cloud data storage.

This app can be used as a foundation for:

• Student attendance systems
• Employee check-in systems
• Biometric login prototypes
• Face verification demos
• Flutter + Firebase AI/ML learning projects

---

Main Idea

The app follows this workflow:

1. A user creates an account using email, password, full name, phone number, and profile image.
2. The selected face image is processed by a local TensorFlow Lite model.
3. The app generates a 192-dimensional face embedding.
4. The embedding is saved in Firebase Firestore with the user profile.
5. During face login or face scanning, the app captures a new face image.
6. The new embedding is compared with the stored embedding.
7. If the similarity score passes the threshold, the user is verified.

---

Features

Authentication

• Email and password registration
• Email verification
• Email and password login
• Google Sign-In
• Forgot password flow
• Firebase Authentication integration
• Logout support

Face Recognition

• Face enrollment using camera or gallery image
• Face login using camera capture
• Face comparison between two images
• Face detection using Google ML Kit
• Face embeddings using MobileFaceNet TFLite model
• Cosine similarity matching
• Match percentage display
• Success and failure sound feedback

User Dashboard

• Home dashboard
• Welcome message using user profile data
• Bottom navigation
• Face scan card
• Face compare card
• Face enroll card
• History and support placeholders

Firebase Integration

• Firebase Core
• Firebase Auth
• Cloud Firestore
• User profile storage
• Face embedding storage

---

Tech Stack

Technology	Purpose
Flutter	Cross-platform app development
Dart	Programming language
Firebase Auth	User authentication
Cloud Firestore	User and biometric data storage
Google Sign-In	Social authentication
Google ML Kit Face Detection	Detecting faces in images
TensorFlow Lite	Running local face recognition model
MobileFaceNet	Face embedding generation
GoRouter	App navigation
Image Picker	Camera and gallery image selection
Audioplayers	Success/failure sounds

---

App Screens

The project includes these main screens:

Screen	Description
Login	Login with email/password, Google, or face
Sign Up	Create account and enroll face image
Verify Email	Ask user to verify email after registration
Forgot Password	Send password reset email
Face Login	Login using email and captured face
Face Compare	Compare two selected face images
Face Enroll	Capture and save face embedding
Face Scan	Capture face and compare with stored embedding
Home	Dashboard for attendance and face actions

---

Face Recognition Workflow

User Image
   ↓
ML Kit Face Detection
   ↓
Image Resize 112x112
   ↓
MobileFaceNet TFLite Model
   ↓
192-D Face Embedding
   ↓
Firestore Storage / Comparison
   ↓
Cosine Similarity Score
   ↓
Match or No Match

The app uses a similarity threshold of around 70% to decide whether two faces match.

---

Project Structure

authface-main/
│
├── android/
├── ios/
├── web/
├── linux/
├── macos/
├── windows/
│
├── assets/
│   ├── images/
│   │   └── google.png
│   │
│   ├── logo/
│   │   └── faceAuth.png
│   │
│   ├── models/
│   │   └── mobilefacenet.tflite
│   │
│   └── sounds/
│       ├── success.mp3
│       ├── fail.mp3
│       └── notification.mp3
│
├── lib/
│   ├── core/
│   │   ├── constants.dart
│   │   └── validators.dart
│   │
│   ├── screens/
│   │   ├── auth/
│   │   │   ├── login_page.dart
│   │   │   ├── signup_page.dart
│   │   │   ├── face_login_page.dart
│   │   │   ├── forgot_password_page.dart
│   │   │   ├── verify_email_page.dart
│   │   │   └── fallback_password_login_page.dart
│   │   │
│   │   ├── face/
│   │   │   ├── face_compare_page.dart
│   │   │   ├── face_enroll_page.dart
│   │   │   └── face_scan_page.dart
│   │   │
│   │   └── home/
│   │       └── home_page.dart
│   │
│   ├── services/
│   │   ├── auth_service.dart
│   │   ├── face_embedding_service.dart
│   │   └── firestore_service.dart
│   │
│   ├── widgets/
│   │   ├── custom_button.dart
│   │   ├── custom_text_field.dart
│   │   └── show_snackbar.dart
│   │
│   ├── firebase_options.dart
│   ├── main.dart
│   └── routes.dart
│
├── pubspec.yaml
└── README.md

---

Installation

1. Clone the repository

git clone https://github.com/your-username/faceattend-flutter.git
cd faceattend-flutter

2. Install Flutter dependencies

flutter pub get

3. Configure Firebase

Create a Firebase project from the Firebase Console and enable:

• Email/Password Authentication
• Google Authentication
• Cloud Firestore

Then configure FlutterFire:

dart pub global activate flutterfire_cli
flutterfire configure

This will generate or update:

lib/firebase_options.dart

For Android, also make sure you have:

android/app/google-services.json

For iOS, make sure you have:

ios/Runner/GoogleService-Info.plist

---

Required Firebase Services

Firebase Authentication

Enable these providers:

Authentication → Sign-in method

Required providers:

• Email/Password
• Google

Cloud Firestore

The app stores user profiles and face embeddings in the users collection.

Example user document:

{
  "email": "user@example.com",
  "full_name": "User Name",
  "phone": "+213XXXXXXXXX",
  "profile_image": true,
  "embedding": [0.123, -0.456, 0.789],
  "created_at": "server timestamp"
}

---

Assets

The app uses the following assets:

assets:
  - assets/logo/
  - assets/models/
  - assets/images/
  - assets/sounds/success.mp3
  - assets/sounds/fail.mp3

Important model file:

assets/models/mobilefacenet.tflite

This model is used to extract face embeddings locally on the device.

---

Permissions

Because the app uses the camera and gallery, make sure platform permissions are added.

Android

Add these permissions in:

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

Add these keys in:

ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>This app uses the camera to capture your face for authentication.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>This app uses your photo library to select a face image for enrollment.</string>

---

Run the App

Run on Android

flutter run

Run on iOS

flutter run

Build APK

flutter build apk --release

Build App Bundle

flutter build appbundle --release

---

Main Dependencies

firebase_core
firebase_auth
cloud_firestore
firebase_storage
google_sign_in
go_router
image_picker
camera
google_mlkit_face_detection
tflite_flutter
audioplayers
permission_handler
path_provider
image

---

How Face Matching Works

The app compares two face embeddings using cosine similarity.

similarity = cosineSimilarity(storedEmbedding, capturedEmbedding) * 100;

If the similarity is greater than or equal to 70%, the face is considered a match.

final isMatch = similarity >= 70;

Result examples:

✅ Match: 86.42%
❌ Not a Match: 51.23%

---

Current Routes

The app currently defines these routes:

/login
/signup
/face-login
/forgot-password
/verify-email
/home
/face-compare

Some dashboard cards may require adding extra routes such as:

/face-scan
/face-enroll
/attendance-history

---

Suggested Future Improvements

• Add attendance check-in and check-out records
• Add attendance history screen
• Add admin dashboard
• Add QR code or location-based attendance validation
• Add liveness detection to prevent photo spoofing
• Improve face cropping and alignment before embedding extraction
• Add role-based access control
• Add profile editing
• Add better Firestore security rules
• Add push notifications
• Add dark mode
• Add unit and widget tests
• Add production-ready error handling

---

Security Notes

Face embeddings are biometric data and should be handled carefully.

Recommended security practices:

• Protect Firestore with strict security rules
• Do not expose private API keys in client-side code
• Rotate any leaked or committed API keys before publishing
• Use HTTPS-only APIs
• Add liveness detection for production use
• Avoid storing raw face images unless absolutely necessary
• Inform users how their biometric data is used and stored

---

Known Limitations

This project is currently a prototype. Some features are partially implemented or prepared for future work.

Current limitations include:

• Face login verifies a face but should be connected more tightly to Firebase Auth sessions
• Attendance history is not fully implemented yet
• Some dashboard routes may need to be added in routes.dart
• Liveness detection is not included
• Face alignment/cropping can be improved
• Production security rules are not included in the repository

---

License

This project is for learning, prototyping, and educational purposes.

You can add your preferred license, for example:

MIT License

---

FaceAttend

Smart attendance starts with your face.