Added emulator status

Author: maneesht

common/api-review/util.api.md

@@ -140,6 +140,16 @@ export type EmulatorMockTokenOptions = ({
     sub: string;
 }) & Partial<FirebaseIdToken>;
 
+// Warning: (ae-missing-release-tag) "EmulatorStatus" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export interface EmulatorStatus {
+    // (undocumented)
+    isRunningEmulator: boolean;
+    // (undocumented)
+    name: string;
+}
+
 // Warning: (ae-missing-release-tag) "ErrorData" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -481,6 +491,11 @@ export interface Subscribe<T> {
 // @public (undocumented)
 export type Unsubscribe = () => void;
 
+// Warning: (ae-missing-release-tag) "updateStatus" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export function updateStatus(emulatorStatus: EmulatorStatus, isCloudWorkstation: boolean): void;
+
 // Warning: (ae-missing-release-tag) "validateArgCount" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public

packages/auth/src/api/index.ts

@@ -19,7 +19,8 @@ import {
   FirebaseError,
   isCloudflareWorker,
   isCloudWorkstation,
-  querystring
+  querystring,
+  updateStatus
 } from '@firebase/util';
 
 import { AuthErrorCode, NamedErrorParams } from '../core/errors';
@@ -198,7 +199,16 @@ export async function _performFetchWithErrorHandling<V>(
   customErrorMap: Partial<ServerErrorMap<ServerError>>,
   fetchFn: () => Promise<Response>
 ): Promise<V> {
-  (auth as AuthInternal)._canInitEmulator = false;
+  const authInternal = auth as AuthInternal;
+  updateStatus(
+    {
+      name: 'Auth',
+      isRunningEmulator: authInternal.emulatorConfig !== undefined
+    },
+    authInternal.emulatorConfig!! &&
+      isCloudWorkstation(authInternal.emulatorConfig.host)
+  );
+  authInternal._canInitEmulator = false;
   const errorMap = { ...SERVER_ERROR_MAP, ...customErrorMap };
   try {
     const networkTimeout = new NetworkTimeout<Response>(auth);

packages/auth/src/core/auth/emulator.test.ts

@@ -124,7 +124,7 @@ describe.only('core/auth/emulator', () => {
       });
     });
 
-  it('subsequent calls update the endpoint appropriately', async () => {
+    it('subsequent calls update the endpoint appropriately', async () => {
       connectAuthEmulator(auth, 'http://127.0.0.1:2021');
       expect(auth.emulatorConfig).to.eql({
         protocol: 'http',

packages/auth/src/core/auth/emulator.ts

@@ -18,7 +18,7 @@ import { Auth } from '../../model/public_types';
 import { AuthErrorCode } from '../errors';
 import { _assert } from '../util/assert';
 import { _castAuth } from './auth_impl';
-import { deepEqual } from '@firebase/util';
+import { deepEqual, isCloudWorkstation, updateStatus } from '@firebase/util';
 
 /**
  * Changes the {@link Auth} instance to communicate with the Firebase Auth Emulator, instead of production
@@ -98,7 +98,13 @@ export function connectAuthEmulator(
   authInternal.settings.appVerificationDisabledForTesting = true;
 
   if (!disableWarnings) {
-    emitEmulatorWarning();
+    updateStatus(
+      {
+        name: 'Auth',
+        isRunningEmulator: true
+      },
+      isCloudWorkstation(emulatorConfig.host)
+    );
   }
 }
 
@@ -137,39 +143,3 @@ function parsePort(portStr: string): number | null {
   }
   return port;
 }
-
-function emitEmulatorWarning(): 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 = '#b50000';
-    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') {
-    if (document.readyState === 'loading') {
-      window.addEventListener('DOMContentLoaded', attachBanner);
-    } else {
-      attachBanner();
-    }
-  }
-}

packages/firestore/src/lite-api/database.ts

@@ -26,7 +26,9 @@ import {
   createMockUserToken,
   deepEqual,
   EmulatorMockTokenOptions,
-  getDefaultEmulatorHostnameAndPort
+  getDefaultEmulatorHostnameAndPort,
+  isCloudWorkstation,
+  updateStatus
 } from '@firebase/util';
 
 import {
@@ -140,6 +142,13 @@ export class Firestore implements FirestoreService {
 
   _freezeSettings(): FirestoreSettingsImpl {
     this._settingsFrozen = true;
+    updateStatus(
+      {
+        name: 'Firestore',
+        isRunningEmulator: (this._settings as PrivateSettings).emulator!!
+      },
+      isCloudWorkstation(this._settings.host)
+    );
     return this._settings;
   }
 
@@ -297,6 +306,7 @@ export function getFirestore(
   if (!db._initialized) {
     const emulator = getDefaultEmulatorHostnameAndPort('firestore');
     if (emulator) {
+      console.log('emulator');
       connectFirestoreEmulator(db, ...emulator);
     }
   }
@@ -346,8 +356,10 @@ export function connectFirestoreEmulator(
     ...settings,
     host: newHostSetting,
     ssl,
-    emulatorOptions: options
+    emulatorOptions: options,
+    emulator: true
   };
+  console.log(newConfig);
   // No-op if the new configuration matches the current configuration. This supports SSR
   // enviornments which might call `connectFirestoreEmulator` multiple times as a standard practice.
   if (deepEqual(newConfig, existingConfig)) {

packages/firestore/src/lite-api/settings.ts

@@ -83,6 +83,7 @@ export interface PrivateSettings extends FirestoreSettings {
   experimentalLongPollingOptions?: ExperimentalLongPollingOptions;
   useFetchStreams?: boolean;
   emulatorOptions?: { mockUserToken?: EmulatorMockTokenOptions | string };
+  emulator?: boolean;
 
   localCache?: FirestoreLocalCache;
 }
@@ -112,6 +113,8 @@ export class FirestoreSettingsImpl {
   readonly useFetchStreams: boolean;
   readonly localCache?: FirestoreLocalCache;
 
+  readonly emulator?: boolean;
+
   // Can be a google-auth-library or gapi client.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   credentials?: any;
@@ -130,6 +133,7 @@ export class FirestoreSettingsImpl {
       this.host = settings.host;
       this.ssl = settings.ssl ?? DEFAULT_SSL;
     }
+    this.emulator = settings.emulator;
 
     this.credentials = settings.credentials;
     this.ignoreUndefinedProperties = !!settings.ignoreUndefinedProperties;

packages/util/src/emulator.ts

@@ -16,6 +16,7 @@
  */
 
 import { base64urlEncodeWithoutPadding } from './crypt';
+import { FirebaseApp } from '@firebase/app';
 
 // Firebase Auth tokens contain snake_case claims following the JWT standard / convention.
 /* eslint-disable camelcase */
@@ -140,3 +141,64 @@ export function createMockUserToken(
     signature
   ].join('.');
 }
+
+function getOrCreate(id: string): { created: boolean; element: HTMLElement } {
+  let parentDiv = document.getElementById(id);
+  let created = false;
+  if (!parentDiv) {
+    parentDiv = document.createElement('div');
+    parentDiv.setAttribute('id', id);
+    created = true;
+  }
+  return { created, element: parentDiv };
+}
+
+export interface EmulatorStatus {
+  name: string;
+  isRunningEmulator: boolean;
+}
+export function updateStatus(
+  emulatorStatus: EmulatorStatus,
+  isCloudWorkstation: boolean
+) {
+  function setupDom() {
+    const parentDivId = `__firebase_status`;
+
+    let { element: parentDiv, created } = getOrCreate(parentDivId);
+
+    if (created) {
+      parentDiv.style.position = 'fixed';
+      parentDiv.style.bottom = '0px';
+      parentDiv.style.border = 'solid 1px';
+      parentDiv.style.width = '100%';
+      parentDiv.style.borderRadius = '10px';
+      parentDiv.style.padding = '.5em';
+      parentDiv.style.textAlign = 'center';
+      document.body.appendChild(parentDiv);
+    }
+
+    const { name, isRunningEmulator } = emulatorStatus;
+    const { element, created: productDivCreated } = getOrCreate(
+      `${parentDivId}_${name}`
+    );
+    // If in prod, and not using a cloud workstation, we should remove the node, as the banner can be distracting.
+    if (!isRunningEmulator && !isCloudWorkstation) {
+      element.remove();
+      return;
+    }
+    if (productDivCreated) {
+      parentDiv.appendChild(element);
+    }
+    element.style.color = isRunningEmulator ? 'green' : 'red';
+    element.innerHTML = `${name} is running in ${
+      isRunningEmulator ? 'emulator' : 'prod'
+    } mode`;
+  }
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+      window.addEventListener('DOMContentLoaded', setupDom);
+    } else {
+      setupDom();
+    }
+  }
+}