¿Qué es Firebase?

Es un backend como servicio que nos ofrece Google. Está pensado para ser facilitar el desarrollo web y móvil.

Hace que se pueda crear, manejar y desplegar una base de datos de forma sencilla, viene con ciberseguridad de parte de Google y además es escalable.

Características principales

Servicios Integrados

• Autenticación
• Base de datos en tiempo real
• Almacenamiento de archivos
• Hosting
• Funciones en la nube
• Google Analytics

Ventajas Técnicas

• Infraestructura serverless
• Alta escalabilidad
• Seguridad administrada por Google
• Sincronización en tiempo real
• Multiplataforma

1. Crear un nuevo proyecto Vite con React

npm create vite@latest nombre-proyecto -- --template react

cd nombre-proyecto
npm install
npm run dev

Ahora lo que tenemos es una página de muestra con un contador. Obviamente no vamos a usar esto, así que eliminamos todo lo relacionado a esta muestra y hacemos lugar para nuestro propio código.

App.jsx

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Login from './Login'

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Login />} />
      </Routes>
    </Router>
  )
}

export default App

2. Instalar dependencias

npm install firebase react-router-dom

3. Crear y configurar proyecto de Firebase

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

1. Crear un nuevo proyecto
2. Ir a Authentication > Método de acceso y habilitamos login con Google
3. Ir a Descripción general > Web
4. Registrar una nueva aplicación web