I'm currently working on an app using Firebase. When I'm working outside the emulators, everything is working well. However, when I launch the emulators, I'm not able anymore to connect with Google nor any other service, the popup doesn't load.

I am using these packages:

• @angular/fire v. 7.4.1
• firebase v. 9.9.1

Other information:

• I am not receiving any error in the console
• Complete code can be found here, if needed. dev is the main development branch.

Here's the code for the auth.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { GoogleAuthProvider, AuthProvider } from "firebase/auth"

@Injectable({providedIn: 'root'})
export class AuthService {
    constructor(private afAuth: AngularFireAuth) { }
    
    public googleLogin() {
        this.loginWithProvider(new GoogleAuthProvider());
    }
    
    private loginWithProvider(provider: AuthProvider) {
        return this.afAuth.signInWithPopup(provider).then(console.log).catch(console.log)
    }
    
    public logout() {
        return this.afAuth.signOut();
    }
}

And here's the code for app.module.ts:

@NgModule({
  declarations: [
    AppComponent
    // other components...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireFunctionsModule
  ],
  providers: [
    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['https://localhost', 9099] : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['https://localhost', 8080] : undefined },
    { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['https://localhost', 5001] : undefined },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Do you know what might be wrong? Thanks!

CodePudding user response：

This issue exists in Firebase 9 / AngularFire 7 when using the compatibility API.

Option 1

Disable the Auth Emulator and run emulators with live authentication. This is obviously not ideal, but can work as a quick-fix in a pinch.

Option 2

Migrate to the modular API. Note that this will require you to upgrade the entire project to new modular API.

app.module.ts:

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, connectAuthEmulator, getAuth } from '@angular/fire/auth';
import { connectFirestoreEmulator, getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
import { connectFunctionsEmulator, FunctionsModule, getFunctions, provideFunctions } from '@angular/fire/functions';

let resolvePersistenceEnabled: (enabled: boolean) => void;
export const persistenceEnabled = new Promise<boolean>(resolve => {
  resolvePersistenceEnabled = resolve;
});

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => {
      const auth = getAuth()
      if (environment.useEmulator) {
        connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
      }
      return auth
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      if (environment.useEmulator) {
        connectFirestoreEmulator(firestore, 'localhost', 8080)
      }
      enableMultiTabIndexedDbPersistence(firestore).then(
        () => resolvePersistenceEnabled(true),
        () => resolvePersistenceEnabled(false)
      )
      return firestore
    }),
    provideFunctions(() => {
      const functions = getFunctions();
      if (environment.useEmulator) {
        connectFunctionsEmulator(functions, 'localhost', 5001)
      }
      return functions
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

For more details on the new modular API check out the following resources:

• https://github.com/angular/angularfire (under the Example Use section)
• https://github.com/angular/angularfire/tree/master/samples/modular (example code)
• https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0 (reference)