Angularfire: Auth useEmulator() does not redirect authState requests to emulator

[jornetsimon]

Version info

Angular:
10.2.0

Firebase:
8.0.1

AngularFire:
6.0.4

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Simple context recreation in a repo since StackBlitz won't help with emulators.
https://github.com/jornetsimon/af-auth-debug

Steps to set up and reproduce

• Set up the Firebase Authentication emulator.
• Set up an authentication method (email/password for example) and implement it on a page
• Call _this.afAuth.useEmulator('http://localhost:9099/')_ (or whatever the port is set to).
• Subscribe to authState from another page
• Sign up : the user is authenticated correctly
• Reload the app
• The call to authState returns a 400 _INVALID_ID_TOKEN_ error, and the request URL points to Firebase servers (googleapis.com)

Debug output

Without useEmulator :

With useEmulator :

Expected behavior

When using useEmulator(), the call to retrieve the authState should target the emulator (localhost:9099).
AngularFireAuth.user and AngularFireAuth.user should return the previously authenticated user.

Actual behavior

During the sign up process (createUserWithEmailAndPassword() / signInWithEmailLink), the calls point to the emulator.
But that is not the case with authState.

[jornetsimon]

For others looking for a solution in the meantime, a simple Chrome extension to redirect traffic from Google APIs Identity Toolkit to the local emulator looks like the easiest.
Careful when testing outside you dev environment though.

[jamesdaniels]

Check out the new USE_EMULATOR DI token in 6.1.0-rc.2, it should have ya covered.

{ provide: USE_EMULATOR, useValue: ['localhost', 9099] }