How to Implement Voice Authentication in FlutterFlow

FlutterFlow does not have a built-in microphone recorder widget, so you need to add the record package (pub.dev/packages/record) as a custom dependency. In FlutterFlow's Custom Code panel add record to your pubspec.yaml dependencies. Create a Custom Action called startRecording that initializes the recorder, requests microphone permission, and starts recording to a temporary file path. Create a matching stopRecording action that stops the recorder and returns the file path. Connect these to a hold-to-speak button in FlutterFlow: startRecording on button press down, stopRecording on button press up. Display a waveform animation (a simple animated Container that pulses) while recording is active to give visual feedback.

1// Custom Action: audioRecorder.dart
2import 'package:record/record.dart';
3import 'package:path_provider/path_provider.dart';
4
5final AudioRecorder _recorder = AudioRecorder();
6String? _currentPath;
7
8Future<void> startRecording() async {
9  final dir = await getTemporaryDirectory();
10  _currentPath = '${dir.path}/voice_sample_${DateTime.now().millisecondsSinceEpoch}.m4a';
11  if (await _recorder.hasPermission()) {
12    await _recorder.start(
13      const RecordConfig(encoder: AudioEncoder.aacLc, sampleRate: 16000),
14      path: _currentPath!,
15    );
16  }
17}
18
19Future<String?> stopRecording() async {
20  await _recorder.stop();
21  return _currentPath;
22}

After recording stops, upload the audio file to Firebase Storage under a path scoped to the user: voice_samples/{userId}/{timestamp}.m4a. In FlutterFlow use the Upload File action with the file path returned by stopRecording. Set the Storage path dynamically using the current user's UID to ensure users cannot access each other's recordings. Set the Storage security rule to allow read and write only to the file owner: allow read, write: if request.auth.uid == userId (extracted from the path). After upload, retrieve the download URL and pass it to the next step. Delete the temporary local file after successful upload to avoid accumulating audio files on the device.

Create an onCall Cloud Function called extractVoiceEmbedding. The function accepts the Storage download URL, downloads the audio, and calls your chosen speaker recognition API (e.g., Azure Cognitive Services Speaker Recognition or a self-hosted resemblyzer model). The API returns a voice embedding — an array of floats representing the acoustic fingerprint. For enrollment, store this embedding in the user's Firestore document under voiceEmbedding (Array of Numbers) along with enrollmentTimestamp. For verification, the function computes the cosine similarity between the new embedding and the stored one and returns a score between 0 and 1. A score above 0.85 typically indicates the same speaker.

1// functions/voiceAuth.js
2const { onCall } = require('firebase-functions/v2/https');
3const { getFirestore } = require('firebase-admin/firestore');
4const { getStorage } = require('firebase-admin/storage');
5const axios = require('axios');
6
7function cosineSimilarity(a, b) {
8  const dot = a.reduce((sum, val, i) => sum + val * b[i], 0);
9  const magA = Math.sqrt(a.reduce((s, v) => s + v * v, 0));
10  const magB = Math.sqrt(b.reduce((s, v) => s + v * v, 0));
11  return dot / (magA * magB);
12}
13
14exports.enrollVoice = onCall(async (request) => {
15  const { audioUrl } = request.data;
16  const uid = request.auth?.uid;
17  if (!uid) throw new Error('Unauthenticated');
18  // Call speaker recognition API
19  const response = await axios.post(
20    `${process.env.SPEAKER_API_URL}/enroll`,
21    { audioUrl },
22    { headers: { 'Ocp-Apim-Subscription-Key': process.env.SPEAKER_API_KEY } }
23  );
24  const embedding = response.data.embedding;
25  await getFirestore().collection('users').doc(uid).update({
26    voiceEmbedding: embedding,
27    voiceEnrolledAt: new Date(),
28  });
29  return { success: true };
30});
31
32exports.verifyVoice = onCall(async (request) => {
33  const { audioUrl, challengeWord } = request.data;
34  const uid = request.auth?.uid;
35  if (!uid) throw new Error('Unauthenticated');
36  const userDoc = await getFirestore().collection('users').doc(uid).get();
37  const storedEmbedding = userDoc.data()?.voiceEmbedding;
38  if (!storedEmbedding) throw new Error('Voice not enrolled');
39  const response = await axios.post(
40    `${process.env.SPEAKER_API_URL}/verify`,
41    { audioUrl, challengeWord },
42    { headers: { 'Ocp-Apim-Subscription-Key': process.env.SPEAKER_API_KEY } }
43  );
44  const newEmbedding = response.data.embedding;
45  const score = cosineSimilarity(storedEmbedding, newEmbedding);
46  return { verified: score > 0.85, score };
47});

A replay attack uses a recording of the legitimate user's enrollment passphrase to pass verification. Prevent this by making the user read a randomly selected challenge phrase at each verification attempt. Store a list of 20-30 short challenge phrases in a Firestore config document (challenges/words). In FlutterFlow, when the verification screen opens, call a Custom Action that fetches a random phrase from the list and displays it. The user reads the displayed phrase aloud. Your Cloud Function receives both the audio URL and the expected challenge word and can validate that the recorded audio contains the correct phrase (using speech recognition before the speaker verification step). Rotate the challenge list weekly.

In FlutterFlow, implement voice authentication as a step after standard Firebase email/password or social login. After the user successfully authenticates with their password, navigate to a VoiceVerification page. This page shows the random challenge phrase, the hold-to-speak button, and a 'Verify' button. On tap: record audio, upload to Storage, call the verifyVoice Cloud Function, and check the returned verified boolean. If true, update a Firestore session field voiceMfaVerified to true and navigate to the main app. If false, show an error and allow 2 more attempts before locking the session. Check voiceMfaVerified in your Firestore security rules for any sensitive data access.