[Auth] Add option to hide banner in auth when using the emulator (#4112)

* Add option to hide banner in auth when using the emulator

* Formatting

* Formatting

* Add changeset

* Update thick-snails-appear.md

Author: sam-gc

.changeset/thick-snails-appear.md

@@ -0,0 +1,6 @@
+---
+"@firebase/auth": minor
+"firebase": minor
+---
+
+Add option to hide banner in auth when using the emulator

packages/auth/src/auth.js

@@ -295,8 +295,9 @@ fireauth.Auth.prototype.useDeviceLanguage = function() {
 /**
  * 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) {
+fireauth.Auth.prototype.useEmulator = function(url, options) {
   // Emulator config can only be set once.
   if (!this.emulatorConfig_) {
     if (!/^https?:\/\//.test(url)) {
@@ -305,7 +306,8 @@ fireauth.Auth.prototype.useEmulator = function(url) {
           'Emulator URL must start with a valid scheme (http:// or https://).');
     }
     // Emit a warning so dev knows we are now in test mode.
-    this.emitEmulatorWarning_();
+    const disableBanner = options ? !!options['disableWarnings'] : false;
+    this.emitEmulatorWarning_(disableBanner);
     // Persist the config.
     this.emulatorConfig_ = { url };
     // Disable app verification.
@@ -319,14 +321,16 @@ fireauth.Auth.prototype.useEmulator = function(url) {
 
 
 /**
- * Emits a console warning and a visual banner if emulator integration is
+ * Emits a console info and a visual banner if emulator integration is
  * enabled.
+ * @param {boolean} disableBanner Whether visual banner should be disabled.
+ * @private
  */
-fireauth.Auth.prototype.emitEmulatorWarning_ = function() {
-  fireauth.util.consoleWarn('WARNING: You are using the Auth Emulator,' +
+fireauth.Auth.prototype.emitEmulatorWarning_ = function(disableBanner) {
+  fireauth.util.consoleInfo('WARNING: You are using the Auth Emulator,' +
     ' which is intended for local testing only.  Do not use with' +
     ' production credentials.');
-  if (goog.global.document) {
+  if (goog.global.document && !disableBanner) {
     fireauth.util.onDomReady().then(() => {
       const ele = goog.global.document.createElement('div');
       ele.innerText = 'Running in emulator mode. Do not use with production' +

packages/auth/src/exports_auth.js

@@ -200,7 +200,8 @@ fireauth.exportlib.exportPrototypeMethods(
       useEmulator: {
         name: 'useEmulator',
         args: [
-          fireauth.args.string('url')
+          fireauth.args.string('url'),
+          fireauth.args.object('options', true)
         ]
       },
       verifyPasswordResetCode: {

packages/auth/src/utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2017 Google Inc.
+ * Copyright 2017 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1406,6 +1406,17 @@ fireauth.util.consoleWarn = function(message) {
 };
 
 
+/**
+ * Logs an info message to the console, if the console is available.
+ * @param {string} message
+ */
+fireauth.util.consoleInfo = function(message) {
+  if (typeof console !== 'undefined' && typeof console.info === 'function') {
+    console.info(message);
+  }
+};
+
+
 /**
  * Parses a UTC time stamp string or number and returns the corresponding UTC
  * date string if valid. Otherwise, returns null.

packages/auth/test/auth_test.js

@@ -914,7 +914,7 @@ function testUseEmulator() {
     goog.testing.recordFunction());
   stubs.replace(
     fireauth.util,
-    'consoleWarn',
+    'consoleInfo',
     goog.testing.recordFunction());
   var handler = goog.testing.recordFunction();
   stubs.replace(
@@ -935,7 +935,7 @@ function testUseEmulator() {
   assertEquals(0, handler.getCallCount());
   assertEquals(
     0, fireauth.RpcHandler.prototype.updateEmulatorConfig.getCallCount());
-  assertEquals(0, fireauth.util.consoleWarn.getCallCount());
+  assertEquals(0, fireauth.util.consoleInfo.getCallCount());
   assertEquals(
     0,
     fireauth.AuthSettings.prototype.setAppVerificationDisabledForTesting.
@@ -958,8 +958,17 @@ function testUseEmulator() {
     fireauth.RpcHandler.prototype.updateEmulatorConfig.getLastCall()
       .getArgument(0)
   );
-  // Should emit a console warning.
-  assertEquals(1, fireauth.util.consoleWarn.getCallCount());
+  // Should emit a console warning and a banner.
+  assertEquals(1, fireauth.util.consoleInfo.getCallCount());
+  if (goog.global.document) {
+    asyncTestCase.waitForSignals(1);
+    fireauth.util.onDomReady().then(() => {
+      const el =
+          goog.global.document.querySelector('.firebase-emulator-warning');
+      assertNotNull(el);
+      asyncTestCase.signal();
+    });
+  }
   // Should disable App verification.
   assertEquals(
     true,
@@ -975,7 +984,7 @@ function testUseEmulator() {
     auth1.getEmulatorConfig());
   assertEquals(
     1, fireauth.RpcHandler.prototype.updateEmulatorConfig.getCallCount());
-  assertEquals(1, fireauth.util.consoleWarn.getCallCount());
+  assertEquals(1, fireauth.util.consoleInfo.getCallCount());
 
   // Updating to different config should still not trigger event.
   auth1.useEmulator('http://emulator.other.domain:9876');
@@ -989,6 +998,58 @@ function testUseEmulator() {
 }
 
 
+function testUseEmulator_withDisableWarnings() {
+  // Listen to emulator config calls on RpcHandler.
+  stubs.replace(
+      fireauth.RpcHandler.prototype, 'updateEmulatorConfig',
+      goog.testing.recordFunction());
+  stubs.replace(fireauth.util, 'consoleInfo', goog.testing.recordFunction());
+  const handler = goog.testing.recordFunction();
+
+  app1 = firebase.initializeApp(config1, appId1);
+  auth1 = app1.auth();
+
+  // Listen to all emulatorConfigChange events dispatched by the Auth instance.
+  goog.events.listen(
+      auth1, fireauth.constants.AuthEventType.EMULATOR_CONFIG_CHANGED, handler);
+
+  assertUndefined(fireauth.constants.emulatorConfig);
+  assertEquals(0, handler.getCallCount());
+  assertEquals(
+      0, fireauth.RpcHandler.prototype.updateEmulatorConfig.getCallCount());
+  assertEquals(0, fireauth.util.consoleInfo.getCallCount());
+
+  // Update the emulator config.
+  auth1.useEmulator(
+      'http://emulator.test.domain:1234', {disableWarnings: true});
+  assertObjectEquals(
+      {
+        url: 'http://emulator.test.domain:1234',
+      },
+      auth1.getEmulatorConfig());
+  // Should notify the RPC handler.
+  assertEquals(
+      1, fireauth.RpcHandler.prototype.updateEmulatorConfig.getCallCount());
+  assertObjectEquals(
+      {
+        url: 'http://emulator.test.domain:1234',
+      },
+      fireauth.RpcHandler.prototype.updateEmulatorConfig.getLastCall()
+          .getArgument(0));
+  // Should emit a console info but not a banner.
+  assertEquals(1, fireauth.util.consoleInfo.getCallCount());
+  if (goog.global.document) {
+    asyncTestCase.waitForSignals(1);
+    fireauth.util.onDomReady().then(() => {
+      const el =
+          goog.global.document.querySelector('.firebase-emulator-warning');
+      assertNull(el);
+      asyncTestCase.signal();
+    });
+  }
+}
+
+
 function testGetSetTenantId() {
   app1 = firebase.initializeApp(config1, appId1);
   auth1 = app1.auth();

packages/auth/test/utils_test.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2017 Google Inc.
+ * Copyright 2017 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1791,8 +1791,8 @@ function testConsoleWarn() {
     // those browsers.
     return;
   }
-  var consoleWarn = mockControl.createMethodMock(goog.global.console, 'warn');
-  var message = 'This is my message.';
+  const consoleWarn = mockControl.createMethodMock(goog.global.console, 'warn');
+  const message = 'This is my message.';
   consoleWarn(message).$once();
 
   mockControl.$replayAll();
@@ -1806,6 +1806,28 @@ function testConsoleWarn_doesntBreakIE() {
 }
 
 
+function testConsoleInfo() {
+  if (typeof console === 'undefined') {
+    // Ignore browsers that don't support console. The test
+    // testConsoleInfo_doesntBreakIE tests that this function doesn't break
+    // those browsers.
+    return;
+  }
+  const consoleInfo = mockControl.createMethodMock(goog.global.console, 'info');
+  const message = 'This is my message.';
+  consoleInfo(message).$once();
+
+  mockControl.$replayAll();
+
+  fireauth.util.consoleInfo(message);
+}
+
+
+function testConsoleInfo_doesntBreakIE() {
+  fireauth.util.consoleInfo('This should not trigger an error in IE.');
+}
+
+
 function testUtcTimestampToDateString() {
   var actual;
   // Null.