Ionic Capacitor and Firebase Firestore

Question

trying to make Firebase Firestore work in Ionic Capacitor on an iOS device for five hours and I'm losing my nerves right now. Hope you can ramp me up here.

The setup:

Ionic:
   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 7.0.0
   @angular-devkit/build-angular : 16.0.0
   @angular-devkit/schematics    : 16.0.0
   @angular/cli                  : 16.0.0
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   capacitor (Capacitor CLI) : 4.6.3
   @capacitor/core           : 4.6.3

I have set up a Firebase project, within which I have created the Firestore database and two applications, one for web and one for iOS. Everything works perfectly for the web and the collections are retrieved. On iOS, however, I have considerable problems accessing Firebase.

I downloaded the GoogleService-Info.plist from the project and imported it into the parent folder in XCode. I have also customised the AppDelegate:

import UIKit
import Capacitor
import FirebaseCore

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
      FirebaseApp.configure()

      return true
    }
...

In my app.module.ts I import Firebase "by book", I think.

// Firebase
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';


@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideFirestore(() => getFirestore()),
        provideStorage(() => getStorage()),
        provideAuth(() => getAuth()),
...

The problem seems to be that no connection to Firebase Storage can be established under iOS. I have even set the rules of the Firestorage to completely public as a test.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

The error log from XCode looks something like this:

⚡️  [log] - Starting data load
⚡️  [log] - null
10.16.0 - [FirebaseAnalytics][I-ACS023130] Configuration not found. Using default configuration

I have installed logs in my data retrieval, which tell me where the code is currently located. Here it seems that the connection is never established because of the missing config!

  load(): Observable<any> {
    console.log('Starting data load');
    return from(this.testFirebaseConnection()).pipe(
      switchMap(() => {
        if (this.data) {
          console.log('Returning cached data');
          return from(Promise.resolve(this.data));
        } else {
          console.log('Fetching new data from Firestore');
          const scheduleCollection = collection(this.firestore, 'schedule');
          const announcementsCollection = collection(this.firestore, 'ankuendigungen');

          return forkJoin({
            schedule: from(getDocs(scheduleCollection)),
            announcements: from(getDocs(announcementsCollection))
          }).pipe(
            map(({ schedule, announcements }) => {
              console.log('Data fetched successfully');
              const scheduleData = [];
              schedule.forEach((doc) => {
                console.log('Processing schedule document:', doc.id);
                scheduleData.push({ id: doc.id, ...doc.data() });
              });

              const announcementsData = [];
              announcements.forEach((doc) => {
                console.log('Processing announcement document:', doc.id);
                announcementsData.push({ id: doc.id, ...doc.data() });
              });

              this.data = { 
                schedule: scheduleData,
                speakers: announcementsData
              };
              console.log('Data processing complete');
              return this.processData(this.data);
            })
          );
        }
      }),
      catchError(error => {
        console.error('Error in load method:', error);
        if (error instanceof Error) {
          console.error('Error message:', error.message);
          console.error('Error stack:', error.stack);
        }
        return throwError(error);
      })
    );
  }

I'm honestly a bit desperate as I can't narrow down the error any further and believe that everything should have been correct. Does anyone here have any ideas, please?

Answer 1

I recommend using the Capacitor Cloud Firestore plugin.