Firebase auth in SDK 9 does not work on ios sim or devices

Ionic Framework
1

I recently moved to the firebase v9 sdk for a brand new ionic/angular project. I was able to get the signInWithEmailAndPassword call to work in a web browser but it hangs in iphone simulators and devices. Strangely, it works in the ipad simulator. If I take the same app and switch it to the v8 firebase sdk, the login process works on all sims and devices.
I contacted Firebase tech support. I got the “It’s not us it’s ionic” response. Was not the kind of response I expected.
Any who, be aware that the firebase v9 sdk has problems when used with ionic.

2 Likes
2

I am getting precisely the same error, (with signInWithEmailAndPassword, on an Ionic Angular project, on the IOS simulator). I will try and move back to Firebase v8.

3

There is an update on this. You can use the new v9 sdk if you want. You just need to initialize auth like so:

init() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
    this.firestore = getFirestore(app);
  }

See this for more details: Auth does not work in ionic apps on iphone devices or sims · Issue #5552 · firebase/firebase-js-sdk · GitHub

If you want to use FB or Google auth, you need to look at this: Authenticate Using OAuth Providers with Cordova  |  Firebase

3 Likes
4

Thanks a lot for your answer. Do you know what that would look like in the app.module.ts file when using AngularFire? I can’t get it to work.

5

I don’t know. I would have to research it. If I get some time, I might get into it.

Regards,
Don Morris

6

Don you’re a legend - I’ve been struggling with this for 2 days. Thanks!

7

I didn’t solve it. This guy did jayordway (Jay Ordway) · GitHub

8

I saw that. But I wouldn’t have if you hadn’t posted here, so thanks anyway.

9

If anyone is wondering where to put that code, I put it in app.component and it is working in the iOS simulator. Here is the full file with imports:

import { Component } from '@angular/core';
import { Capacitor } from '@capacitor/core';
import { initializeApp } from 'firebase/app';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
  }
}
2 Likes
10

Hi,

What have you got in app.module?

I am getting already initialised errors.

Thanks in advance,

EDIT

I worked it out.

I rewrote the app with only angular/fire and not firebase

11

Thanks it really helped me solve my issue @

12

Edit: I was also struggling with already initialized’ errors, but as a workaround, I managed to add the initializeAuth calls into app.module, which now looks something like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { enableIndexedDbPersistence, getFirestore, provideFirestore } from '@angular/fire/firestore';
import {provideAuth, getAuth, initializeAuth, indexedDBLocalPersistence} from '@angular/fire/auth';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from 'src/environments/environment';
import { Capacitor } from '@capacitor/core';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      provideFirebaseApp(() => {
        const app = initializeApp(environment.firebase);
          if (Capacitor.isNativePlatform) {
            initializeAuth(app, {
                persistence: indexedDBLocalPersistence
            });
        }
          return app;
        }),
      provideAuth(() => getAuth()),
      provideFirestore(() => {
        const firestore = getFirestore();
        enableIndexedDbPersistence(firestore);
        return firestore;
      }),
    ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}
1 Like
13

This was the only thing that worked for me, thanks !!

14

Can please share your app.module and how you made it work. I have been trying to resolve the issue buh no success

15

I thing you are interested in this part:

    provideFirebaseApp(() => {
      const app = initializeApp(firebaseConfig);
      if (Capacitor.isNativePlatform) {
        initializeAuth(app, {
          persistence: indexedDBLocalPersistence
        });
      }
      return app;
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      enableIndexedDbPersistence(firestore);
      return firestore;
    }),
    provideAuth(() => getAuth()),

this is inside the imports array.

1 Like
16

I copied that but still same issue. Can please share your app.module? Did you do any changes in your app.component.ts?

17

My app module is not relevant, but I will post it:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';

import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {firebaseConfig} from './***';
import {provideFirebaseApp, initializeApp} from '@angular/fire/app';
import {enableIndexedDbPersistence, getFirestore, provideFirestore} from '@angular/fire/firestore';
import {getAuth, initializeAuth, provideAuth, indexedDBLocalPersistence} from '@angular/fire/auth';
import {AuthenticationGuardService} from './authentication-guard.service';
import {AuthenticationService} from './authentication.service';
import {Capacitor} from '@capacitor/core';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    HttpClientModule,
    provideFirebaseApp(() => {
      const app = initializeApp(firebaseConfig);
      if (Capacitor.isNativePlatform) {
        initializeAuth(app, {
          persistence: indexedDBLocalPersistence
        });
      }
      return app;
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      enableIndexedDbPersistence(firestore);
      return firestore;
    }),
    provideAuth(() => getAuth()),
  ],
  providers: [AuthenticationGuardService,AuthenticationService, {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

// required for AOT compilation
export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

in the app.component.ts I don’t have anything related to the initialisation.

18

Thank you so much to you and Jay Ordway! I also spent a frustrating amount of time trying to solve this.

19

Realmente me funciono, estoy muy agradecido contigo, gracias gracias gracias!!!