Personaliza el flujo de recuperación de contraseña con Firebase

¿Vale la pena personalizar esto? Para mí, totalmente. En mi experiencia personal es mucho mejor personalizarlo, con la opción por defecto no da mucha confianza y la verdad es un poco feo. Por defecto se ve así:

Reset password en Firebase

¿Cómo funciona?

Cuando se hace un cambio de contraseña, Firebase genera un código único llamado oobCode, el cual es enviado por medio de un link por el mismo Firebase. Lo que haré es en lugar de usar la página por defecto de Google, configurar una app de React como el handler oficial de estos códigos.

Configuración en la Consola de Firebase

Antes de ir al código, se debe dar permiso a la aplicación. Tenemos que seguir los siguientes pasos:

Ve a Authentication > Settings y añade tu dominio (ej. mi-app.com o localhost).
En Authentication > Templates, selecciona el lápiz en "Password Reset". Haz clic en "Edit URL" y cambia la dirección por la tuya: https://mi-app.com/auth/action.

Implementación con React

Necesitamos dos piezas clave: un manejador de acciones y el formulario de nueva contraseña.

AuthHandler

Este componente actúa como un "semáforo". Recibe la petición de Firebase y decide qué hacer.

import { useEffect } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';

const AuthHandler = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    const mode = searchParams.get('mode'); // 'resetPassword'
    const oobCode = searchParams.get('oobCode'); // El token secreto

    if (mode === 'resetPassword') {
      navigate(`/reset-password?oobCode=${oobCode}`);
    } else {
      navigate('/login');
    }
  }, [searchParams, navigate]);

  return <p>Validando solicitud de seguridad...</p>;
};

ResetPassword

Se usa el método confirmPasswordReset de Firebase para finalizar el proceso y efectuar el cambio de la contraseña.

import { confirmPasswordReset, getAuth } from "firebase/auth";

const handleReset = async (newPassword) => {
  try {
    await confirmPasswordReset(auth, oobCode, newPassword);
    alert("¡Éxito! Ahora puedes iniciar sesión.");
  } catch (error) {
    alert("El enlace ha expirado o es inválido.");
  }
};

Hacer esto mejora la experiencia de usuario (UX) y también refuerza la seguridad, ya que los usuarios nunca se sentirán que están abandonado tu aplicación. Y da una mejorar imagen y de profesionalismo que en lugar de usar el que Firebase nos da por defecto.

Blog