Как да свържете React с Firebase стъпка по стъпка

Свържете React с Firebase Това се превърна в една от най-удобните комбинации за изграждане на уеб и мобилни проекти, без да е необходимо да се създава бекенд от нулата. Firebase ви предоставя удостоверяване, база данни, съхранение и множество готови за употреба услуги, докато React ви позволява да изграждате бързи и адаптивни интерфейси.

В тази статия ще видите стъпка по стъпка как да интегрирате Firebase както с уеб приложенията на React (включително Vite + TypeScript), така и с React Native и Expo, като ще засегнете... ключови точкисъздаване на проекта във Firebase, конфигуриране на SDK, удостоверяване с имейл и Google, управление на състоянието на сесията, използване на Context API и четене/запис в базата данни в реално време и Firestore.

Какво е Firebase и защо се съчетава толкова добре с React?

Firebase Това е платформа на Google, която предлага набор от backend услуги „като услуга“: удостоверяване, NoSQL бази данни (Realtime Database и Firestore), съхранение на файлове, анализи, push съобщения и други. Вместо да настройвате собствен сървър, вие използвате тяхната инфраструктура и осъществявате достъп до нея от фронтенда, използвайки официални SDK.

В проекти с Реагират Това пасва идеално, защото Клиентът комуникира директно с Firebase.React управлява интерфейса и потока на приложението, докато Firebase управлява потребителите, данните и разрешенията. Можете да забравите за настройването на собствени REST API или WebSockets за ежедневни нужди.

В исторически план Firebase е започнала като база данни в реално време „като услуга“, но от Google I/O 2016 насам продуктът се е разширил и се е превърнал в много цялостен бекенд: можете да удостоверявате потребители, да запазвате данните им в JSON или колекции от документи, да съхранявате изображения, да изпращате известия и т.н.

Ключът към интегрирането му с React (уеб или Native) е да се разбере как да се инициализира SDK, как да се защитят публичните ключове с помощта на променливи на средата, как да се следят промените в потребителската сесия и как да се структурира приложението, така че дървото на компонентите да получава състоянието на удостоверяване, където ви е необходимо.

Създайте проект във Firebase и активирайте удостоверяване

Първата стъпка винаги включва конзолата на Firebase. Отидете на firebase.google.comВлезте с вашия Google акаунт и отворете конзолата. Оттам можете да създавате и управлявате проектите си.

за създайте нов проектКликнете върху „Добавяне на проект“ (или „Създаване на проект“), дайте му разпознаваемо име, например auth-firebase-react o react-firebaseИзберете държавата или региона, който най-добре отговаря на вашата аудитория, и потвърдете създаването. Ако имате нужда от практическо ръководство, за да започнете, вижте Започнете проектите си с Firebase StudioСлед няколко секунди контролният ви панел ще бъде готов.

В рамките на проекта ще видите няколко икони за регистриране на приложения: iOS, Android и Web. За традиционно React приложение (браузър SPA), трябва изберете иконата на уебсайтаВ React Native ще трябва да регистрирате iOS и/или Android приложения със съответните им идентификатори на пакети.

Когато регистрирате уеб приложение, ще ви бъде показан JavaScript конфигурационен обект съдържащи apiKey, на authDomain, URL адресите на базата данни и хранилището, projectIdи т.н. Появява се и пример с firebase.initializeApp(config)Този блок е това, което по-късно ще адаптирате към вашия React или React Native проект.

Преди да докоснете кода, препоръчително е конфигуриране на удостоверяванеВ страничното меню на конзолата отидете на „Build > Authentication“. Оттам отидете на раздела „Sign-in method“ и активирайте поне следното:

• Имейл адрес/парола, като изберете опцията „Активиране“ и запазите промените.
• Google като доставчик на OAuth, също чрез активиране на метода и избиране на основния ви имейл адрес.

В Раздел „Потребители“ (или „Потребители“) ще показва всички акаунти, които се регистрират чрез приложението ви с Firebase Auth, независимо дали с имейл и парола или с външни доставчици като Google.

Подгответе React проект с Vite и TypeScript

За едно съвременно React приложение е много удобно да се изтеглят бързоСтартира проекта бързо и поддържа TypeScript с минимална конфигурация. Идеята е да се създаде базов проект и след това да се добавят компоненти, куки и интеграция с Firebase.

Un типичен поток Това би било:

1. Генерирайте проекта с Vite, като изберете шаблона React + TypeScript.
2. Влезте в новосъздадената папка.
3. Инсталирайте зависимости.
4. Отворете проекта в любимия си редактор (например VS Code).

La минимална структура на папките Интеграцията за удостоверяване, която ви интересува, може да изглежда по следния начин:

• src/components за Вход, Регистрация и други компоненти за многократна употреба.
• src/hooks за персонализирани куки като useFormular.
• src/firebase къде ще съхранявате config.ts y услуги.ts.
• src/context за AuthContext и вашият доставчик.

След като скелетът е създаден, можете да го опростите App.tsx оставяйки само абсолютния минимум (заглавие или контейнер), за да се вмъкнат формулярите за вход/регистрация и логиката за удостоверяване.

Проектирайте формулярите за вход и регистрация в React

За класически процес на удостоверяване Обикновено са достатъчни два екрана или компонента: един за вход и друг за регистрация на потребител. В просто приложение можете дори да ги монтирате като компоненти в рамките на един и същ изглед, без да използвате рутер.

Формата на Влизам Обикновено включва две полета:

• Имейл (тип email o text с валидиране).
• Парола (тип password).

Всеки вход трябва да има атрибут name Трябва да е добре дефинирано, тъй като по-късно ще го използвате, за да съпоставите промените във формуляра с вашето вътрешно състояние. Освен това, входът може да включва два бутона:

• Традиционен бутон за изпращанеС type="submit", което ще задейства onSubmit на формуляра.
• Бутон за вход в GoogleС type="button" за да се предотврати изпращането на формуляра и вместо това просто да се извика функцията за вход в Google.

El компонент за регистрация много си прилича

Въпреки че обикновено има само един бутон за изпращане, основните полета отново са имейл и парола, но можете да добавите пълно име или други данни, ако искате да ги съхраните във Firestore.

за улесняване на вноса Създаването на „архив от бъчви“ е добра идея. index.ts en src/components където реекспортирате компонентите си Login y Registerтака че след това да можете да ги импортирате от един чист път.

Управление на състоянието на формуляра с персонализирана кука

Това е много често срещано в React капсулиране на логиката на формата в кука за многократна употреба. Типичен пример би бил useForm, обявено в src/hooks/useForm.tsx, който получава обект с началното състояние на формата и връща текущите стойности, самия обект и handleChange генеричен.

Смисълът да го въвеждате с генерични имена в написан на пишеща машина Можете да използвате повторно един и същ hook с формуляри, които имат различни полета: в login можете да имате само email y passНо на други екрани можете да добавите име, телефонен номер или други атрибути, без да пренаписвате основната логика.

Обичайният модел в куката е да се поддържа useState с целта на формуляра и, в handleChange, използвайте name от входа, за да се актуализира съответното свойство: нещо подобно setForm(prev => ({ ...prev, : target.value })).

В компонента Login.tsxБихте нарекли куката така: const { email, pass, form, handleChange } = useForm({ email: '', pass: '' })След това присвоявате value={email} o value={pass} към входовете и onChange={handleChange}и вие дефинирате handleSubmit обаждане event.preventDefault() и по-късно, към функцията ви за вход във Firebase.

Компонентът Register.tsx могат да споделят абсолютно същите механикипроменя само това, което прави в handleSubmit (създайте акаунт вместо да влизате) и дори бихте могли да използвате един единствен компонент на генерична форма, параметризирайки текстовете на бутоните и функцията, която да се изпълни при изпращане.

Настройване на Firebase в React приложение (Vite + TypeScript)

След като подготвите формулярите, докоснете Свържете приложението с Firebase. В React with Vite, основният процес се състои от инсталиране на SDK, създаване на конфигурационен файл и четене на ключовете от променливите на средата, за да не се кодират твърдо в изходния код.

1. Инсталиране на Firebase от npm с нещо подобно npm install firebase o yarn add firebaseВ проекти с модулната версия (v9+) ще работите с отделни импортирания (например, getAuth, signInWithEmailAndPasswordи др.), което подобрява разклащането на дърветата.
2. Създайте папката src/firebase и файл config.ts където инициализирате приложението. Вместо директно да поставяте стойностите от конзолата, поставете ги във файл .env в основата на проекта. С Vite всички променливи, достъпни за фронтенда, трябва да започват с VITE_ (например VITE_FIREBASE_API_KEY).
3. En config.ts Ще изградите вашия конфигурационен обект четене от import.meta.env и подобни, ще инициализирате приложението с initializeApp и след това ще създадете екземпляр за удостоверяване с getAuth(FirebaseApp)Често срещано е константата на приложението да се преименува на нещо подобно FirebaseApp за да го различа по-добре.

С това вече имате ядрото готово. така че останалите файлове (например, services.ts) може да импортира и използва повторно същия екземпляр на Auth и други услуги на Firebase.

Създаване на услуги за удостоверяване с Firebase Auth

Добър архитектурен модел е Капсулирайте всички извиквания на Firebase Auth във файл с услуги, например src/firebase/services.tsТам можете да дефинирате специфични функции за всеки случай на употреба: влизане с Google, влизане с имейл, регистрация с имейл, наблюдение на състоянието на сесията и затваряне на сесията.

За достъп с Google Нормалното нещо, което трябва да направите, е да създадете екземпляр на GoogleAuthProvider, декларирайте асинхронна функция, която използва signInWithPopup(FirebaseAuth, googleProvider) и затворете повикването в блок try/catchАко всичко върви добре, на обекта user можете да извличате данни, като например uid, displayName o photoURLвъпреки че много пъти uid като уникален идентификатор.

За удостоверяване с идентификационни данни (имейл и парола) Ще имате две почти идентични функции: едната, която извиква createUserWithEmailAndPassword (регистрация) и друга, която призовава за signInWithEmailAndPassword (вход). И двете получават обект с email y password и върнете uid (и, ако е необходимо, останалите свойства на потребителя).

Firebase Auth също позволява следи състоянието на потребителя с функция onAuthStateChanged(FirebaseAuth, callback)Добра практика е това повикване да се обхване в услуга, която получава setSession или подобно обратно извикване, така че от вашия глобален контекст да можете да актуализирате състоянието веднага щом Firebase открие, че потребител е влязъл (или че сесията е затворена).

Функцията на изход Обикновено е най-простото от всичко: просто се обаждате signOut(FirebaseAuth) И, по ваша собствена логика (обикновено AuthContext), вие задавате състоянието на „не е удостоверено“ и изчиствате всяка потребителска информация, която сте запазвали.

Наблюдавайте сесията и настройте AuthContext с React

В донякъде сложно React приложение е удобно централизиране на информацията за удостоверяване в глобален контекст. По този начин, всеки компонент може да знае дали потребителят е удостоверен, какви са неговите uid и какви действия за влизане/излизане са налични, без да се предава всичко като props през дървото.

Идеята е създайте папка src/context и вътре във файл authContext.tsxВ него дефинирате интерфейс със свойствата, които вашият контекст ще изложи: текущо състояние (status), userIdи обществени функции, като например handleLoginWithGoogle, handleLoginWithCredentials, handleRegisterWithCredentials y handleLogout.

За начално глобално състояние Обектът обикновено се използва за обозначаване на нещо като status: 'checking' y userId: null, Стойността checking Това е полезно, за да се знае, че приложението отправя запитвания към Firebase, за да види дали потребителят е влязъл или не, така че можете да покажете малък индикатор за зареждане на екрана.

В рамките на AuthProvider вие създавате useState с това начално състояние и useEffect което при първото рендериране извиква сервизната функция, която обгръща onAuthStateChangedподавайки му setSessionТази функция, когато Firebase открие промени, ще зададе статуса на „удостоверен“ с userId съответстващ или „неудостоверен“, ако няма сесия.

Много е практичен дефинирайте помощник, например validateAuth, че той получава userId върнато от функциите за вход/регистрация на Firebase. Ако е валиден низ, актуализирайте състоянието на „удостоверен“; ако е undefined Или ако се случи нещо неочаквано, извиквате вътрешната функция за излизане, за да изчистите всичко.

Функциите, изложени от контекста Те следват общ модел: първо въвеждат държавата checking, след което извикват съответната услуга на Firebase (вход с Google, вход с идентификационни данни, регистрация с идентификационни данни), получават uid И накрая, те се обаждат validateAuth с тази стойност. По този начин целият поток е обединен.

Използвайте контекста за удостоверяване в компонентите

След като AuthContext е конфигуриран, е време да го интегрирате с формулярите и главния изглед. Register.tsx ти си важен/важна useContext и AuthContext, извличате функцията handleRegisterWithCredentials и го наричаш вътре в себе си handleSubmit, предавайки имейла и паролата, заловени от useForm.

• En Login.tsx подходът е подобенИзползвате контекста, за да получите handleLoginWithCredentials y handleLoginWithGoogleПървият се изпълнява, когато потребителят изпрати формуляра, а вторият се свързва с onClick от бутона „Вход с Google“.
• В основния компонент App.tsx Вие консумирате контекста, за да прочетете status y userIdАко държавата е checkingМожете да изобразите просто съобщение „Зареждане...“ или въртяща се индикаторна линия. Ако състоянието показва, че потребителят е удостоверен и съществува userId, показваш един вид HomePageВ противен случай, показвате изгледа за удостоверяване с компонентите Login y Register.

това разделяне на компонентите Обикновено се материализира в нещо като два вътрешни компонента в App.tsx: HomePage, където показвате userId и бутон за излизане (който извиква handleLogout), и AuthPage, където визуализирате формулярите за вход и регистрация една до друга или в раздели.

По този начин получавате ясен потребителски интерфейсПотребителят вижда „публичната“ част за удостоверяване само когато не е влязъл в системата и автоматично превключва към „частната“ част, когато Firebase потвърди валидна сесия. Всяко презареждане на браузъра поддържа това поведение благодарение на наблюдението на onAuthStateChanged.

Интегрирайте Firebase с React Native и Expo, използвайки Firestore

Ако вместо уеб приложение искате изградете мобилно приложение С React Native, Firebase също се интегрира безпроблемно. Можете да избирате между официалния React Native CLI или Expo; едно от предимствата на използването на Firebase Web SDK е, че работи и в двете среди и се поддържа директно от Google.

El общ поток с Expo Би било нещо подобно:

1. инсталирам expo-cli в световен мащаб, вие изпълнявате expo init react-native-firebase.
2. Изберете основен шаблон (например „Управляван работен процес – празен“).
3. Започнете проекта с yarn ios o yarn androidМожете да го изпробвате и на мобилния си телефон, като сканирате QR кода, показан от сървъра на Expo.

за Свързване с Firebase Инсталирате SDK с yarn add firebase и импортирате модули като @firebase/auth y @firebase/firestoreСъздавате файл src/firebase/config.js, вие дефинирате конфигурационния обект с вашия apiKey, authDomain, databaseURL, projectIdи т.н., и вие се обаждате firebase.initializeApp(config) само ако няма вече инициализирано приложение.

след това структурира екраните в папка src/screensНапример, с подпапки LoginScreen, RegistrationScreen y HomeScreenВсеки ще има свой собствен *.js и styles.js със стилове, базирани на StyleSheet.create.

Можете да решите проблема с навигацията с React Navigationинсталиране @react-navigation/native, @react-navigation/stack и зависимостите, препоръчани от документацията (обработчик на жестове, реанимирани, екрани, контекст на безопасна зона, маскиран изглед). В App.js вие създавате NavigationContainer и Stack.Navigator това показва Home ако има удостоверен потребител или Login y Registration в противен случай.

на екрани за вход и регистрация Те са изградени с оригинални компоненти (View, Text, TextInput, TouchableOpacityИ ако искате да подобрите преживяването, можете да използвате react-native-keyboard-aware-scroll-view за правилно управление на виртуалната клавиатура, когато потребителят пише.

Регистрация и вход с Firebase Auth в React Native

Регистрация на потребител с имейл и парола В React Native, по същество се повтаря същата логика, както в мрежата: проверявате дали паролите съвпадат, извиквате firebase.auth().createUserWithEmailAndPassword(email, password) И ако операцията е успешна, получавате uid на новия потребител.

В допълнение към създаването на акаунта в Auth Често срещано е да се съхраняват допълнителни потребителски данни във Firestore, като например пълно име и имейл. За да направите това, създавате колекция users И след регистрацията правите нещо подобно firebase.firestore().collection('users').doc(uid).set(data), където data Той съдържа id, email y fullName, Например.

Ако всичко върви по планСлед като запазите документа във Firestore, отидете на екрана Homeпредаване на потребителския обект в свойствата на маршрута. Ако възникне грешка в някоя от стъпките, просто я покажете в alert() За отстраняване на неизправности: независимо дали паролата е твърде кратка или имейлът е невалиден, Firebase ви дава ясни съобщения.

Вход с идентификационни данни Работи с firebase.auth().signInWithEmailAndPassword(email, password)Когато обещанието е изпълнено, ще си го върнете. uid, консултирайте се със сборника users във Firestore с .doc(uid).get() И ако документът съществува, извличате данните му и навигирате до HomeScreen предавайки ги като параметър.

Ако документът не съществува (Например, ако сте изтрили потребителя от Firestore, но той все още е влязъл в Auth), можете да покажете съобщение като „Потребителят вече не съществува“ и да предотвратите опита на приложението да продължи с непоследователни данни. Отново, всички мрежови или валидационни грешки се улавят с .catch(error => alert(error)).

Устойчивост на сесията и достъп за четене/писане във Firestore

В React Native, постоянните сесии също са от съществено значение.SDK на Firebase поддържа входа на потребителя по подразбиране, но приложението ви трябва да открие дали потребителят вече е активен, за да пропусне екрана за вход и да го отведе директно към страницата за вход. HomeScreen.

За да направите това, използвате firebase.auth().onAuthStateChanged в коренния компонент (обикновено App.js). при useEffect Първоначално се абонирате за обратно извикване, което текущият потребител получава; ако не nullПравите заявка към Firestore, за да получите документа в колекцията users с doc(user.uid), запазвате тези данни в състояние (setUser) и марки loading като falseАко няма потребител, просто въвеждате loading a false и нека стекът се покаже Login y Registration.

Относно Firestore, типичен пример има колекция entities където съхранявате малки текстови елементи, свързани с всеки потребител (задачи, публикации, бележки и др.). Всеки документ може да има полета като text, authorID y createdAt с firebase.firestore.FieldValue.serverTimestamp().

В HomeScreen дефиниране на локално състояние с entityText (това, което потребителят пише в TextInputи масив entities да се направи FlatListСъздавате препратка към колекцията: const entityRef = firebase.firestore().collection('entities') и в рамките на useEffect абонирайте се за слушател с onSnapshot.

Този абонамент комбинира филтри и сортиране: entityRef.where('authorID', '==', userID).orderBy('createdAt', 'desc')Обратното повикване на onSnapshot пътува querySnapshot.forEach, изгражда масив newEntities с документите и обаждането setEntities(newEntities)Всякакви промени в колекцията (добавяния, изтривания, модификации) ще бъдат автоматично отразени в интерфейса.

За добавяне на нови обекти дефинирате функция onAddButtonPress което доказва, че entityText Ако не е празно, създайте обекта. data с text, authorID y createdAtи обаждания entityRef.add(data)След като е решено, изчиствате текстовото поле и скривате клавиатурата. Благодарение на слушателя на onSnapshotСписъкът се актуализира автоматично, без да е необходимо да презареждате нищо.

Когато комбинирате всичко това (удостоверяване, запазване на сесията, четене и запис в реално време във Firestore) получавате напълно функционално React Native приложение, без да сте написали нито един ред от традиционния backend, разчитайки единствено на Firebase услуги.