¿Qué es la autenticación multifactor?

La autenticación multifactor (MFA) es una capa extra de seguridad que protege las cuentas de los usuarios. En vez de solo pedir una contraseña, también solicita un segundo paso, como un código enviado por SMS. Esto reduce el riesgo de accesos no autorizados, incluso si alguien roba la clave.

¿Por qué usar MFA en tu app React?

Si tu aplicación maneja datos sensibles o acceso a cuentas personales, implementar la autenticación multifactor es una decisión inteligente. Firebase ofrece una forma sencilla de agregar esta función sin complicaciones técnicas.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente:

- Una app creada con React.

- Un proyecto configurado en Firebase, donde la autenticación multifactor será necesaria.

- Firebase Authentication habilitado.

- Un número de teléfono para pruebas.

Paso 1: Configura Firebase

- Entra a la consola de Firebase.

- Ve a Authentication > Método de acceso.

- Activa el proveedor de correo electrónico y contraseña.

- En la sección de opciones avanzadas, habilita autenticación multifactor (MFA) mediante SMS.

- Agrega tu dominio a la lista de autorizados si aún no lo has hecho.

Paso 2: Instala Firebase en tu proyecto

Abre tu terminal y ejecuta:

npm install firebase

Luego, configura Firebase en tu archivo firebase.js para que soporte la autenticación multifactor.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
apiKey: "TU_API_KEY",
authDomain: "TU_DOMINIO.firebaseapp.com",
projectId: "TU_ID",
storageBucket: "TU_BUCKET",
messagingSenderId: "TU_ID_MENSAJES",
appId: "TU_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Paso 3: Registro de usuario con verificación de correo

Primero, crea un formulario de registro que permita al usuario ingresar su correo, contraseña y número de teléfono. Luego, verifica el correo antes de activar MFA.

import { createUserWithEmailAndPassword, sendEmailVerification } from "firebase/auth";

const registrarUsuario = async (email, password) => {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
await sendEmailVerification(userCredential.user);
alert("Verifica tu correo antes de continuar.");
};

Paso 4: Activar MFA con número de teléfono

Una vez verificado el correo, puedes inscribir al usuario en MFA usando también su número telefónico para autenticación multifactor.

import {
RecaptchaVerifier,
PhoneAuthProvider,
multiFactor,
PhoneMultiFactorGenerator
} from "firebase/auth";

const activarMFA = async (phoneNumber) => {
const recaptcha = new RecaptchaVerifier("recaptcha-container", { size: "invisible" }, auth);
const session = await multiFactor(auth.currentUser).getSession();

const phoneInfoOptions = {
phoneNumber,
session
};

const phoneAuthProvider = new PhoneAuthProvider(auth);
const verificationId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptcha);

// Aquí puedes pedir al usuario que ingrese el código recibido
};

Paso 5: Confirmar el segundo factor

Después de que el usuario reciba el código por SMS, lo ingresará para completar el proceso de autenticación multifactor:

import { PhoneAuthCredential } from "firebase/auth";

const confirmarMFA = async (verificationId, verificationCode) => {
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
await multiFactor(auth.currentUser).enroll(multiFactorAssertion, "Teléfono principal");
alert("Autenticación multifactor activada.");
};

Consejos

- Usa números de prueba durante el desarrollo para evitar bloqueos.

- Asegúrate de que el correo esté verificado antes de activar MFA.

- Considera usar reCAPTCHA invisible para una mejor experiencia de usuario.

Al agregar la autenticación multifactor en una app React con Firebase, no solo mejoras la seguridad, sino que también generas confianza en tus usuarios. Con unos pocos pasos y fragmentos de código, puedes proteger mejor tu aplicación sin complicarte la vida.

Fuente: Documentación oficial de Firebase Authentication y ejemplos de CodingPR. https://tecnologiageek.com/autenticacion-multifactor-en-react-con-firebase/