Search code examples
angularfirebase-authenticationangularfire2firebaseuifirebase-tools

Firebase Auth Emulator keeps suggesting real Google accounts

TL;DR Firebase Auth Emulator keeps suggesting real Google accounts. One in a hundred attempts result in an emulator dummy account popup.

DETAILED

firebase providers setup:

importProvidersFrom(
      provideAuth(() => {
        const auth = getAuth();
        if (environment.useEmulators) {
          connectAuthEmulator(auth, 'http://127.0.0.1:9099');
        }
        return auth;
      }),

clicking on 'login':

<button (click)="onLoginButtonClicked()>login</button>
onLoginButtonClicked() {
this.matDialog.open(FirebaseUiComponent)...

login-button



triggers FirebaseUI modal': firebaseui-modal

import fbc_app from 'firebase/compat/app';
import { AngularFireAuth as Afc_Auth } from '@angular/fire/compat/auth';
import * as fbui from 'firebaseui';


export class FirebaseUiComponent implements OnInit, OnDestroy {
  afc_Auth = inject(Afc_Auth);
  dialogRef = inject(MatDialogRef<FirebaseUiComponent>);

  ui!: fbui.auth.AuthUI;

  uiConfig = {
    callbacks: {
      signInSuccessWithAuthResult: (authResult) => this.dialogRef.close(authResult),
      signInFailure: (error) => this.dialogRef.close(error),
    },
    signInOptions: [fbc_app.auth.GoogleAuthProvider.PROVIDER_ID],
    signInFlow: 'popup',
    // ...
  };

  ngOnInit() {
    this.afc_Auth.app.then(app => {
      this.ui = new fbui.auth.AuthUI(app.auth());
      this.ui.start('#firebaseui-auth-container', this.uiConfig);
      this.ui.disableAutoSignIn();
    });
  }

  ngOnDestroy() { this.ui.delete(); }
}




after clicking on 'Sign in with Google' a modal with a 'dummy' account, or an 'add new account' button should show:

modal-with-dummy-account



...instead I'm getting a popup with my 'real' Google accounts to select from:

modal-with-real-accounts



Any ideas, please?

Solution

  • I resorted to removing multiple dependencies from the project and adding them back one by one.
    Turns out that the culprit was the "firebaseui" package. After removing this package (switching it for my custom login component), the emulators started working fine.

    When we click 'login'

    import { GoogleAuthProvider, getAuth, signInWithPopup } from '@angular/fire/auth';
signInWithPopup(auth, provider).then((result) => { ...

    IF the auth-emulator IS NOT running/connected, we get the standard Google accounts selector with the list of Google accounts that were used to sign in previously using that browser.


    IF the auth-emulator IS running/connected, we get the emulator account selector (auth-emulator-login-widget) with "dummy"/"fake" accounts stored in the emulator (if previously created). There's also a "+ Add new account" button to create new "dummy"/"fake" accounts if necessary.

    auth-emulator-login-widget


    I hope this answer will help someone facing this issue and save them some time.