¿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

# 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. La segunda parte de este tutorial es ¿Cómo restablecer una contraseña en el sistema de autenticación de Firebase? en caso de que quieras revisarlo primero. 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. Visite ¿Cómo restablecer una contraseña en el sistema de autenticación de Firebase? si desea integrar el restablecimiento de contraseña de Firebase en este tutorial.