AngularFirev16 "Auth instance has already been used to make a network call" upon hotreload using emulator

Question

I successfully upgraded AngularFire to version 16 and now I want to use the emulator with modular mode. I tried setting it up like in the example provided in the official samples found here: https://github.com/angular/angularfire/blob/master/samples/modular/src/app/app.module.ts

This is a snippet of my app.module.ts:

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

  ],
  bootstrap: [AppComponent],
})

export class AppModule {
}

With this I am able to login to my application using credentials from the auth emulator. But as soon as the app is being hotreloaded, i get following error in the console:

ERROR Error: Uncaught (in promise): FirebaseError: Firebase: Auth instance has already been used to make a network call. Auth can no longer be configured to use the emulator. Try calling "connectAuthEmulator()" sooner. (auth/emulator-config-failed).

I would appreciate any help with this issue.

What I found so far is that upon login, the first call to the identity toolkit is correctly directed towards localhost.

http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:lookup?key={{myKey}}

but when reloaded it is directed towards production

https://identitytoolkit.googleapis.com/v1/accounts:lookup?key={{myKey}}

Greg Fenton · Accepted Answer · 2024-01-12 18:20:25Z

0

My suspicion is that you have the onAuthStateChanged() listener running and do not have it configured to "shut down" when that code gets unloaded/reloaded.

answered Jan 12, 2024 at 18:20

Greg Fenton

2,8361 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rueeggl Over a year ago

thanks, Greg for your answer. I am using a simple implementation of github.com/firebase/firebaseui-web (email auth provider) therefore I am not handling onAuthStateChange myself. It looks like firebaseui is not yet supporting v9 nor v10 of firebase according to firebase.google.com/docs/auth/web/firebaseui

Greg Fenton Over a year ago

See the third code snippet in the section of the docs here.

Greg Fenton Over a year ago

BTW: Firebase UI is not a heavily maintained project. According to the docs, they still don't support Firebase Client SDK v9 or v10 directly. Instead you are expected to use the compat version of the SDK which is not the recommended SDK to use in general.

Collectives™ on Stack Overflow

AngularFirev16 "Auth instance has already been used to make a network call" upon hotreload using emulator

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related