¿Cómo crear un sistema de autenticación con Firebase y React?

Por:
Denisse Abreu
15 de enero de 2023 7pm ET
Eng/Spa 6-min
Hola 👋🏼, ¡decidí empezar este año con Firebase! Comenzaremos este tutorial
creando un formulario de inicio de sesión simple con React y TypeScript y luego lo conectaremos al servicio de autenticación de Firebase usando correo electrónico y contraseña.
Para este proyecto, necesitará una aplicación web de Firebase; si no tiene un proyecto de Firebase, siga las
instrucciones para añadir Firebase a su proyecto.
Nuestro entorno de trabajo es Vite, React Router Dom y React Context.
Empecemos!
Inicialice Firebase Authentication en la consola.
Después de crear un proyecto de Firebase, suministre el servicio de autenticación yendo a la pestaña "Build" en la barra lateral izquierda de la consola de Firebase, luego habilite el inicio de sesión con correo electrónico y contraseña, y agregue un usuario de prueba.
Imagen del panel de control de Firebase
Imagen de usuarios de autenticación de Firebase
Configure React TypeScript con Vite.
- Instale Vite y elija React TypeScript como su plantilla.
Terminal
npm create vite@latest auth-tutorial -- --template react-ts
cd auth-tutorial
npm install
npm run dev
Después de comprobar que su aplicación funciona, instale React Router Dom y Firebase; corrobora el Tutorial de React Router Dom para más información.
Terminal
npm install react-router-dom firebase
Cree la carpeta de configuración de Firebase.
Antes de interactuar con React, debemos establecer nuestra configuración de Firebase.
Cree una carpeta firebase
y
dentro crea dos archivos: firebase-config.ts
y firebase.ts
Git Bash
cd src
mkdir firebase
cd firebase
touch firebase-config.ts && touch firebase.ts
-
Copie el siguiente código en su
firebase-config.ts
, y reemplaza las variables por las tuyas.
src/firebase/firebase-config.ts
- No hay necesidad de escribir los "types" a las variables de configuración; como puedes ver, TypeScript las inferirá automáticamente.
Objeto de configuración de Firebase
-
Lleva el
firebase-config.ts
al Archivo de Firebase, para que pueda comenzar a hacer llamadas a Firebase.
src/firebase/firebase.ts
Configura el contexto de autenticación de React.
Al construir un sistema de autenticación con React o cualquier aplicación Javascript, es crucial utilizar algún tipo de almacenamiento (storage) para seguir el estado del usuario (user state). En este tutorial, Estoy usando el Context porque es liviano y no requiere demasiada configuración; Si está creando una aplicación compleja, use Redux en su lugar.
Primero, crea una carpeta context
y auth-context.tsx
;
luego inicialice el estado de usuario actual como nulo.
Cuando el usuario haga clic en el botón de cerrar sesión,
redirijalo a la página de inicio (home page).
Git Bash
cd src
mkdir context
cd context
touch auth-context.tsx
src/context/auth-context.tsx
Cree las Rutas para su Sistema de Autenticación.
En la última parte de este tutorial, trabajaremos en el enrutamiento y la interfaz de inicio de sesión.
Primero, vaya a main.ts
y traiga el Contexto y el
BrowserRouter
de React Router Dom.
src/main.tsx
- Cree una página de inicio y una página de perfil en la carpeta de rutas.
Git Bash
cd src
mkdir routes
cd routes
touch home.tsx && touch profile.tsx
src/routes/home.tsx
src/routes/profile.tsx
-
Lleve las dos rutas a
App.tsx
.
src/App.tsx
En el ejemplo anterior, usamos currentUser
para evitar que las personas
accedan a la página de perfil a través de la URL. Otra forma de hacer esto
es mediante el uso de un componente de orden superior (HOC) que envolverá la ruta de perfil
y verificará si hay un usuario activo antes de permitir que las personas entren
a esa página.
- Cree una carpeta de componentes y, dentro, cree require-auth.
Git Bash
cd src
mkdir components
cd components
touch require-auth.tsx
src/components/require-auth.tsx
Refactorice App.tsx
para usar el HOC.
src/App.tsx
Este HOC es reutilizable y le dará más flexibilidad al escoger las rutas que desea proteger de usuarios malintencionados. Este HOC también guardará el historial del enrutador, redirigirá al usuario a la página que quería acceder después de un inicio de sesión exitoso; para obtener más información sobre el enrutador de autenticación, vaya a Remix Github. ¡Hasta la próxima!