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

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

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!