Day 9: Adding Real-Time Security Features with Face Authentication #FaceAuthentication #AIAvatarSecurity

expo install expo-face-detector

npm install @tensorflow/tfjs @tensorflow-models/facemesh

import { Camera } from 'expo-camera';
import * as FaceDetector from 'expo-face-detector';
import { useState } from 'react';
import { View, Text } from 'react-native';

export default function FaceAuth({ onAuthenticate }) {
    const [hasPermission, setHasPermission] = useState(null);

    useEffect(() => {
        (async () => {
            const { status } = await Camera.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    const handleFacesDetected = ({ faces }) => {
        if (faces.length > 0) {
            onAuthenticate(true); // Authentication success
        }
    };

    if (hasPermission === null) return <View />;
    if (hasPermission === false) return <Text>No access to camera</Text>;

    return (
        <Camera
            style={{ flex: 1 }}
            type={Camera.Constants.Type.front}
            onFacesDetected={handleFacesDetected}
            faceDetectorSettings={{ mode: FaceDetector.Constants.Mode.fast }}
        />
    );
}

const registerUserFace = async (imageUri) => {
    await AsyncStorage.setItem('registeredFace', imageUri);
    alert('Face registered successfully!');
};

import * as ImageManipulator from 'expo-image-manipulator';
import AsyncStorage from '@react-native-async-storage/async-storage';

const authenticateFace = async (capturedImage) => {
    const storedFace = await AsyncStorage.getItem('registeredFace');

    if (!storedFace) return alert('No registered face found.');

    const similarityScore = compareFaces(storedFace, capturedImage);
    if (similarityScore > 0.8) {
        alert('Authentication successful!');
        onAuthenticate(true);
    } else {
        alert('Face not recognized.');
    }
};

import FaceAuth from './FaceAuth';

export default function AvatarCustomization({ onUpdate }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    return (
        <View>
            {isAuthenticated ? (
                <Picker ... /> // Customization options
            ) : (
                <FaceAuth onAuthenticate={setIsAuthenticated} />
            )}
        </View>
    );
}

expo install expo-secure-store

import * as SecureStore from 'expo-secure-store';

const saveFaceData = async (faceData) => {
    await SecureStore.setItemAsync('faceData', JSON.stringify(faceData));
};

const getFaceData = async () => {
    return JSON.parse(await SecureStore.getItemAsync('faceData'));
};

const deleteFaceData = async () => {
    await SecureStore.deleteItemAsync('faceData');
    alert('Face data deleted.');
};

expo start

faceDetectorSettings={{ detectLandmarks: FaceDetector.Constants.Landmarks.none }}

tf.setBackend('wasm');