React Native con Biometría: Desbloqueando Apps con Huella Dactilar y Reconocimiento Facial

La autenticación biométrica se ha convertido en un estándar de seguridad y conveniencia en el desarrollo de aplicaciones móviles. Permite a los usuarios acceder a sus apps de forma rápida y segura, utilizando características únicas como la huella dactilar o el reconocimiento facial. En este tutorial, exploraremos cómo integrar esta potente funcionalidad en tus aplicaciones React Native, brindando una experiencia moderna y robusta a tus usuarios.

🚀 ¿Por Qué Usar Autenticación Biométrica en React Native?

La seguridad es primordial en cualquier aplicación que maneje datos sensibles. La biometría no solo refuerza la seguridad al ser más difícil de falsificar que un PIN o una contraseña, sino que también mejora drásticamente la experiencia de usuario (UX). Imagina no tener que recordar contraseñas complejas o escribir PINs cada vez que accedes a tu banca móvil o a una aplicación de pagos.

✅ Beneficios Clave:

• Seguridad Mejorada: Las características biométricas son únicas para cada individuo, lo que las hace inherentemente más seguras que las contraseñas tradicionales.
• Conveniencia: Acceso rápido y sin esfuerzo. Olvídate de recordar y escribir credenciales.
• Estándar Moderno: Los usuarios esperan la biometría en aplicaciones actuales.
• Reducción de Contraseñas: Disminuye la fatiga de contraseñas y los problemas de restablecimiento.

🛠️ Herramientas Necesarias

Para seguir este tutorial, necesitarás tener configurado tu entorno de desarrollo React Native. Si aún no lo tienes, te recomiendo la documentación oficial de React Native.

• Node.js y npm/yarn: Para gestionar paquetes.
• React Native CLI: Para crear y gestionar proyectos (o Expo CLI si prefieres ese camino, aunque este tutorial se enfocará en react-native-cli).
• JDK y Android Studio: Para desarrollo Android.
• Xcode y CocoaPods: Para desarrollo iOS.
• Un dispositivo físico o emulador/simulador: Que soporte biometría (la mayoría de los smartphones modernos lo hacen).
• react-native-biometrics: La librería principal que utilizaremos.

⚙️ Configuración Inicial del Proyecto

Primero, crearemos un nuevo proyecto React Native y luego instalaremos la librería necesaria.

Paso 1: Crear un Nuevo Proyecto React Native

Si ya tienes un proyecto, puedes saltarte este paso y adaptarlo.

npx react-native init BiometricApp
cd BiometricApp

Paso 2: Instalar react-native-biometrics

Esta librería es la más popular y robusta para la gestión de biometría en React Native.

yarn add react-native-biometrics
# o npm install react-native-biometrics

Paso 3: Enlazar la Librería (React Native 0.60+ ya lo hace automáticamente)

Para versiones de React Native 0.60 y superiores, el autolinking se encarga de la mayoría de las cosas. Sin embargo, en algunos casos, especialmente en iOS, puede ser necesario ejecutar pod install.

cd ios
pod install
cd ..

📱 Configuración Específica de Plataforma

La autenticación biométrica requiere permisos y configuraciones específicas tanto en Android como en iOS.

Configuración para Android

1. Añadir Permiso en AndroidManifest.xml Abre android/app/src/main/AndroidManifest.xml y añade el siguiente permiso justo antes de la etiqueta </application>:

<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />

<details open><summary>¿Cuál es la diferencia entre USE_BIOMETRIC y USE_FINGERPRINT?</summary>
`USE_FINGERPRINT` es el permiso más antiguo y específico para la huella dactilar. `USE_BIOMETRIC` es más moderno y engloba cualquier forma de autenticación biométrica (huella, reconocimiento facial, etc.) disponible en el dispositivo. Es buena práctica incluir ambos para una mayor compatibilidad con diferentes versiones de Android.</details>

2. Configuración de build.gradle (Opcional, para versiones antiguas de Android) Para versiones de Android inferiores a 9 (API 28), la librería requiere el uso de androidx.biometric:biometric. Asegúrate de que tu android/build.gradle tenga configurado minSdkVersion al menos a 23 y que las dependencias de AndroidX estén correctamente configuradas.

// android/build.gradle
buildscript {
ext {
// ... otras variables
minSdkVersion = 23 // Asegúrate de que sea al menos 23
compileSdkVersion = 33 // O la versión más reciente
targetSdkVersion = 33 // O la versión más reciente
ndkVersion = "23.1.7779620" // o la versión que uses
}
// ...
}

Configuración para iOS

1. Añadir Permiso en Info.plist Abre ios/BiometricApp/Info.plist (o el nombre de tu proyecto) y añade la siguiente clave con una descripción. Esta descripción es lo que el usuario verá cuando se le solicite el permiso biométrico.

<key>NSFaceIDUsageDescription</key>
<string>Para acceder a la aplicación, necesitamos tu Face ID para autenticar tu identidad.</string>

<div class="callout note">📌 <strong>Nota:</strong> Si solo planeas usar Touch ID (huella dactilar) y no Face ID, esta clave no es estrictamente necesaria, pero es buena práctica incluirla si hay alguna posibilidad de que tu aplicación se ejecute en dispositivos con Face ID.</div>

📝 Implementación de la Autenticación Biométrica

Ahora que tenemos todo configurado, vamos a escribir el código para integrar la autenticación biométrica en nuestro componente App.js.

1. Importar la Librería y Crear el Estado

import React, { useState, useEffect } from 'react';
import {
  Alert,
  Button,
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import ReactNativeBiometrics, { Biometrics as BiometricType } from 'react-native-biometrics';

const App = () => {
  const [biometricAvailable, setBiometricAvailable] = useState(false);
  const [biometricType, setBiometricType] = useState('Ninguno');

  const rnBiometrics = new ReactNativeBiometrics();

  // ... más código aquí
};

export default App;

2. Verificar la Disponibilidad de Biometría

Antes de intentar autenticar, siempre debemos verificar si la biometría está disponible en el dispositivo y qué tipo de biometría es. Esto lo haremos en un useEffect.

// ... (código anterior)

  useEffect(() => {
    const checkBiometrics = async () => {
      try {
        const { available, biometryType } = await rnBiometrics.isSensorAvailable();
        setBiometricAvailable(available);
        if (available) {
          setBiometricType(biometryType);
        }
        console.log('Biometría disponible:', available);
        console.log('Tipo de biometría:', biometryType);
      } catch (error) {
        console.error('Error al verificar biometría:', error);
        Alert.alert('Error', 'No se pudo verificar la disponibilidad biométrica.');
      }
    };

    checkBiometrics();
  }, []);

// ... (código posterior)

3. Implementar la Función de Autenticación

Esta será la función principal que se llamará cuando el usuario quiera autenticarse biométricamente.

// ... (código anterior)

  const handleBiometricAuth = async () => {
    if (!biometricAvailable) {
      Alert.alert('Advertencia', 'La biometría no está disponible en este dispositivo.');
      return;
    }

    try {
      const { success, error } = await rnBiometrics.simplePrompt({
        promptMessage: 'Confirma tu identidad para acceder a la aplicación',
        cancelButtonText: 'Cancelar',
      });

      if (success) {
        Alert.alert('Éxito', '¡Autenticación biométrica exitosa!');
        // Aquí iría tu lógica para permitir el acceso a la aplicación
      } else {
        Alert.alert('Fallo', `Autenticación biométrica fallida: ${error || 'Intenta de nuevo.'}`);
        // Aquí iría tu lógica para manejar un fallo de autenticación
      }
    } catch (error) {
      console.error('Error durante la autenticación biométrica:', error);
      Alert.alert('Error', 'Hubo un problema con la autenticación biométrica.');
    }
  };

// ... (código posterior)

4. Renderizar la UI

Finalmente, crearemos una interfaz de usuario simple para mostrar el estado de la biometría y un botón para iniciar la autenticación.

// ... (código anterior)

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Autenticación Biométrica</Text>
        <Text style={styles.subtitle}>React Native con Huella Dactilar / Face ID</Text>

        <View style={styles.infoBox}>
          <Text style={styles.infoText}>Estado del Sensor:</Text>
          <Text style={styles.infoValue}>
            {biometricAvailable ? 
              `<span class="badge green">Disponible</span>` : 
              `<span class="badge red">No Disponible</span>`}
          </Text>
          <Text style={styles.infoText}>Tipo de Biometría:</Text>
          <Text style={styles.infoValue}>
            {biometricType === BiometricType.FaceID ? 
              `<span class="badge blue">Face ID</span>` : 
              biometricType === BiometricType.TouchID ? 
              `<span class="badge purple">Touch ID</span>` : 
              biometricType === BiometricType.Fingerprint ? 
              `<span class="badge yellow">Huella Dactilar</span>` : 
              `<span class="badge red">${biometricType}</span>`}
          </Text>
        </View>

        {biometricAvailable && (
          <Button
            title={`Autenticar con ${biometricType}`}
            onPress={handleBiometricAuth}
            color="#4CAF50"
          />
        )}

        {!biometricAvailable && (
          <Text style={styles.warningText}>
            Configura la biometría en tu dispositivo para usar esta función.
          </Text>
        )}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f4f7',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  infoBox: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 10,
    marginBottom: 30,
    width: '100%',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 3,
  },
  infoText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#555',
    marginTop: 5,
  },
  infoValue: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  warningText: {
    marginTop: 20,
    fontSize: 16,
    color: '#d32f2f',
    textAlign: 'center',
    paddingHorizontal: 20,
  },
});

export default App;

✨ Métodos Adicionales de react-native-biometrics

La librería ofrece más que solo un simplePrompt. Aquí te presento algunos de los métodos más útiles:

createKeys()

Este método te permite generar un par de claves criptográficas (pública/privada) que se almacenan de forma segura en el keychain de iOS o en el keystore de Android, protegidas por la biometría del usuario. Esto es ideal para aplicaciones que necesitan firmar datos o establecer una identidad más robusta. Si el usuario elimina sus datos biométricos, las claves se invalidarán, lo que añade una capa extra de seguridad.

  const createBiometricKeys = async () => {
    try {
      const { publicKey } = await rnBiometrics.createKeys();
      Alert.alert('Éxito', `Claves biométricas creadas. Clave pública: ${publicKey}`);
      console.log('Clave pública:', publicKey);
    } catch (error) {
      console.error('Error al crear claves biométricas:', error);
      Alert.alert('Error', 'No se pudieron crear las claves biométricas.');
    }
  };

  // Puedes añadir un botón para llamar a esta función en tu UI

deleteKeys()

Para eliminar el par de claves generado. Útil si el usuario quiere resetear su configuración de seguridad o si la aplicación requiere una recreación de claves.

  const deleteBiometricKeys = async () => {
    try {
      const { keysDeleted } = await rnBiometrics.deleteKeys();
      if (keysDeleted) {
        Alert.alert('Éxito', 'Claves biométricas eliminadas correctamente.');
      } else {
        Alert.alert('Advertencia', 'No se encontraron claves para eliminar o la eliminación falló.');
      }
    } catch (error) {
      console.error('Error al eliminar claves biométricas:', error);
      Alert.alert('Error', 'No se pudieron eliminar las claves biométricas.');
    }
  };

isKeysExist()

Verifica si ya existe un par de claves biométricas generadas por tu aplicación.

  const checkKeysExist = async () => {
    try {
      const { keysExist } = await rnBiometrics.isKeysExist();
      Alert.alert('Estado de Claves', `Las claves biométricas ${keysExist ? 'existen' : 'no existen'}.`);
      console.log('Claves biométricas existen:', keysExist);
    } catch (error) {
      console.error('Error al verificar claves:', error);
    }
  };

createSignature()

Este es un método avanzado. Permite firmar un payload (un mensaje o datos) con la clave privada generada previamente, utilizando la autenticación biométrica. Esto asegura que solo el usuario autenticado pueda firmar ciertos datos, lo cual es útil para transacciones seguras o confirmación de acciones críticas.

  const signPayloadWithBiometrics = async () => {
    if (!biometricAvailable) {
      Alert.alert('Advertencia', 'La biometría no está disponible.');
      return;
    }
    const payload = 'Este es un mensaje que necesita ser firmado de forma segura.';
    try {
      const { success, signature } = await rnBiometrics.createSignature({
        promptMessage: 'Firma este mensaje con tu biometría',
        payload: payload,
      });

      if (success) {
        Alert.alert('Éxito', `Mensaje firmado. Firma: ${signature}`);
        console.log('Firma generada:', signature);
        // Aquí puedes enviar la firma y la clave pública al backend para verificación
      } else {
        Alert.alert('Fallo', 'La firma biométrica falló.');
      }
    } catch (error) {
      console.error('Error al firmar con biometría:', error);
      Alert.alert('Error', 'Hubo un problema al firmar con biometría.');
    }
  };

⚠️ Consideraciones de Seguridad y Experiencia de Usuario

• Privacidad: Siempre informa a tus usuarios sobre el uso de biometría y por qué es necesaria.
• Fallbacks: Asegúrate de tener un mecanismo de respaldo (PIN, contraseña) si la biometría falla o no está disponible.
• Bloqueo: Si la autenticación biométrica falla múltiples veces, el sistema operativo puede bloquearla temporalmente. Tu aplicación debe manejar esta situación elegantemente, posiblemente dirigiendo al usuario a la autenticación de respaldo.
• Cambio de Biometría: Si el usuario añade o elimina datos biométricos en la configuración del sistema, algunas claves almacenadas pueden invalidarse. Considera cómo manejar estos escenarios.
• Mensajes Claros: Utiliza mensajes de promptMessage descriptivos y amigables para el usuario.

🌐 Pruebas en Dispositivos y Emuladores

En Android Emulator

Para probar la biometría en el emulador de Android:

1. Inicia el emulador.
2. Ve a Settings > Security > Fingerprint (o Face & Fingerprint Unlock).
3. Añade una huella dactilar siguiendo las instrucciones. Para simular el toque, usa el menú extendido del emulador (los tres puntos ... en la barra lateral) > Fingerprint > Touch Sensor.

En iOS Simulator

Para probar Face ID/Touch ID en el simulador de iOS:

1. Inicia el simulador.
2. Ve a Settings > Face ID & Passcode (o Touch ID & Passcode).
3. Activa Face ID/Touch ID para iPhone Unlock y iTunes & App Store.
4. En el menú de hardware del simulador, puedes alternar Features > Face ID > Toggle Enrolled (para simular si Face ID está configurado).
5. Para simular un reconocimiento exitoso o fallido: Hardware > Face ID > Authenticating Matching Face / Authenticating Non-Matching Face.

🔚 Conclusión

Has aprendido a integrar la autenticación biométrica en tu aplicación React Native utilizando react-native-biometrics. Desde la configuración inicial hasta la implementación de funciones avanzadas como la firma de datos, ahora tienes las herramientas para mejorar significativamente la seguridad y la usabilidad de tus aplicaciones. Recuerda siempre priorizar la experiencia del usuario y ofrecer alternativas de autenticación.

La biometría es una característica poderosa que tus usuarios apreciarán, brindándoles una forma rápida, segura y moderna de interactuar con tu aplicación. ¡Sigue experimentando y llevando tus aplicaciones al siguiente nivel!