[Feature Request] add 'disableWarnings' option to emulators

[geromegrignon]

Version info

Angular:
11.0.5

Firebase:
8.0

AngularFire:
6.1.4

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Description

When using the emulators tokens (https://github.com/angular/angularfire/blob/master/docs/emulators/emulators.md), it uses the useEmulator(url) firebase-js-jdk function under the hood.
But it miss the disableWarnings option is stated here : https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/src/auth.js

/**
 * Sets the emulator configuration (go/firebase-emulator-connection-api).
 * @param {string} url The url for the Auth emulator.
 * @param {?Object=} options Optional options to specify emulator settings.
 */
fireauth.Auth.prototype.useEmulator = function(url, options) {
  // Emulator config can only be set once.
  if (!this.emulatorConfig_) {
    if (!/^https?:\/\//.test(url)) {
      throw new fireauth.AuthError(
          fireauth.authenum.Error.ARGUMENT_ERROR,
          'Emulator URL must start with a valid scheme (http:// or https://).');
    }
    // Emit a warning so dev knows we are now in test mode.
    const disableBanner = options ? !!options['disableWarnings'] : false;
    this.emitEmulatorWarning_(disableBanner);
    // Persist the config.
    this.emulatorConfig_ = { url };
    // Disable app verification.
    this.settings_().setAppVerificationDisabledForTesting(true);
    // Update RPC handler endpoints.
    this.rpcHandler_.updateEmulatorConfig(this.emulatorConfig_);
    // Notify external event listeners.
    this.notifyEmulatorConfigListeners_();
  }
}

This option allows to hide the bottom banner :

How to reproduce these conditions

Steps to set up and reproduce

• create an angular project with ng new myProject
• install firebase tools with npm install -g firebase-tools
• run firebase init to initialize a firebase project with at least one feature
• run firebase init and choose 'emulators' to setup the emulators for the previous chosen features
• add the angular-fire tokens to the providers array of the AppModule
• run ng serve

The banner should be visible.

Expected behavior

The token should be improved by adding the disableWarnings option

Actual behavior

The banner is always visible and can hide content.

Proposal

I can create a PR if you approve this change (it'll be applied to each token).

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[lbar]

Waiting for this. Any plans for resolution please?

[geromegrignon]

@lbar i'm waiting for validation before submitting a PR.
Meanwhile you can hide the banner with css :

.firebase-emulator-warning {
  // hide the warning banner as AngularFire doesn't support the 'disableWarnings' option
  display: none;
}

[GrandSchtroumpf]

@geromegrignon What kind of validation you're waiting for ?

The way I see it, to solve this issue one should:

• Update the UseEmulatorArguments type to [string, number, { disableWarnings: boolean }]
• Change the useEmulator to something like:

if (useEmulator) {
  // Firebase Auth doesn't conform to the useEmulator convention, let's smooth that over
  const [url, port, options] = useEmulator;
  auth.useEmulator(`http://${url}:${port)}`, options);
}

[geromegrignon]

@GrandSchtroumpf i wanted to make sure there is no work in progress about that.

I created a PR using your solution.
Thanks for the feedback.

[jamesdaniels]

Addressed in v7

[Trindade7]

changing the injection token URL from localhost to http://localhost worked for me:

...
{ provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9099] : undefined },
...

[Premodial]

Thanks @Trindade7