Add the warning banner / console message to TS Auth SDK (#4119)

* Add emulator banner to typescript SDK

* Formatting

* Formatting

* Make the api conform to specifications

* Formatting

Author: sam-gc

packages-exp/auth-compat-exp/src/auth.ts

@@ -97,8 +97,8 @@ export class Auth
   signOut(): Promise<void> {
     return this.auth.signOut();
   }
-  useEmulator(url: string): void {
-    this.auth.useEmulator(url);
+  useEmulator(url: string, options?: { disableWarnings: boolean }): void {
+    this.auth.useEmulator(url, options);
   }
   applyActionCode(code: string): Promise<void> {
     return impl.applyActionCode(this.auth, code);

packages-exp/auth-exp/src/core/auth/auth_impl.test.ts

@@ -486,6 +486,16 @@ describe('core/auth/auth_impl useEmulator', () => {
 
   afterEach(() => {
     fetch.tearDown();
+    sinon.restore();
+
+    // The DOM persists through tests; remove the banner if it is attached
+    const banner =
+      typeof document !== 'undefined'
+        ? document.querySelector('.firebase-emulator-warning')
+        : null;
+    if (banner) {
+      banner.parentElement?.removeChild(banner);
+    }
   });
 
   context('useEmulator', () => {
@@ -519,6 +529,41 @@ describe('core/auth/auth_impl useEmulator', () => {
         'auth/invalid-emulator-scheme'
       );
     });
+
+    it('attaches a banner to the DOM', () => {
+      auth.useEmulator('http://localhost:2020');
+      if (typeof document !== 'undefined') {
+        const el = document.querySelector('.firebase-emulator-warning')!;
+        expect(el).not.to.be.null;
+        expect(el.textContent).to.eq(
+          'Running in emulator mode. ' +
+            'Do not use with production credentials.'
+        );
+      }
+    });
+
+    it('logs out a warning to the console', () => {
+      sinon.stub(console, 'info');
+      auth.useEmulator('http://localhost:2020');
+      expect(console.info).to.have.been.calledWith(
+        'WARNING: You are using the Auth Emulator,' +
+          ' which is intended for local testing only.  Do not use with' +
+          ' production credentials.'
+      );
+    });
+
+    it('logs out the warning but has no banner if disableBanner true', () => {
+      sinon.stub(console, 'info');
+      auth.useEmulator('http://localhost:2020', { disableWarnings: true });
+      expect(console.info).to.have.been.calledWith(
+        'WARNING: You are using the Auth Emulator,' +
+          ' which is intended for local testing only.  Do not use with' +
+          ' production credentials.'
+      );
+      if (typeof document !== 'undefined') {
+        expect(document.querySelector('.firebase-emulator-warning')).to.be.null;
+      }
+    });
   });
 
   context('toJSON', () => {

packages-exp/auth-exp/src/core/auth/auth_impl.ts

@@ -271,7 +271,7 @@ export class AuthImpl implements Auth, _FirebaseService {
     this.languageCode = _getUserLanguage();
   }
 
-  useEmulator(url: string): void {
+  useEmulator(url: string, options?: { disableWarnings: boolean }): void {
     _assert(this._canInitEmulator, this, AuthErrorCode.EMULATOR_CONFIG_FAILED);
 
     _assert(
@@ -282,6 +282,7 @@ export class AuthImpl implements Auth, _FirebaseService {
 
     this.config.emulator = { url };
     this.settings.appVerificationDisabledForTesting = true;
+    emitEmulatorWarning(!!options?.disableWarnings);
   }
 
   async _delete(): Promise<void> {
@@ -567,3 +568,43 @@ class Subscription<T> {
     return this.observer.next.bind(this.observer);
   }
 }
+
+function emitEmulatorWarning(disableBanner: boolean): void {
+  function attachBanner(): void {
+    const el = document.createElement('p');
+    const sty = el.style;
+    el.innerText =
+      'Running in emulator mode. Do not use with production credentials.';
+    sty.position = 'fixed';
+    sty.width = '100%';
+    sty.backgroundColor = '#ffffff';
+    sty.border = '.1em solid #000000';
+    sty.color = '#ff0000';
+    sty.bottom = '0px';
+    sty.left = '0px';
+    sty.margin = '0px';
+    sty.zIndex = '10000';
+    sty.textAlign = 'center';
+    el.classList.add('firebase-emulator-warning');
+    document.body.appendChild(el);
+  }
+
+  if (typeof console !== 'undefined' && typeof console.info === 'function') {
+    console.info(
+      'WARNING: You are using the Auth Emulator,' +
+        ' which is intended for local testing only.  Do not use with' +
+        ' production credentials.'
+    );
+  }
+  if (
+    typeof window !== 'undefined' &&
+    typeof document !== 'undefined' &&
+    !disableBanner
+  ) {
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', attachBanner);
+    } else {
+      attachBanner();
+    }
+  }
+}

packages-exp/auth-types-exp/index.d.ts

@@ -316,8 +316,9 @@ export interface Auth {
    * traffic is not encrypted.
    *
    * @param url - The URL at which the emulator is running (eg, 'http://localhost:9099').
+   * @param disableBanner - (Optional: default false) Disable the warning banner attached to the DOM
    */
-  useEmulator(url: string): void;
+  useEmulator(url: string, options?: { disableWarnings: boolean }): void;
   /**
    * Signs out the current user.
    */