¿Cómo registrar usuarios con Firebase y React?

Por:

Denisse Abreu
25 de marzo del 2023 4pm ET

Eng/Spa 4-min

# Configure las funciones de creación de usuario de Firebase # Cree los componentes para la verificación de correo electrónico de Firebase # Cree una página de inicio para las acciones de usuario de Firebase

Hola 👋🏼, en este tutorial aprenderemos a registrar usuarios con el Sistema de autenticación Firebase y React. Si quieres revisar cómo iniciar sesión de usuarios y configurar el tutorial desde el principio, visite ¿Cómo crear un sistema de autenticación con Firebase y React?. Nuestro entorno de trabajo es Vite, React con TypeScript y Firebase.
¡Empecemos!

Configure las funciones de creación de usuario de Firebase.

En el archivo firebase.ts que creamos anteriormente, agregue la función createUserWithEmailAndPassword(). La información mínima para abrir una cuenta usando la autenticación de Firebase es el correo electrónico y contraseña; también puede recopilar el nombre de usuario generado como displayName, el número de teléfono y una foto alojada en algún lugar de la Internet.

En el siguiente código, cree el usuario, envíe la verificación por correo electrónico y actualice su perfil con el nombre y una imagen de ejemplo usando robohash.org.

src/firebase/firebase.ts

El siguiente código muestra cómo recopilar el código de verificación de correo electrónico enviado a la bandeja de entrada del usuario. Importe el applyActionCode() de Firebase y extraiga el oobCode de la URL. Una vez que el usuario se haya registrado correctamente, Firebase iniciará sesión automáticamente independientemente de su estado de verificación de correo electrónico.

src/firebase/firebase.ts

Cree las rutas y los componentes para la verificación de correo electrónico de Firebase.

Cree el register.tsx y confirmEmail.tsx.

Git Bash

  cd src
  cd routes
  touch register.tsx && touch confirmEmail.tsx

Recopile la información del usuario y recuerde validar las entradas (input) de acuerdo a las necesidades de su aplicación.

src/routes/register.tsx

Extraiga el oobCode de la URL y envíelo al archivo de Firebase a través del useEffect(). Elimine React StrictMode si la función se está ejecutando dos veces en desarrollo, o use la función cleanup para borrar el código después de ejecutarlo por primera vez. Obtenga más información sobre la función cleanup en los documentos de React.

src/routes/confirmEmail.tsx

Cree una página de inicio para las acciones de usuario de Firebase.

Al crear este tutorial, noté que Firebase solo permite una URL para todas las acciones del usuario como verificación de correo electrónico, restablecimiento de contraseña, etc. Para redirigir al usuario a la acción correcta (verificación de correo electrónico), necesitamos construir un componente de orden superior.

Cree un 'landing page' para las acciones del usuario. Vaya al folder routes y agregar authUserActions.tsx.

src/routes/authUserActions.tsx

Vaya a la carpeta de componentes, cree el auth-actions.tsx, y obtenga el 'mode' de la URL y el oobCode. Navegue a diferentes rutas según el 'mode' de URL. Recuerde, en este tutorial, nos estamos centrando en la verificación de correo electrónico.

src/components/auth-actions.tsx

Ahora que tenemos todos los componentes y rutas, agréguelos al Archivo App.tsx.

src/App.tsx

Para finalizar este tutorial, vaya al Firebase console, autenticación y personalice su plantilla de URL para que apunte a nuestra página de inicio de acciones de usuario. ¡Recuerde! Siempre puede probar este proceso de registro usando los Emuladores de Firebase, lo único que debes hacer es cambiar la ruta a emulator/action, y listo. ¡Hasta la próxima!

Action URL Firebase