React Native’de Firebase Entegrasyon Sorunları

React Native ile geliştirdiğimiz küçük bir proje fikrimiz vardı. Hızlıca bir prototip oluşturmak ve basit bir MVP ile yola çıkmak için Firebase kullanmaya karar verdik. Ancak Firebase ile React Native entegrasyonu sırasında bazı kronik problemlerle karşılaştık. Bu süreçte yaşadıklarımızı ve çözümlerini adım adım not aldım.

Prebuild

React Native projesini oluştururken Expo kullandım. Firebase entegrasyonuna başlarken öncelikle prebuild komutunu çalıştıracağız.

npx expo prebuild

Expo CLI, yerel bir uygulamanın derlenebilmesi için gerekli olan native dosyaları oluşturur. Normalde Expo, native kodlara doğrudan dokunmanızı gerektirmez. Ancak Firebase gibi farklı modüller kullanmak istediğinizde, bu dosyalara üzerinde bazı değişiklik yapmanız gerekebilir.

Not: Prebuild işlemi sırasında app.json dosyasında Android ve iOS için bir paket adı tanımlamalısınız. Bu, uygulamanızın kimliği olacak. Genellikle şirket veya kişi adının ters çevrilmiş haliyle başlar (örneğin company.com).

{
  "name": "TestApp",
  "slug": "test-app",
  "android": {
    "package": "com.company.TestApp"
  },
  "ios": {
    "bundleIdentifier": "com.company.TestApp"
  }
}

React Native Firebase Kurulumu

Firebase entegrasyonuna başlamadan önce, iOS ve Android için gerekli ortamları kurmanız gerekir. Bu adımları React Native dokümantasyonundan inceleyebilirsiniz. Burada Android ve iOS geliştirmeleri için ihtiyacımız olacak olan paketlerin kurulumunu yapacağız.

iOS için Xcode kurulumu ve konfigürasyonunu, Android için de Java development kit ve Android Studio kurlumularını adımları takip ederek tamamlayın.

Bundan sonrasında Firebase paketlerini yüklemeye geçeceğiz:

npm install --save @react-native-firebase/app

Expo ile proje oluşturduysanız, şu adımları takip edin: Firebase Expo

Ek olarak ihtiyacınız olan Firebase modüllerini şu şekilde kurabilirsiniz:

npx expo install @react-native-firebase/auth @react-native-firebase/firestore

Bu adımın ardından app.json dosyasına şu eklemeleri yapmalısınız:

"plugins": [
  "@react-native-firebase/app",
  "@react-native-firebase/auth",
  [
    "expo-build-properties",
    {
      "ios": {
        "useFrameworks": "static"
      }
    }
  ]
]

Bazı paketler Expo modülleriyle uyumsuz olabilir. Eklediğinizde uygulamayı derlerken hata verecektir.

Eğer expo-build-properties yüklü değilse şu komutla ekleyin:

expo install expo-build-properties

Bu paket, iOS ve Android build ayarlarını tek noktadan kolayca yönetmenizi sağlar. useFrameworks: “static” ayarı ise iOS projelerinde statik framework kullanımını zorunlu kılar. Firebase’in bazı modülleri iOS’ta framework olarak çalıştığı için bu ayarı eklemek önemlidir.

Firebase Proje Yapılandırması

Firebase üzerinde yeni bir proje oluşturun ve hem iOS hem de Android uygulamalarınızı ekleyin. Uygulama adı ve paket ismi (com.company.TestApp) dışında herhangi bir bilgi girmenize gerek yok. Sadece Android için SHA-1 key’ine sonrasında ihtiyacımız olacak.

iOS için GoogleService-Info.plist ve Android için google-services.json dosyalarını indirin ve proje dizininize ekleyip app.json içerisinde belirtin.

Reverse Client ID Hatası

Google Service dosyalarını ekledikten sonra prebuild komutunu tekrar çalıştırdığınızda şu hata ile karşılaşabilirsiniz:

Error: [ios.infoPlist]: withIosInfoPlistBaseMod: 
[@react-native-firebase/auth] Failed to parse your GoogleService-Info.plist. 
Are you sure it is a valid Info.Plist file with a REVERSED_CLIENT_ID field?

REVERSED_CLIENT_ID Hatası

Normalde servis dosyaları oluşturulurken otomatik olarak CLIENT_ID ve REVERSED_CLIENT_ID oluşturulup servis dosyasını içerisine eklenmesi gerekiyor. Ancak ilk uygulamayı oluşturduğunuzda bu key’ler Firebase tarafında oluşturulamıyor. Sorunu çözmek için uygulamada Google ile Authentication’ı aktifleştirmeniz gerekiyor. Ardından yeni servis dosyalarını indirmeniz sorunu çözüyor.

Bu aşamada aşağıdaki gibi servis dosyalarını tekrar indirebileceğiniz bir pencere açılacak. Burada göreceğiniz gibi android için SHA-1 fingerprint’ine ihtiyacınız olacak.

Android SHA-1 Fingerprint Ekleme

Firebase Authentication işlemleri için Android uygulamalarında SHA-1 anahtarına ihtiyaç duyulur. SHA-1 anahtarınızı elde etmek için android dizinine giderek ./gradlew signingReport komutunu çalıştırmanız gerekiyor:

npx expo prebuild
cd android
./gradlew signingReport

SHA-1 Fingerprint Oluşturma Hatası

Eğer bir BUILD FAILED hatası alırsanız, Java versiyonunuzu kontrol edin. Ayrıca Android SDK yolunu doğrulamanız gerekebilir. Bunun için android dizininde local.properties dosyasını oluşturup şu satırı ekleyin:

# Replace "${USERNAME}" with your system username
sdk.dir=/Users/${USERNAME}/Library/Android/sdk

signingReport komutu, Android projelerinde kullanılan bir Gradle görevidir. Bu komut, proje için oluşturulan keystore dosyalarını ve SHA-1 ile SHA-256 gibi çeşitli dijital imza bilgilerini debug ve release variantları halinde keystore bilgilerini gösteren raporlar sunar.

Variant: debug
Config: debug
Store: /Users/username/TestApp/android/app/debug.keystore
Alias: androiddebugkey
MD5: *:*:*:**:**:**:**:**:**:**:**:**:**:**:**:*
SHA1: *:*:*:**:**:**:**:**:**:**:**:**:**:**:**:*
SHA-256: *:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**
Valid until: Wednesday, May 1, 2052

Burada geliştirme aşamasında debug variant’ına ait rapordaki SHA-1 anahtarını kullanın.

Bu işlemlerden sonra SHA-1 anahtarını alabilir ve Firebase konsolundaki Android ayarlarına ekleyip, güncel servis dosyasını tekrar indirebilirsiniz.

Firebase ile Kayıt İşlemi Test Etme

Firebase yapılandırmasını tamamladıktan sonra, basit bir kayıt işlemi ile Firestore ve Authentication özelliklerini test edebilirsiniz:

import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import { Alert } from 'react-native';
import React, { useState } from 'react';

...

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const register = async () => {
  try {
    await auth().createUserWithEmailAndPassword(email, password);
    Alert.alert('Success', 'User account created & signed in!');
    createNewUser({ email, firstname: 'John', lastname: 'Doe' });
  } catch (error) {
    Alert.alert('Error', error.message);
  }
};

const createNewUser = async (user) => {
  try {
    await firestore().collection('users').add(user);
    Alert.alert('Success', 'User added to Firestore!');
  } catch (error) {
    Alert.alert('Error', error.message);
  }
};

Native Module Hatası

Expo’da geliştirme sırasında Firebase modülleri ile şu hatayla karşılaşabilirsiniz:

ERROR  Invariant Violation: 
Your JavaScript code tried to access a native module that doesn't exist.
...

Bu hata, native modüllerin Expo ile tam uyumlu olmamasından kaynaklanır. Çözüm olarak, npx expo run:ios komutuyla native bir development build oluşturun.

Bu komut, Firebase modüllerinin doğru çalışmasını sağlayacaktır.