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

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

Denisse Avatar

Por:

Denisse Abreu
15 de enero de 2023 7pm ET

Eng/Spa 6-min

# Inicialice Firebase Authentication en la consola # Configure React TypeScript con Vite # Cree la carpeta de configuración de Firebase # Configure el Context de autenticación de React # Crea las Rutas para tu Sistema de Autenticación

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!