Search code examples
iosangularionic-frameworkgoogle-cloud-firestoreangularfire2

Angular / Ionic mobile app ios does not fetch from Firebase using angularfire


I am trying to test a little Ionic/Angular sample app on an iOS Emulator.

On the web, all the requests to firestore using angularfire work perfectly fine.

Somehow if I try to execute the same app on the emulator, it keeps loading for the response of the request (if it was a empty response it would say that no results could be retrieved).

Fetching results forever

What is going on? Do i need to set something specifically for the Emulator to work and perform requests to Firestore?


Solution

  • import { initializeApp } from 'firebase/app';
    import { getFirestore } from 'firebase/firestore';
    import { Capacitor } from '@capacitor/core';
    import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
    import { getAuth } from 'firebase/auth';
    
    const firebaseApp = initializeApp({
     apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
     authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
     databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
     projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
     storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
     messagingSenderId: 
     process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
     appId: process.env.VUE_APP_FIREBASE_APP_ID,
    });
    
    
    function whichAuth() {
      let auth
      if (Capacitor.isNativePlatform()) {
        auth = initializeAuth(firebaseApp, {
          persistence: indexedDBLocalPersistence
        })
      } else {
        auth = getAuth()
      }
      return auth
    }
    
    export const auth = whichAuth()
    const db = getFirestore();
    
    export const auth = whichAuth();
    export { firebaseApp, db };
    

    Then in your component, cal your method like this await signInAnonymously(auth);. Don't forget to import the auth we exported at the top.