¿Cómo implementar la autenticación multifactor de Firebase?

Por:

Denisse Abreu
05 de marzo del 2023 8pm ET

Eng/Spa 6-min

# Configura reCAPTCHA y el archivo de Firebase # Crea los formularios de inscripción de MFA # ¿Cómo darse de baja del firebase MFA? # Inicio de Sesión con el Firebase MFA habilitado

Hola 👋🏼, en el último artículo, aprendimos cómo restablecer una contraseña en el Firebase Auth System. En este artículo, Te enseñaré cómo implementar la autenticación multifactor (MFA). MFA agregará un segundo nivel de seguridad cuando sus usuarios inicien sesión en sus cuentas, consiste en enviar un SMS (mensaje de texto) con un código al teléfono de su usuario el cual debe insertar después de iniciar sesión con el correo electrónico y la contraseña. MFA no es para todas las aplicaciones, ya que está sujeta a Ataques de intercambio de SIM, pero tener un segundo nivel de autenticación es mejor que no tener nada. Si su aplicación almacena información confidencial por ejemplo, un sitio web bancario o un intercambio de criptomonedas no implemente la mensajería SMS, use la aplicación de autenticación de Google en su lugar. Seguiremos trabajando con el Firebase Emulator Suite y React con TypeScript.
¡Empecemos!

Configura reCAPTCHA y el archivo de Firebase.

Antes de configurar la interfaz de usuario, debemos configurar el verificador reCAPTCHA; tienes dos opciones; una es poner el reCAPTCHA invisible pasando el id del botón que iniciará el MFA, o use el reCAPTCHA visible y pase la identificación del contenedor en el que se lanzará reCAPTCHA. Además, el correo electrónico del usuario debe verificarse antes de inscribirse en MFA.

Inicie el Firebase Emulator en el terminal con firebase emulators:start, agregue un usuario y verifique el correo electrónico.

Autenticación del emulador de Firebase

Comience la inscripción con la función startEnrollMultiFactor().

src/firebase/firebase.ts

Una vez que el usuario obtenga el código de verificación, finalice el registro con la Función finishEnrollMultiFactor().

src/firebase/firebase.ts

Crea los formularios de inscripción de MFA.

Para implementar el MFA, necesitamos recopilar información personal del usuario. Vaya a profile.tsx y agregue un botón de alternar (toggle) para iniciar la entrada del teléfono con el país del usuario. Según Firebase, el número de teléfono debe transformarse a un formato E.164; Para lograr esta conversión, instale el el paquete phone. Como ilustración, pasé el número de teléfono como texto sin formato; recuerde agregar guiones para facilitar la lectura e informar al usuario que pueden aplicar cargos por mensajes de texto.

src/routes/profile.tsx

Vaya a la carpeta de rutas y cree el confirmMFaEnroll.tsx. Este archivo recibirá el código que enviará Firebase al celular del usuario; después que el código haya sido aceptado con éxito, muestre un mensaje o rediriga al usuario a su página de perfil.

src/routes/confirmMFaEnroll.tsx

No olvides importar la nueva ruta dentro del HOC RequireAuth.

src/App.tsx

¿Cómo darse de baja del firebase MFA?

Si sus usuarios desean darse de baja de MFA, proporcione el MultiFactorUser.unenroll() en el archivo firebase.ts. Esta función cancelará la inscripción de todos los multifactores del usuario.

src/firebase/firebase.ts

Cuando el usuario desactive el botón de alternancia, llame a la función unEnrollMultiFactor().

src/routes/profile.tsx

Si desea mantener el state del botón toggle, use la función multiFactor(). Verifica el state de la inscripción MFA cada vez que llame a la ruta profile; cambie el state del botón toggle a verdadero para evitar borrar el factor múltiple en el renderizado inicial. Puede crear un "spinner" o un componente "loading" para mostrárselo al usuario mientras la aplicación verifica si el MFA está deshabilitado.

src/components/loading/loading.tsx

src/routes/profile.tsx

Inicio de Sesión con el Firebase MFA habilitado.

Si el usuario se inscribe en MFA, ya no podrá iniciar sesión regularmente con correo electrónico y contraseña y el sistema de autenticación de Firebase arrojará un error auth/multi-factor-auth-required. Necesitaremos resolver el error para permitir que el usuario ingrese el código de verificación que recibirá en su teléfono celular.

Primero, agregue las funciones getMultiFactorResolver(), startMfaSignin() y finishMfaSignIn() en el firebase.ts

src/firebase/firebase.ts

Agregue el nuevo código de error al formulario de inicio de sesión.

src/routes/home.tsx

Crea un nuevo formulario HTML donde el usuario insertará el código de verificación y finalice el proceso de inicio de sesión.

src/routes/signinMfa.tsx

No olvide agregar la nueva ruta a App.tsx.

src/App.tsx

Cuando esté listo para producción, siga las instrucciones para habilitar la autenticación multifactor ¡Hasta la próxima!