Cómo crear un inicio de sesión en Firebase y registrarse en React

Firebase es un sistema que ofrece muchas plataformas para que los desarrolladores creen aplicaciones web. Uno de los elementos esenciales en una aplicación es crear usuarios y permitirles iniciar sesión. Veamos cómo podemos escribir un inicio de sesión de Firebase que sea completo pero muy simple de implementar.

Crea tu aplicación Firebase

Primero debe crear un proyecto de aplicación de Firebase, así que diríjase a la consola de Firebase y agregue un nuevo proyecto. Agregará la aplicación aquí.

https://console.firebase.google.com/

Lanzará un asistente que te preguntará el nombre del proyecto.

La siguiente pantalla le preguntará si desea habilitar el análisis. Desactívelo y haga clic en el botón Crear proyecto. Tomará un tiempo aprovisionar su proyecto y luego obtendrá un botón para Continuar que lo llevará a la descripción general del proyecto.

Ahora debe agregar una aplicación de Firebase al proyecto de Firebase. ¿Tiene sentido? Un proyecto de Firebase le permite contener varias aplicaciones de Firebase para iOS, Android, Web y Unity. Por ahora, creemos una aplicación web ya que usaremos React para crear nuestro inicio de sesión de Firebase.

Se le pedirá que asigne un nombre a esta aplicación y se le darán las claves que deberá usar para conectarse con Firebase. Se verán algo como:

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Usaremos estas claves en nuestra aplicación React para configurar un proveedor que nos permitirá acceder a Firebase en cualquier componente del proveedor.

Finalmente, vaya a Autenticación en la barra lateral izquierda, la pestaña Método de inicio de sesión y habilite la autenticación de correo electrónico/contraseña .

¡Estás listo!

Instalar dependencias de Firebase

Firebase está disponible para diferentes pilas, incluidas JavaScript y Node.js, que es lo que vamos a usar ahora. Vamos a instalar solo dos dependencias con npm:

• firebase, que nos permitirá acceder a cosas como la authbiblioteca, que usaremos para realizar el inicio de sesión y también crear un nuevo usuario
• reactfire, una colección de herramientas útiles para trabajar con Firebase en React. Los usaremos useFirebaseApppara conectarnos al contexto y acceder a Firebase.

Vamos a instalarlos con

npm i firebase reactfire

La estructura de la aplicación React será muy simple, de la siguiente manera:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

y estarán relacionados de la siguiente manera:

Configurar el proveedor de Firebase

¡Escribamos el primer archivo para el inicio de sesión y el registro de Firebase! En realidad, no necesitamos escribirlo, porque esto debe agregarse al archivo donde está emitiendo ReactDOM.render(), en nuestro caso será index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

Esto importa FirebaseAppProvidery agrega las claves de configuración que le pasarás. Ahora puede envolver el componente raíz, que en nuestro caso es Appcon el proveedor:

ReactDOM.render(, document.getElementById('root')
);

¡Excelente! ¡Ahora todos los componentes a continuación podrán acceder a Firebase!

Use el componente de inicio de sesión y registro de Firebase

Escribamos ahora el Appcomponente donde importaremos y usaremos el FirebaseUsercomponente para crear e iniciar sesión en un usuario. No hay nada realmente relacionado con Firebase aquí. Vamos a implementar un inicio de sesión y registro usando el mismo componente para que pueda ver cómo podemos reutilizar el código, por lo que en este componente implementaremos un par de botones que, al hacer clic, mostrarán el FirebaseUsermodo de inicio de sesión o un modo de registro:

Configure el inicio de sesión de Firebase y regístrese

Crearemos un componente para esto. Primero necesitamos importar algunos módulos:

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Veremos useStatealgunas cosas, desde saber si el usuario está autenticado hasta establecer errores. Vamos a usar el useFirebaseAppgancho para acceder a la conexión de Firebase. Esto solo es posible porque configuramos el proveedor de Firebase en el paso anterior y solo está disponible en la jerarquía donde se agregó. Finalmente, importaremos la authbiblioteca para que podamos llamar a los métodos de Firebase para crear usuarios e iniciar sesión. Esta es una forma eficiente porque solo estamos cargando esta biblioteca, y no otras como firestorepara la base de datos NoSQL o messagingpara mensajes y notificaciones.

A continuación, agregaremos un gancho rápido para administrar nuestros campos de entrada:

Y, por último, el componente completo, que desglosaremos a continuación para señalar las partes más interesantes, las relacionadas con el inicio de sesión y el registro de Firebase.

Primero, nos conectamos a la instancia de Firebase:

const firebase = useFirebaseApp();

Como se señaló anteriormente, esto es posible porque previamente empaquetamos el Appcomponente con el proveedor de Firebase. Ahora que estamos conectados a Firebase, podemos usar la authfuncionalidad y llamar a signInWithEmailAndPassword:

Cuando tenga éxito, establecerá los datos devueltos y los campos del formulario se reemplazarán con

Logged in as ${ auth?.user.email ?? '' }

Los datos devueltos son un objeto grande con propiedades muy interesantes, por lo que vale la pena agregar console.log()a nuestra setReceivedData()función para ver qué más incluye.

El proceso para crear un usuario es similar, excepto que usamos la función createUserWithEmailAndPassword().

Conclusión

Para probar nuestro inicio de sesión de Firebase y registrarse, puede intentar iniciar sesión con un usuario que no existe para que pueda ver los errores. Después de eso, cree un usuario y luego inicie sesión como usuario.

Demostración del inicio de sesión y registro de Firebase.
Dato curioso: Chrome se queja de que la contraseña 123456 que estoy usando para las pruebas está comprometida, lo cual es cierto.

Si ahora regresa a la aplicación Firebase > Autenticación > Usuarios, verá el nuevo usuario (es posible que deba usar el botón Actualizar junto a Agregar usuario).

En resumen, los pasos esenciales para integrar Firebase en nuestra aplicación React son:

• configure el proveedor de Firebase y envuelva el componente raíz (o la raíz de la jerarquía donde desea usarlo)
• enganche al proveedor de Firebase usandouseFirebaseApp
• ¡utilice las funciones de autenticación!

Consulte el repositorio de GitHub en https://github.com/eliorivero/firebase-login-sign-up. La única diferencia con este es que estoy cargando las claves para configurar Firebase desde un archivo .env para evitar exponerlas públicamente.

Si tiene alguna pregunta, hágamelo saber en los comentarios a continuación.