Firebase Auth Emulator keeps suggesting real Google accounts

Question

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)...

triggers 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:

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

Any ideas, please?

Answer 1

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.

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

Answer 2

The list of Google accounts you're looking at is generated by Google based on the accounts you previously used to sign in to the site, using the current browser. Google doesn't know or care which ones might be "real" or "dummy" - they are all just accounts to show. The only control you have over that list is to fully sign out of the accounts you don't want to see.

If you don't want them all listed in the same place, you could try using a different browser (or different browser profiles) for your different types of accounts to keep them separate. The list of signed-in accounts will not follow you from browser to browser.