Kako korak po korak povezati React sa Firebase-om

Povezivanje Reacta s Firebaseom postalo je jedna od najpogodnijih kombinacija za izradu web i mobilnih projekata bez muke s kreiranjem backenda od nule. Firebase pruža autentifikaciju, bazu podataka, pohranu i mnoštvo usluga spremnih za korištenje, dok React omogućava izgradnju brzih i responzivnih interfejsa.

U ovom članku ćete korak po korak vidjeti kako integrirati Firebase s React web aplikacijama (uključujući Vite + TypeScript) i s React Native i Expo, pokrivajući ključne tačke : kreiranje projekta u Firebaseu, konfigurisanje SDK-a, autentifikaciju putem e-pošte i Google-a, upravljanje stanjem sesije, korištenje Context API-ja i čitanje/pisanje u Realtime Database i Firestore.

Šta je Firebase i zašto se tako dobro uklapa sa Reactom?

Firebase je Googleova platforma koja nudi paket backend usluga "kao uslugu": autentifikaciju, NoSQL baze podataka (Realtime Database i Firestore), pohranu datoteka, analitiku, push poruke i još mnogo toga. Umjesto postavljanja vlastitog servera, koristite njihovu infrastrukturu i pristupate joj s frontenda koristeći službene SDK-ove.

U React projektima, ovo savršeno funkcioniše jer klijent direktno komunicira sa Firebaseom : React upravlja interfejsom i tokom aplikacije, a Firebase upravlja korisnicima, podacima i dozvolama. Možete zaboraviti na postavljanje vlastitih REST API-ja ili WebSocketsa za uobičajene potrebe.

Historijski gledano, Firebase je započeo kao baza podataka u realnom vremenu „kao usluga“, ali od Google I/O 2016 proizvod se proširio i postao vrlo kompletan backend: možete autentificirati korisnike, spremiti njihove podatke u JSON ili kolekcije dokumenata, pohraniti slike, slati obavještenja itd.

Ključ za integraciju s Reactom (web ili Native) je razumijevanje kako inicijalizirati SDK, kako zaštititi javne ključeve pomoću varijabli okruženja, kako osluškivati ​​promjene u korisničkoj sesiji i kako strukturirati aplikaciju tako da stablo komponenti prima stanje autentifikacije tamo gdje vam je potrebno.

Kreirajte projekat u Firebaseu i omogućite autentifikaciju

Prvi korak je uvijek putem Firebase konzole. Idite na firebase.google.com , prijavite se sa svojim Google računom i pristupite konzoli. Odatle možete kreirati i upravljati svojim projektima.

para kreiraj novi projekatKliknite na „Dodaj projekat“ (ili „Kreiraj projekat“), dajte mu prepoznatljivo ime, na primjer auth-firebase-react o react-firebaseOdaberite zemlju ili regiju koja najbolje odgovara vašoj publici i potvrdite kreiranje. Ako vam je potreban praktičan vodič za početak, pogledajte Započnite svoje projekte s Firebase StudiomNakon nekoliko sekundi, vaša kontrolna ploča će biti spremna.

Unutar projekta vidjet ćete nekoliko ikona za registraciju aplikacija: iOS, Android i Web. Za tradicionalnu React aplikaciju (SPA u pregledniku), trebali biste odabrati ikonu za web . U React Nativeu, morat ćete registrirati iOS i/ili Android aplikacije s odgovarajućim identifikatorima paketa.

Kada registrujete web aplikaciju, biće vam prikazana JavaScript konfiguracijski objekt koji sadrže apiKey, el authDomain, URL-ovi baze podataka i pohrane, projectIditd. Primjer se također pojavljuje sa firebase.initializeApp(config)Taj blok je ono što ćete kasnije prilagoditi svom React ili React Native projektu.

Prije pisanja bilo kakvog koda, preporučljivo je konfigurirati autentifikaciju . U bočnom meniju konzole idite na "Build > Authentication". Odatle idite na karticu "Sign-in method" i omogućite barem sljedeće:

• Email adresa/lozinka, odabirom opcije „Omogući“ i spremanjem promjena.
• Google kao OAuth provajder, također aktiviranjem metode i odabirom vaše primarne e-pošte.

U kartici „Korisnici“ vidjet ćete sve račune koji se registriraju putem vaše aplikacije s Firebase Auth, bilo da se radi o e-pošti i lozinki ili o vanjskim pružateljima usluga poput Googlea.

Pripremite React projekat koristeći Vite i TypeScript

Za modernu React aplikaciju, Vite je vrlo praktičan alat . Brzo pokreće i pokreće projekat i podržava TypeScript uz minimalnu konfiguraciju. Ideja je kreirati osnovni projekat, a zatim dodati komponente, hooks-ove i Firebase integraciju.

Tipičan tok bi bio ovaj:

1. Generirajte projekat pomoću Vite-a odabirom React + TypeScript predloška.
2. Unesite novokreiranu mapu.
3. Instalirajte zavisnosti.
4. Otvorite projekat u vašem omiljenom editoru (na primjer, VS Code).

Minimalna struktura foldera koja vam je potrebna za integraciju autentifikacije može izgledati otprilike ovako:

• src/components para Login, Registuj se i druge komponente za višekratnu upotrebu.
• src/hooks za prilagođene kuke kao što su useFormular.
• src/firebase gdje ćete skladištiti config.ts y usluge.ts.
• src/context za Kontekst autentifikacije i vašeg dobavljača.

Nakon što je kostur kreiran, možete ga pojednostaviti App.tsx ostavljajući samo najosnovniji minimum (naslov ili kontejner) za umetanje obrazaca za prijavu/registraciju i logike autentifikacije.

Dizajnirajte obrasce za prijavu i registraciju u Reactu

Za klasični tok autentifikacije, obično su dovoljna dva ekrana ili komponente: jedan za prijavu i drugi za registraciju korisnika. U jednostavnoj aplikaciji, možete ih čak i montirati kao komponente unutar istog prikaza bez korištenja rutera.

Formular za prijavu obično sadrži dva polja:

• E-mail (tip email o text sa validacijom).
• lozinka (tip password).

Svaki ulaz treba da ima atribut name Trebalo bi biti dobro definirano, jer ćete ga kasnije koristiti za mapiranje promjena obrasca na vaše interno stanje. Osim toga, prijava može uključivati ​​dva dugmeta:

• Tradicionalno dugme za slanjesa type="submit", što će aktivirati onSubmit forme.
• Dugme za prijavu na Googlesa type="button" kako bi se spriječilo slanje obrasca i umjesto toga jednostavno pozivanje funkcije za prijavu na Google.

Komponenta registracije je vrlo slična

Iako obično ima samo jedno dugme za slanje; glavna polja su ponovo e-pošta i lozinka, ali možete dodati puno ime ili druge podatke ako ih želite pohraniti u Firestore.

para olakšati uvoz Stvaranje "arhiva bačvi" je dobra ideja. index.ts en src/components gdje reeksportujete svoje komponente Login y Registertako da ih zatim možete uvesti iz jedne čiste putanje.

Upravljajte stanjem obrasca pomoću prilagođenog hooka

To je vrlo uobičajeno u Reactu enkapsuliraj logiku forme u udici za višekratnu upotrebu. Tipičan primjer bi bio useForm, proglašen u src/hooks/useForm.tsx, koji prima objekat sa početnim stanjem forme i vraća trenutne vrijednosti, sam objekat i handleChange generički.

Poenta kucanja s generičkim imenima u TypeScript Isti hook možete ponovo koristiti s obrascima koji imaju različita polja: u prijavi možete imati samo email y passAli na drugim ekranima možete dodati ime, broj telefona ili druge atribute bez prepisivanja osnovne logike.

Uobičajeni uzorak unutar udice je održavanje useState sa svrhom obrasca i, u handleChange, koristite name iz ulaza za ažuriranje odgovarajućeg svojstva: nešto poput setForm(prev => ({ ...prev, : target.value })).

U komponenti Login.tsxUdicu biste nazvali ovako: const { email, pass, form, handleChange } = useForm({ email: '', pass: '' })Zatim dodijelite value={email} o value={pass} na ulaze i onChange={handleChange}i vi definirate handleSubmit poziv event.preventDefault() a kasnije i na vašu funkciju prijave na Firebase.

Komponenta Register.tsx mogu dijeliti potpuno iste mehanikemijenja samo ono što radi u handleSubmit (kreirajte račun umjesto prijavljivanja) i čak biste mogli koristiti jednu generičku komponentu obrasca, parametrizirajući tekstove dugmadi i funkciju koja se izvršava prilikom slanja.

Postavljanje Firebase-a u React aplikaciji (Vite + TypeScript)

Kada pripremite obrasce, vrijeme je da povežete svoju aplikaciju sa Firebase-om. U Reactu with Vite, osnovni tijek rada uključuje instaliranje SDK-a, kreiranje konfiguracijske datoteke i čitanje ključeva iz varijabli okruženja kako bi se izbjeglo njihovo tvrdo kodiranje u izvornom kodu.

1. Instalirajte Firebase iz npm-a sa nečim poput npm install firebase o yarn add firebaseU projektima s modularnom verzijom (v9+) radit ćete s pojedinačnim uvozima (na primjer, getAuth, signInWithEmailAndPassworditd.), što poboljšava tresenje drveća.
2. Kreirajte folder src/firebase i datoteku config.ts gdje inicijalizirate aplikaciju. Umjesto direktnog lijepljenja vrijednosti iz konzole, smjestite ih u datoteku .env u korijenu projekta. Sa Vite-om, sve varijable dostupne frontendu moraju počinjati sa VITE_ (npr. VITE_FIREBASE_API_KEY).
3. En config.ts Izgradit ćete svoj konfiguracijski objekt čitanje iz import.meta.env i slično, inicijalizirat ćete aplikaciju sa initializeApp a zatim ćete kreirati instancu za autentifikaciju sa getAuth(FirebaseApp)Uobičajeno je preimenovati konstantu aplikacije u nešto poput FirebaseApp da ga bolje razlikujemo.

Sa ovim, sada imate jezgro spremno. tako da ostatak datoteka (na primjer, services.ts) može uvesti i ponovo koristiti istu instancu Auth i druge Firebase usluge.

Kreirajte servise za autentifikaciju pomoću Firebase Auth-a

Dobar arhitektonski obrazac je Enkapsulirajte sve Firebase Auth pozive u datoteku usluga, na primjer src/firebase/services.tsTamo možete definirati specifične funkcije za svaki slučaj upotrebe: prijava putem Googlea, prijava putem e-pošte, registracija putem e-pošte, praćenje statusa sesije i zatvaranje sesije.

Za pristup putem Googlea Uobičajena stvar koju treba uraditi je kreirati instancu GoogleAuthProvider, deklarišite asinhronu funkciju koja koristi signInWithPopup(FirebaseAuth, googleProvider) i zatvorite poziv u blok try/catchAko sve prođe u redu, objekta user možete izdvojiti podatke kao što su uid, displayName o photoURLiako mnogo puta uid kao jedinstveni identifikator.

Za autentifikacija pomoću vjerodajnica (e-pošta i lozinka) Imat ćete dvije gotovo identične funkcije: jednu koja poziva createUserWithEmailAndPassword (registracija) i druga koja poziva na signInWithEmailAndPassword (prijava). Oba primaju objekt sa email y password i vratite uid (i, ako je potrebno, ostala korisnička svojstva).

Firebase Auth također omogućava praćenje statusa korisnika sa funkcijom onAuthStateChanged(FirebaseAuth, callback)Dobra je praksa da se taj poziv završi uslugom koja prima setSession ili sličan povratni poziv, tako da iz vašeg globalnog konteksta možete ažurirati status čim Firebase otkrije da je korisnik prijavljen (ili da je sesija zatvorena).

Funkcija logout Obično je najjednostavnije od svega: jednostavno pozovete signOut(FirebaseAuth) I, po vašoj vlastitoj logici (obično AuthContext), postavljate stanje na "nije autentificirano" i brišete sve korisničke podatke koje ste spremali.

Posmatrajte sesiju i postavite AuthContext pomoću Reacta

U donekle složenoj React aplikaciji, to je zgodno centralizirati informacije za autentifikaciju u globalnom kontekstu. Dakle, bilo koja komponenta može znati da li je korisnik autentificiran, kakve su njegove uid i koje su akcije prijave/odjave dostupne, bez prosljeđivanja svega kao rekvizita kroz stablo.

Ideja je kreirajte mapu src/context i unutar datoteke authContext.tsxU njemu definirate interfejs sa svojstvima koja će vaš kontekst izložiti: trenutno stanje (status), userIdi javne funkcije kao što su handleLoginWithGoogle, handleLoginWithCredentials, handleRegisterWithCredentials y handleLogout.

Za početno globalno stanje Objekt se obično koristi za označavanje nečega poput status: 'checking' y userId: null. Vrijednost checking Ovo je korisno jer omogućava prepoznavanje da aplikacija šalje upite Firebaseu kako bi provjerila je li korisnik prijavljen ili ne, tako da možete prikazati mali indikator učitavanja na ekranu.

U okviru AuthProvider postavili ste useState s tim početnim stanjem i useEffect koja, u prvom renderiranju, poziva servisnu funkciju koja se omotava onAuthStateChangeddodajući mu setSessionOva funkcija, kada Firebase otkrije promjene, postavit će status na "autentificirano" sa userId odgovarajući ili „neautentificiran“ ako nema sesije.

Veoma je praktičan definirajte pomoćnika, na primjer validateAuth, da on prima userId vraćeno od strane funkcija prijave/registracije Firebase-a. Ako je važeći niz znakova, ažurirajte status na "autentificirano"; ako je undefined Ili ako se dogodi nešto neočekivano, pozivate internu funkciju odjave da biste sve obrisali.

Funkcije koje otkriva kontekst Oni slijede uobičajeni obrazac: prvo uvode državu checking, zatim pozovu odgovarajuću Firebase uslugu (prijava s Googleom, prijava s vjerodajnicama, registracija s vjerodajnicama), dobiju uid I na kraju, zovu validateAuth s tom vrijednošću. Na ovaj način cijeli tok je ujedinjen.

Koristite kontekst autentifikacije u komponentama

Nakon što je AuthContext konfiguriran, vrijeme je da ga integrirate s obrascima i glavnim prikazom. Register.tsx importas useContext y el AuthContext, izdvajate funkciju handleRegisterWithCredentials i ti to zoveš iznutra handleSubmit, prosljeđujući e-mail i lozinku koje je zabilježio useForm.

• En Login.tsx pristup je sličanKoristite kontekst da biste dobili handleLoginWithCredentials y handleLoginWithGooglePrvi se izvršava kada korisnik pošalje obrazac, a drugi se povezuje sa onClick putem dugmeta „Prijavi se putem Google-a“.
• U glavnoj komponenti App.tsx Konzumirate kontekst da biste pročitali status y userIdAko je država checkingMožete prikazati jednostavnu poruku "Učitavanje..." ili spinner. Ako stanje pokazuje da je korisnik autentificiran i postoji userId, pokazuješ neku vrstu HomePageU suprotnom, prikazuje se prikaz za autentifikaciju s komponentama Login y Register.

Ovo odvajanje komponenti Obično se materijalizuje u nečemu poput dvije unutrašnje komponente u App.tsx: HomePage, gdje pokazujete userId i dugme za odjavu (koje poziva handleLogout) i AuthPage, gdje se obrasci za prijavu i registraciju prikazuju jedan pored drugog ili u karticama.

Na ovaj način dobijate jasan korisnički doživljajKorisnik vidi "javni" dio za autentifikaciju samo kada nije prijavljen i automatski se prebacuje na "privatni" dio kada Firebase potvrdi važeću sesiju. Svako ponovno učitavanje preglednika održava ovo ponašanje zahvaljujući posmatranju onAuthStateChanged.

Integrirajte Firebase u React Native i Expo pomoću Firestore-a

Ako umjesto web aplikacije želite izraditi mobilnu aplikaciju s React Nativeom, Firebase se također besprijekorno integrira. Možete birati između službenog React Native CLI-ja ili Expo-a; jedna od prednosti korištenja Firebase Web SDK-a je ta što radi u oba okruženja i što ga direktno podržava Google.

Opći tijek rada s Expom bi bio otprilike ovakav:

1. Instalacija expo-cli globalno, izvršavate expo init react-native-firebase.
2. Odaberite osnovni predložak (na primjer, „Upravljani tijek rada – Prazno“).
3. Započnite projekat sa yarn ios o yarn androidMožete ga isprobati i na svom mobilnom telefonu skeniranjem QR koda koji prikazuje Expo server.

para Poveži se s Firebaseom SDK instalirate sa yarn add firebase i uvozite module poput @firebase/auth y @firebase/firestoreKreirate datoteku src/firebase/config.js, definirate konfiguracijski objekt sa svojim apiKey, authDomain, databaseURL, projectIditd., i vi zovete firebase.initializeApp(config) samo ako nijedna aplikacija nije već inicijalizirana.

Posle strukturira ekrane u mapi src/screensNa primjer, s podfolderima LoginScreen, RegistrationScreen y HomeScreenSvako će imati svoje *.js i njegovu styles.js sa stilovima zasnovanim na StyleSheet.create.

Problem navigacije možete riješiti pomoću React navigacijainstaliranje @react-navigation/native, @react-navigation/stack i zavisnosti koje preporučuje dokumentacija (rukovatelj gestama, reanimated, ekrani, kontekst sigurnog područja, maskirani prikaz). U App.js postavili ste NavigationContainer i a Stack.Navigator to pokazuje Home ako postoji autentificirani korisnik ili Login y Registration u suprotnom.

u ekrani za prijavu i registraciju Izgrađeni su s izvornim komponentama (View, Text, TextInput, TouchableOpacityA ako želite poboljšati iskustvo, možete koristiti react-native-keyboard-aware-scroll-view kako bi se pravilno upravljalo virtuelnom tastaturom kada korisnik kuca.

Registracija i prijava s Firebase Auth u React Nativeu

Registracija korisnika putem e-maila i lozinke U React Nativeu, u osnovi se ponavlja ista logika kao i na webu: potvrđujete da se lozinke podudaraju, pozivate firebase.auth().createUserWithEmailAndPassword(email, password) I, ako je operacija uspješna, dobit ćete uid novog korisnika.

Pored kreiranja računa u Auth Uobičajeno je pohranjivati ​​dodatne korisničke podatke u Firestoreu, kao što su puno ime i e-mail. Da biste to učinili, kreirate kolekciju users I nakon registracije, uradite nešto poput firebase.firestore().collection('users').doc(uid).set(data), gdje data sadrži id, email y fullName, na primjer.

Ako sve bude išlo po planuNakon što sačuvate dokument u Firestoreu, idite na ekran Homeprosljeđivanje korisničkog objekta u svojstvima rute. Ako se u bilo kojem od koraka dogodi greška, jednostavno je prikažite u alert() Za rješavanje problema: bez obzira da li je lozinka prekratka ili je e-mail nevažeći, Firebase vam daje jasne poruke.

Prijava s vjerodajnicama Radi s firebase.auth().signInWithEmailAndPassword(email, password)Kada obećanje bude ispunjeno, dobićete ga nazad. uid, konsultujte kolekciju users u Firestoreu sa .doc(uid).get() A ako dokument postoji, preuzimate njegove podatke i idete do HomeScreen prosljeđujući ih kao parametar.

Ako dokument ne postoji (Na primjer, ako ste izbrisali korisnika iz Firestore-a, ali je i dalje prijavljen na Auth), možete prikazati poruku poput "Korisnik više ne postoji" i spriječiti aplikaciju da pokuša nastaviti s nekonzistentnim podacima. Opet, sve mrežne ili greške u validaciji se hvataju sa .catch(error => alert(error)).

Perzistentnost sesije i pristup za čitanje/pisanje u Firestoreu

U React Native-u, perzistentne sesije su također ključne.Firebase SDK održava prijavu korisnika prema zadanim postavkama, ali vaša aplikacija mora otkriti je li korisnik već aktivan kako bi preskočila ekran za prijavu i odvela ga direktno na stranicu za prijavu. HomeScreen.

Da biste to uradili, koristite firebase.auth().onAuthStateChanged u korijenskoj komponenti (obično App.js). At useEffect U početku se pretplaćujete na povratni poziv koji trenutni korisnik prima; ako ne nullUpućujete upit Firestore-u da biste dobili dokument u kolekciji users con doc(user.uid), te podatke spremate u stanje (setUser) i brendovi loading como falseAko nema korisnika, jednostavno unesete loading a false i neka se stek pokaže Login y Registration.

Što se tiče Firestore-a, tipičan primjer ima kolekciju entities gdje pohranjujete male tekstualne stavke povezane sa svakim korisnikom (zadaci, objave, bilješke itd.). Svaki dokument može imati polja kao što su text, authorID y createdAt con firebase.firestore.FieldValue.serverTimestamp().

U HomeScreen definirati lokalno stanje con entityText (ono što korisnik napiše u TextInputi niz entities prikazati FlatListKreirate referencu na kolekciju: const entityRef = firebase.firestore().collection('entities') i unutar useEffect pretplatite se na slušatelja sa onSnapshot.

Ta pretplata kombinuje filtere i sortiranje: entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc')Povratni poziv od onSnapshot putuje querySnapshot.forEach, gradi niz newEntities sa dokumentima i pozivom setEntities(newEntities)Sve promjene u kolekciji (dodavanje, brisanje, modifikacije) će se automatski odraziti na interfejsu.

Za dodavanje novih entiteta definirate funkciju onAddButtonPress što dokazuje da entityText Ako nije prazno, kreirajte objekat. data con text, authorID y createdAti pozivi entityRef.add(data)Nakon što se riješi, brišete tekstualno polje i sakrivate tastaturu. Hvala slušaocu onSnapshotLista se automatski ažurira bez potrebe za ponovnim učitavanjem bilo čega.

Kada sve ovo kombinujete (autentifikaciju, perzistenciju sesije, čitanje i pisanje u Firestore-u u realnom vremenu), dobijate potpuno funkcionalnu React Native aplikaciju bez pisanja ijedne linije tradicionalnog backend-a, oslanjajući se isključivo na Firebase servise.