bug: Capacitor-Firebase plugins are not compatible with AngularFire

[Squix]

Plugin(s):

All Capacitor Firebase plugins.

Platform:

• All capacitor platforms
• Using Angular & AngularFire

Current behavior:

App is complaining that no firebase app is initialized :

main.js:1 ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

But I initialized it with AngularFire 7, as the official doc says it should be :

import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
import { provideAuth, getAuth } from "@angular/fire/auth";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth())
  ],

I also tried the compat API way (non-modular) :

import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuthModule } from "@angular/fire/compat/auth";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule
  ],

The only way for me to make it work was to directly access the firebase sdk, as stated in Capacitor-Firebase doc :

export class AppComponent {
 constructor() {
  initializeApp(environment.firebaseConfig);
 }
}

It seems Angular Fire and Capacitor-firebase are not sharing the same firebase instance ?

Expected behavior:

This plugin should be compatible with Angular Fire, which is the most popular Firebase wrapper for Angular.

Steps to reproduce:

• Create a new app with capacitor, ionic and angular
• Install Firebase, AngularFire and Capacitor-firebase authentification
• Setup AngularFire in app.module.ts

Note : this bug does not seems to break something else in AngularFire (as for now).

[robingenz]

Hi @Squix, i've never tested my plugins with @angular/fire. Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example) so I can have a look.

One thing in advance: These plugins use the native Firebase SDKs. So when you sign in on Android and iOS, you are signed in on native layer and not on web layer. So on Android and iOS you can't use Angular Fire without adjustments. You need to sign in the user on Android and iOS also on the web layer. How this works is described here.

[DwieDima]

@Squix for me it works with no issues using this configuration: I've set skipNativeAuth to true inside capacitor.config.ts.

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getFunctions, provideFunctions } from '@angular/fire/functions';
import { Capacitor } from '@capacitor/core';
import { getApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from '../environments/environment';

  imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() =>
      Capacitor.isNativePlatform()
        ? initializeAuth(getApp(), {
            persistence: indexedDBLocalPersistence
          })
        : getAuth()
    ),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions())
  ]
  ...

you can also try to initialize firebase in your angular project using ng add @angular/fire.

[Squix]

Thanks, I tried the snippet, but Angular still doesn't want to init my firebase app on web, seems to work on device, but I can't try sign in, because I've got another issue with this library though, which I need to solve first (I'm opening a new ticket now).

[github-actions[bot]]

It looks like there hasn't been a reply in 30 days, so I'm closing this issue.