Restablezca contraseña en el sistema de autenticación de Firebase.

¿Cómo restablecer una contraseña en el sistema de autenticación de Firebase?

Denisse Avatar

Por:

Denisse Abreu
01 de febrero del 2023 9pm ET

Eng/Spa 8-min

# Conecte Firebase Emulator Suite a React # Cree los formularios para el restablecimiento de contraseña # Inicialize el Firebase Auth Emulator # Cómo funciona el Firebase Reset Password en producción

Hola 👋🏼, En el tutorial pasado, aprendimos ¿Cómo crear un sistema de autenticación con Firebase y React? usando correo electrónico y contraseña. En este tutorial, aprenderemos cómo agregar el restablecimiento de contraseña y cómo inicializar el Firebase Auth Emulator. Firebase Emulator Suite es un entorno de desarrollo que Firebase le permite utilizar a los desarrolladores web para realizar pruebas y crear prototipos, por lo que no tenemos que alterar la base de datos que está en producción, la autenticación ni los recursos del hosting. Consulte Firebase Emulator Suite para obtener más información.
Empecemos!

Diagrama de restablecimiento de contraseña

Conecte el Firebase Emulator Suite a React.

Vaya a firebase.ts e indique a su aplicación que se conecte a el Emulator Suite cuando esté en modo de desarrollo. Traiga dos nuevas funciones de Firebase: sendPasswordResetEmail() y confirmPasswordReset(). Estas funciones son promesas nulas, lo que significa que no devolverán nada más que el código de error de Firebase; cree su propio sistema de mensajería y errores. 

src/firebase/firebase.ts

Cree los formularios para el restablecimiento de contraseña.

  • Ve a la carpeta de rutas y crea dos rutas nuevas: passwordReset.tsx y forgotPassword.tsx. 
Git Bash

  cd src
  cd routes
  touch passwordReset.tsx && touch forgotPassword.tsx

Primero, trabajaremos en el formulario de contraseña olvidada. Este formulario consiste en un simple elemento input HTML que envíe el correo electrónico del usuario a Firebase y compruebe si existe en el sistema de autenticación. Si el correo electrónico no existe, su aplicación recibirá un error de usuario no encontrado. 

src/routes/forgotPassword.tsx

El siguiente código pertenece al archivo de restablecimiento de contraseña. Este formulario es crucial y debe probarse a fondo, el usuario se redirigirá a si mismo a este formulario a través del enlace enviado a su bandeja de entrada de email. Este enlace tendrá un código único llamado oobCode; Extraiga este código de la URL y envíelo de regreso a Firebase a través de la función confirmPasswordReset(). Si Firebase coincide con este código, permitirá el restablecimiento de la contraseña. 

src/routes/passwordReset.tsx
  • Agregue el enlace de contraseña olvidada al formulario de inicio de sesión. 
src/routes/home.tsx
  • Por último, lleve las nuevas rutas a App.tsx. La ruta al formulario de restablecimiento de contraseña apuntará al Firebase Emulator por ahora. 
src/App.tsx

Inicialize el Firebase Auth Emulator.

Antes de iniciar el emulador, necesitará una cuenta de Firebase y un proyecto; puede subir este proyecto o usar un proyecto de prueba; con el sistema de autenticación ya aprovisionado. Abra su terminal dentro de la carpeta raíz, y escriba firebase login; después de iniciar sesión, ejecute firebase init emulators. El CLI le hará preguntas sobre cómo desea configurar su proyecto; para este tutorial, necesitamos el Authentication Emulator, el puerto 9099 y el Emulator UI.

Cuando su proyecto de Firebase esté listo, escriba en el terminal firebase emulators:start y visite http://localhost:4000/. Consulte la Referencia de la CLI de Firebase y Conecte su aplicación al emulador de autenticación si aún necesita ayuda con la configuración.

CLI de emuladores de Firebase

  • Agrega un usuario de prueba al Firebase Emulator Auth.

Agrega usuario al emulador de autenticación

Vuelva a la aplicación, abra una nueva terminal e inicie el proyecto. Vas a notar que Firebase ha agregado un mensaje de advertencia para diferenciar el emulador del proyecto en producción, "Running in emulator mode. Do not use with production credentials".

Formulario de inicio de sesión

Comience a probar el sistema de autenticación; cuando llegue al mensaje "El correo electrónico ha sido enviado; ¡Revisa tu correo!", vaya a la consola, tome el enlace que ha generado el emulador y péguelo en la barra de direcciones de su navegador web, presione 'enter' y debería ver el formulario de restablecimiento de contraseña.

Enlace Firebase Emulator CLI

Después de cambiar su contraseña, regrese al emulador, presione actualizar y verifique que la contraseña ha sido cambiada. Notará que el usuario será verificado esta vez. Continue probando manualmente el enlace de restablecimiento de contraseña eliminando el oobCode, cambiándolo para un código diferente, y reutilizando el mismo enlace URL repetidamente, ¡sea creativo aquí y piense como un hacker!

Cómo funciona Firebase Reset Password en producción.

Cuando termine de probar el sistema de autenticación y esté listo para implementar su proyecto en producción, vaya a la consola de Firebase, Authentication, templates y password reset. Haga clic en editar 'template' y vaya a la parte inferior para personalizar el 'Action URL'. En el encacillado para anotar el 'Action URL', establezca la ruta a su 'Action URL landing page'; No incluya los parámetros mode y oobCode; Firebase los agregará dinámicamente. Si no sabe cómo crear una página de inicio de acción de usuario y un componente de orden superior para redirigir al usuario según la acción que el usuario desea lograr (restablecer la contraseña), revise: Cree una página de destino (Landing Page) para las acciones de usuario de Firebase ¡Hasta la próxima!

Customize Action URL Firebase

src/App.tsx