i estàs muntant una aplicació amb React o React Native i vols afegir-hi login, base de dades en temps real o simplement deixar de preocupar-te pel backend, Firebase és una de les opcions més còmodes i potents que tens ara mateix . Et permet tenir autenticació, base de dades, emmagatzematge de fitxers i molt més sense aixecar ni una sola API pròpia.
En aquest article veurem, pas a pas, com connectar una app de React (i també React Native / Expo) amb Firebase , com estructurar el projecte, configurar l'autenticació per email i per Google, persistir la sessió d'usuari i llegir/escriure dades tant al Firestore com a la Realtime Database. Ho farem amb exemples reals i codi comentat, però explicant-ho en un llenguatge proper perquè puguis seguir-lo encara que no siguis un ninja encara.
Què és Firebase i per què encaixa tan bé amb React?
Firebase és un Backend es a Service de Google que et dóna una sèrie de serveis ja llestos per fer servir: autenticació, base de dades en temps real, Firestore (base de dades NoSQL documental), emmagatzematge d'arxius, analytics, eines de creixement, monetització, etc. Va néixer com una base de dades en temps real, però després de diverses iteracions s'ha convertit en una plataforma backend molt completa.
En lloc de muntar-te un servidor propi, dissenyar la teva API, gestionar la infraestructura i escalar-la, amb Firebase pots connectar la teva app de React directament al backend mitjançant el seu SDK oficial . Això significa que moltes de les tasques típiques de backend (auth, CRUD, regles de seguretat, notificacions, etc.) es resumeixen a unes quantes trucades a funcions JavaScript ben documentades.
La integració amb React és molt natural perquè Firebase exposa les vostres dades en format JSON i els seus SDKs estan pensats per treballar en client. Amb React simplement llegeixes aquestes dades, els fiques a l'estat dels teus components i deixes que la llibreria s'encarregui de renderitzar tot cada vegada que alguna cosa canviï. Quan uses els seus listeners en temps real, cada actualització a la base de dades dispara un re-render automàtic, la qual cosa encaixa com un guant amb el model declaratiu de React.
Crear i configurar un projecte de Firebase
Abans de començar a escriure codi a React, cal tenir llest l'entorn al Firebase. El procés és molt semblant tant si l'usaràs des d'una app web a React com des de React Native o Expo. En tots els casos, el primer pas és crear el projecte a la consola de Firebase.
Entra a https://firebase.google.com/ , inicia sessió amb el teu compte de Google i accedeix a la consola. Des d'aquí creeu un nou projecte , poseu-li un nom reconeixible (per exemple, “react-firebase” o “auth-firebase-react”) i seleccioneu la regió que tingui més sentit per a l'audiència de la vostra aplicació.
Un cop creat el projecte, Firebase us portarà al panell principal. Veureu diverses opcions per afegir aplicacions: iOS, Android i Web. En una app web amb React selecciones la icona de la web, mentre que per a React Native pots registrar apps iOS i/o Android segons necessitis. L'objectiu en tots els casos és obtenir una configuració de Firebase amb claus com apiKey, authDomain, projectId i similars.
La consola us mostrarà un fragment de codi amb una cosa semblant a:
const config = { apiKey: "AIzaSy*", authDomain: "tu-proyecto.firebaseapp.com", databaseURL: "https://tu-proyecto.firebaseio.com", projectId: "tu-proyecto", storageBucket: "tu-proyecto.appspot.com", messagingSenderId: "796"};firebase.initializeApp(config);A React web realment només necessites l'objecte de configuració i la trucada a initializeApp ** usant el SDK modular actual. Més endavant veuràs com encaixar això a la teva estructura de projecte.
Escollir base de dades: Realtime Database vs Firestore
Firebase us ofereix dos tipus de base de dades principals: la Realtime Database i Cloud Firestore . Totes dues són NoSQL, però tenen diferències importants en model de dades, consultes i forma de facturar.
La Realtime Database és una base de dades en format JSON gegant, on tot penja d'un únic arbre. És ideal quan necessites actualitzacions molt ràpides i sincronització en temps real senzilla. L'estructura es basa en nodes i rutes, i hi accedeixes amb referències com firebase.database().ref('object/name'). És l'opció clàssica si vols alguna cosa xat, presència d'usuaris o dades molt simples.
Firestore, per la seva banda, organitza la informació en col·leccions i documents . Cada document té camps i pots niar subcol·leccions al seu interior. Permet consultes més complexes, índexs compostos, ordenacions i filtres combinats. És perfecta per a aplicacions una mica més grans on necessitis consultes flexibles, escalabilitat i regles de seguretat més expressives.
Ambdues bases de dades es poden utilitzar des de React sense problema, i fins i tot a la mateixa app. Per exemple, pots guardar usuaris, posts o tasques al Firestore i aprofitar la Realtime Database per a alguna dada molt dinàmica que vulguis escoltar de forma constant. L'important és que tinguis clar que a React només cal escoltar els canvis i actualitzar l'estat , la resta ho fa Firebase per tu.
Crear una app React Native / Expo amb Firebase
Si en el teu cas treballes amb React Native, pots integrar Firebase usant el SDK Web de Firebase , que és perfectament compatible amb projectes creats amb Expo o amb el CLI oficial de React Native. D'aquesta manera no et lligues a llibreries intermèdies i et mantens en allò que Google suporta oficialment.
Per començar amb Expo, instal·leu globalment el CLI d'Expo des de la terminal usant npm install -g expo-cli. Després, crea un nou projecte de React Native amb expo init, tria una plantilla bàsica (per exemple, “blank” amb workflow gestionat) i arrenca l'app amb yarn ios o yarn android. Expo et mostrarà un codi QR que pots escanejar amb la càmera a iOS o amb l'app d'Expo a Android per veure el teu projecte al dispositiu.
Quan tens la teva app base corrent, afegeix les dependències necessàries: en primer lloc el propi SDK de Firebase, amb yarn add firebase. Després pots incorporar llibreries de navegació com @react-navigation/native y @react-navigation/stack, juntament amb els paquets addicionals que necessiten a React Native (gesture-handler, reanimated, screens, safe-area-context, etc.) per gestionar els fluxos entre pantalles de login, registre i home.
És també molt útil instal·lar alguns components auxiliars per a la UI mòbil, per exemple react-native-keyboard-aware-scroll-view per manejar bé el teclat en formularis, i llibreries com a base-64 per suplir funcions globals que falten en alguns runtimes mòbils (btoa, atob, etc.). Tot això s'afegeix amb una única ordre d'instal·lació usant iarn al vostre projecte.
Configura Firebase a React / React Native
La configuració de Firebase la centralitzaràs en un únic fitxer, de manera que la resta de l'aplicació només hagi d'importar una instància ja inicialitzada. Crea, per exemple, una carpeta src/firebase i dins un fitxer de configuració, com config.js (o config.ts a TypeScript).
En aquest fitxer importa les funcions necessàries del SDK del Firebase i defineix el teu objecte de configuració amb els valors que et va donar la consola del Firebase. En projectes React Native que utilitzen l'SDK antic pots veure alguna cosa com:
import * as firebase from 'firebase';import '@firebase/auth';import '@firebase/firestore';const configuracionFirebase = { apiKey: 'TU_CLAVE_API', authDomain: 'tu-dominio-auth.firebaseapp.com', databaseURL: 'https://tu-bd.firebaseio.com', projectId: 'tu-id-proyecto', storageBucket: 'tu-id-proyecto.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:codigoapp'};if (!firebase.apps.length) { firebase.initializeApp(configuracionFirebase);}export { firebase };El projectes web amb Vite i TypeScript se sol fer servir la versió modular de l'SDK de Firebase 9, i és bona pràctica col·locar els valors sensibles a variables d'entorn. Per exemple, podeu crear un fitxer .env a l'arrel i definir claus com VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, etc. Després, a l'arxiu de configuració, construeixes l'objecte a partir de import.meta.env['VITE_FIREBASE_API_KEY'] i similars.
Sigui quin sigui l'enfocament, el patró és el mateix: inicialitzeu només una vegada l'app de Firebase i exporteu aquesta instància (o bé exporteu objectes concrets com Firebase Auth , Firestore o Realtime Database ) per usar-la fàcilment a la resta del projecte.
Arquitectura bàsica de pantalles: login, registre i home
Quan integres autenticació a una app de React Native, una estructura molt habitual és tenir tres pantalles principals: Login, Registre y Inici (Home). A més, pots centralitzar la lògica de navegació en un únic component arrel, normalment App.js.
A React Native amb React Navigation, el més típic és crear una carpeta src/screens amb subcarpetes per pantalla (LoginScreen, RegistrationScreen, HomeScreen) i un fitxer d'índex que exporti cadascuna. Després, a App.js, creeu un stack navigator que mostri una o altra pantalla segons existeixi usuari autenticat o no.
La idea és desar a l'estat del component App un user (o null) i un flag de càrrega. Mentre s'està comprovant l'estat d'autenticació, podeu mostrar una pantalla buida o un lloader. Quan sabeu si l'usuari ha iniciat sessió, decideixes quines rutes ensenyar: si hi ha usuari, mostris la pantalla inicial, si no n'hi ha, les pantalles de login i registre.
Visualment, les pantalles de login i registre són formularis senzills amb camps com ara email, contrasenya i, en el cas del registre, nom complet o confirmació de contrasenya. Per millorar l'experiència en mòbil, se sol embolicar tot amb un KeyboardAwareScrollView perquè el teclat no tapi els inputs. El Home, per la seva banda, pot començar com una vista mínima (un simple text) i més endavant evolucionar a la part de l'app on ja llegeixes i escrius dades de Firestore.
Disseny i gestió de formularis amb hooks a React
En una aplicació de React web amb TypeScript, una forma neta de gestionar formularis d'autenticació és encapsular la lògica en un custom hook. Per exemple, podeu crear useForm.tsx en una carpeta src/hooks, que rebi un estat inicial genèric (un objecte amb les propietats del formulari) i torni tant els valors com una funció per manejar els canvis.
Aquest hook pot utilitzar useState internament per emmagatzemar el formulari i exposar una funció handleChange que rebeu l'esdeveniment de l'input, llegiu l'atribut nom de l'element i actualitzeu la propietat corresponent a l'estat. D'aquesta manera, tenir els name ben posats als inputs (per exemple, name="email" y name="pass") és clau perquè tot funcioni.
Al component de login, per exemple, trucaries a useForm({ email: '', pass: '' }) i obtindries el correu electrònic, el pass, l'objecte form i la funció handleChange. Cada input tindria la seva valor y canviem lligats a aquests valors ia la funció del hook. En enviar el formulari, tindries un handleSubmit que fa e.preventDefault() i després truca a la lògica d'autenticació amb Firebase.
El mateix s'aplica al formulari de registre; fins i tot podries extreure un component de formulari reutilitzable, atès que moltes vegades només canvien el text dels botons i el callback que s'executa al submit, mentre l'estructura bàsica és igual.
Configurar l'autenticació al Firebase
Perquè React pugui autenticar-se contra Firebase, a la consola de Firebase cal habilitar els proveïdors d'autenticació. Des de la secció Autenticació , entreu a la pestanya de mètodes d'accés ( Sign-in method ) i activeu el correu electrònic / contrasenya i, si us interessa, el proveïdor de Google.
Al proveïdor de correu electrònic/contrasenya només cal marcar-lo com a habilitat i desar. Al de Google, a més d'habilitar-lo, haureu de seleccionar el correu que s'usarà per defecte. A partir d'aquí, el vostre projecte quedarà preparat per acceptar inicis de sessió amb tots dos mètodes.
A la pestanya d'usuaris ( Users ) de la mateixa secció aniràs veient com es registren els comptes nous que es creïn des de la teva aplicació, ja sigui amb correu electrònic i contrasenya o mitjançant Google. És un bon lloc per comprovar que la integració camp a camp funciona com toca.
Funcions d'autenticació amb Firebase a React
En una app web amb React i TypeScript és recomanable agrupar tota la lògica d'autenticació en un fitxer de serveis, per exemple src/firebase/services.ts . Aquí podeu tenir funcions específiques per a cada acció: login amb Google, login amb credencials, registre, tancament de sessió i un observador de l'estat d'autenticació.
Per utilitzar el proveïdor de Google, el primer és crear una instància de GoogleAuthProvider (o proveïdor equivalent segons el teu cas), i després definir una funció asíncrona que truqui a signInWithPopup(FirebaseAuth, provider). Si aquesta trucada té èxit, rebreu un objecte amb l'usuari autenticat, del qual podeu extreure uid, displayName, photoURL i altres camps. Moltes vegades n'hi ha prou de treballar amb el uid i tornar-lo per establir la sessió global.
Per a l'autenticació mitjançant correu electrònic i contrasenya tens dues funcions clau: createUserWithEmailAndPassword y signInWithEmailAndPassword. Totes dues esperen la instància de FirebaseAuth, el correu electrònic i la contrasenya. La primera crea usuaris nous, la segona verifica que existeixin i els autentica. Internament, Firebase s'encarrega de validar el format de correu electrònic, longitud de la contrasenya i altres, retornant errors clars que pots interceptar en un bloc provar / atrapar i mostrar amb un simple alert o amb el teu propi sistema de notificacions.
Per tancar sessió només heu d'usar signOut(FirebaseAuth) , cosa que també podeu encapsular en una funció del vostre servei per mantenir l'API del vostre codi més neta i coherent.
Observar els canvis de sessió amb onAuthStateChanged
Un problema molt típic quan comences amb autenticació és que, encara que el login funcioni, en recarregar la pàgina de la teva app React o en tancar i tornar a obrir l'app mòbil, sembla que s'ha perdut la sessió . Tot i això, Firebase té persistència per defecte de l'estat d'autenticació: simplement no l'estàs llegint correctament.
La solució és utilitzar la funció onAuthStateChanged de l'SDK de Firebase Auth. Aquesta funció rep la instància d'autenticació i un callback que s'executarà cada cop que canvieu l'estat: quan l'usuari inicia sessió, quan la tanca o quan l'app s'inicialitza i el Firebase recupera les credencials desades.
En una app React el més normal és crear una funció, per exemple observeAuthState, que rebi un setter d'estat (com setSession) i dins truqui a onAuthStateChanged(FirebaseAuth, user => { ... }). En aquest callback, si user és null o undefined, estableixes la sessió global com a no autenticada; si hi ha usuari, guardes la seva uid i marques l'estat com a autenticat.
Aquest observador se sol disparar dins un useEffect al punt més alt de l'app (per exemple, en un context) perquè s'executi una sola vegada quan l'aplicació es munta. Així aconsegueixes que, encara que l'usuari recarregui el navegador, si Firebase té la sessió recordada, el teu estat global s'actualitzi automàticament i l'enviïs directament a la part privada de l'app sense demanar-li de nou les credencials.
Context global d'autenticació a React
Per no anar passant props d'un component a un altre, una estratègia molt còmoda a React és crear un context API específic per a l'autenticació . D'aquesta manera, qualsevol part de l'app pot saber si l'usuari està autenticat, quina és la vostra uid i quines funcions té disponibles (login, logout, etc.) sense necessitat de prop drilling.
Comença creant una carpeta src/context i dins un fitxer, per exemple authContext.tsx. Aquí defineixes una interfície que descrigui el que exposarà el teu context: el estat de la sessió (per exemple, 'checking', 'authenticated', 'no-authenticated'), el ID d'usuari (o null si no hi ha usuari) i les funcions per iniciar o tancar sessió.
A continuació, defineix un estat inicial, amb status a 'checking' i userId a null, i crea el context amb createContext. Després, construeix un component AuthProvider que rebi children, use useState per gestionar la sessió i truqui a la teva funció observeAuthState en un useEffect en muntar-se.
Dins d'aquest proveïdor és útil tenir funcions auxiliars: una per tancar sessió que truqui al teu servei logoutFirebase i deixi l'estat com a no autenticat, una altra per forçar l'estat a 'checking' quan arrenques un flux d'autenticació, i una altra per validar el resultat d'un login/registre (si reps un uid, marques; resta de sessió).
Amb això, pots implementar tres accions públiques en el context: handleLoginWithGoogle, handleLoginWithCredentials y handleRegisterWithCredentials. Cadascuna arrencarà el “checking”, invocarà la funció de servei corresponent i delegarà la decisió final en la validació comuna que has creat. Al final, el AuthContext.Provider exposarà tant l'estat (status, userId) com aquestes funcions, i embolicaràs la teva app a AuthProvider a l'arxiu arrel (per exemple, a src/main.tsx).
Ús del context en components de login, registre i home
Un cop tinguis llest el context d'autenticació, fer-lo servir en els teus components és molt senzill. Al component Login.tsx, importa useContext, Accedeix a l' AuthContext i extreu, per exemple, les funcions handleLoginWithCredentials y handleLoginWithGoogle. Al submit del formulari de login trucaràs a la primera, passant-li l'email i la contrasenya des del teu hook useForm, mentre que el botó exclusiu de “Iniciar sessió amb Google” llançarà la segona al seu esdeveniment onClick.
Per al component Register.tsx faràs una cosa molt similar, però usant només handleRegisterWithCredentials . El formulari demanarà els mateixos camps (email i password), o alguns més si vols, i en fer el submit, la lògica del context serà la responsable de crear l'usuari i actualitzar l'estat global.
Al component principal App.tsx , també consumiràs el context per llegir l' estatus i l' userId . Mentre el status sigui checking, pots mostrar un petit missatge de càrrega o pantalla de transició. Quan el status canviï, si està autenticat i hi ha un userId vàlid, mostraràs un component tipus HomePage on ensenyis contingut només per a usuaris loguejats (per exemple, el seu uid i un botó de tancar sessió que truqui a handleLogOut ). Si l'estatus indica que no està autenticat, renderitzeu un component tipus AuthPage que inclogui els vostres formularis de Login i Register.
Registre i inici de sessió amb Firebase Auth a React Native
A React Native, encara que l'estructura tècnica difereix de la web, el patró conceptual és el mateix. A la pantalla de registre (RegistrationScreen), tindràs un estat local per fullName, correu electrònic, contrasenya y confirmPassword. En prémer el botó de crear compte, comproves que les contrasenyes coincideixen i, si tot quadra, crides a firebase.auth().createUserWithEmailAndPassword(email, password).
Quan el Firebase crea el compte, podeu desar informació addicional de l'usuari a Firestore, en una col·lecció users, col·locant com a id del document el uid que torna Firebase. D'aquesta manera tens un punt central on desar nom complet, foto de perfil o altres dades personalitzades que no caben a la taula d'autenticació estàndard. Si tota la cadena funciona, navegueu a la pantalla inicial passant l'objecte d'usuari com a paràmetre.
A la pantalla de login (LoginScreen), importes igualment Firebase i uses firebase.auth().signInWithEmailAndPassword(email, password). Un cop reps la resposta amb l'usuari, pots llegir les seves dades ampliades des del Firestore utilitzant el uid, i si aquest document existeix, navegar a Home amb aquest usuari a la navegació. Si la consulta no torna res perquè l'usuari ha estat esborrat al Firestore, avisaràs l'usuari i evitaràs seguir endavant.
Persistència de sessió a React Native amb onAuthStateChanged
Igual que a la web, a React Native és molt molest que l'usuari hagi d'iniciar sessió cada cop que obre l'app. Firebase Auth també s'encarrega de recordar l'inici de sessió i permet recuperar l'usuari actual mitjançant aquest onAuthStateChanged. En aquest entorn, la lògica sol col·locar-se al component App o en un context similar al de la web.
Utilitzes un useEffect que s'executa una sola vegada en muntar el component i dins crides a firebase.auth().onAuthStateChanged. Si al callback reps un usuari, busques el document corresponent a la col·lecció users de Firestore i, quan ho obtens, actualitzes l'estat user i desmarques el flag de loading. Si no hi ha usuari autenticat, simplement poses loading a false i deixes user a null, cosa que provocarà que l'arbre de navegació mostri les pantalles públiques.
Amb aquest patró aconsegueixes que, si l'usuari va obrir l'app fa una estona i la va deixar en segon pla, o si la tanca i la torna a obrir, segueixi apareixent directament a la pantalla Home mentre el token de sessió segueixi sent vàlid, cosa que millora moltíssim l'experiència d'ús sense que tu hagis de manejar tokens manualment.
Lectura i escriptura de dades a Firestore des de React Native
Un cop resolta la part d'autenticació, toca fer alguna cosa útil amb la base de dades. Un exemple molt típic és crear una pantalla Home que permeti a l'usuari afegir elements de text a una col·lecció i llistar-los en temps real . Imagina't que aquests elements són tasques, notes o publicacions ràpides, i que vols que només vegi les seves.
A la pantalla Home, declares un estat per al text actual (entityText) i un altre per a la llista d'entitats (entities). També crees una referència a la col·lecció de Firestore, per exemple entityRef = firebase.firestore().collection('entities'), i deseu l'ID de l'usuari autenticat (per exemple. userID = props.extraData.id).
D'aquí a un useEffect, estableixes un listener en temps real amb entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc').onSnapshot(...). Aquest callback es dispara cada cop que canvia alguna cosa en els documents que compleixen aquesta condició. Recorreu els documents del snapshot, construïu un array amb el contingut de cada entitat, incloeu l'id del document i actualitzeu l'estat entitats amb aquest nou array. Gràcies a això, el FlatList que utilitzeu per mostrar les entitats es renderitzarà amb les dades més recents.
Per afegir elements nous, creeu una funció onAddButtonPress que verifica que entityText no estigui buit, genera un timestamp de servidor amb firebase.firestore.FieldValue.serverTimestamp() i truca a entityRef.add({ text: entityText, authorID: userID, createdAt: timestamp }). Si l'operació té èxit, podeu netejar el camp de text i tancar el teclat; El Firestore s'encarregarà de llançar un nou snapshot que farà aparèixer el nou element a la llista.
És possible que en utilitzar filtres i ordenacions combinats, Firestore us exigeixi crear un índex compost. Si això passa, als logs veureu un avís amb un enllaç directe a la consola del Firebase per crear aquest índex amb un sol clic. Un cop creat, les consultes que barregen where y orderBy funcionaran sense problemes.
Connectar React web amb Firebase Realtime Database
A més de Firestore, podeu necessitar treballar amb la base de dades Realtime de Firebase des d'una app web feta amb React. El flux general és: inicialitzes Firebase amb la configuració del teu projecte, importes la llibreria de firebase/database i crees referències als nodes que t'interessin, com object/name. Ve molt bé per a escenaris on vols veure canvis reflectits a l'instant a la interfície.
Imagina que a la consola de Firebase crees un node object amb una propietat name el valor del qual sigui “Carlos”. A la teva app React defineixes un estat local name amb un valor inicial, per exemple “Pepe”, i renderitzes un <h1>{this.state.name}</h1> (si uses components de classe) o l'equivalent amb hooks.
En el mètode del cicle de vida componentDidMount (O en un useEffect amb dependència buida en components funcionals), crees una referència amb firebase.database().ref().child('object').child('name') i afegeixes un listener de tipus on('value', snapshot => { ... }). Cada cop que es dispari l'esdeveniment value, rebràs un snapshot amb el valor actual del node; fas un setState amb snapshot.val() i React s'encarrega de rerenderitzar el text. Canvieu el nom a la consola de Firebase i el veieu a l'instant al vostre navegador.
Perquè això funcioni sense autenticació, al panell de Realtime Database has d'ajustar les regles de seguretat permetent lectura i escriptura públiques durant el desenvolupament (per exemple, establint read i write a true). Això sí, és important que en producció restringeixis aquestes regles, normalment exigint que l'usuari estigui autenticat o aplicant condicions sobre la ruta o el uid per no deixar la teva base de dades oberta al món.
Últimes consideracions
Amb aquest patró bàsic pots construir infinitat de casos dús: indicadors de presència, comptadors compartits, panells en temps real o petites apps de demostració on la interactivitat hagi de ser immediata entre clients.
Com veus, combinar React (tant a web com a mòbil) amb Firebase et permet aixecar projectes amb autenticació, base de dades i lògica en temps real de manera molt àgil, recolzant-te en hooks, contextos i listeners en temps real per sincronitzar l'estat visual amb el que passa al backend gestionat per Google. Aquesta barreja de rapidesa de desenvolupament i escalabilitat fa que, per a molts projectes, no tingui sentit reinventar tota la capa de servidor quan et pots centrar en l'experiència d'usuari i deixar que Firebase s'encarregui de la resta.