Add Emulator Overlay

.changeset/gentle-laws-kneel.md

@@ -0,0 +1,7 @@
+---
+"@firebase/database-compat": patch
+"@firebase/database": patch
+"@firebase/firestore": patch
+---
+
+Add SSL checks to `connectDatabaseEmulator` and `connectFirestoreEmulator`

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)
@@ -482,6 +492,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.ts

@@ -18,7 +18,12 @@ import { Auth } from '../../model/public_types';
 import { AuthErrorCode } from '../errors';
 import { _assert } from '../util/assert';
 import { _castAuth } from './auth_impl';
-import { deepEqual, isCloudWorkstation, pingServer } from '@firebase/util';
+import {
+  deepEqual,
+  isCloudWorkstation,
+  pingServer,
+  updateStatus
+} from '@firebase/util';
 
 /**
  * Changes the {@link Auth} instance to communicate with the Firebase Auth Emulator, instead of production
@@ -98,7 +103,7 @@ export function connectAuthEmulator(
   authInternal.settings.appVerificationDisabledForTesting = true;
 
   if (!disableWarnings) {
-    emitEmulatorWarning();
+    emitEmulatorWarning(isCloudWorkstation(emulatorConfig.host));
   }
 
   // Workaround to get cookies in Firebase Studio
@@ -143,38 +148,19 @@ 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);
-  }
-
+function emitEmulatorWarning(isCloudWorkstation: boolean): void {
+  updateStatus(
+    {
+      name: 'Auth',
+      isRunningEmulator: true
+    },
+    isCloudWorkstation
+  );
   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/components.ts

@@ -28,7 +28,7 @@ import { Datastore, newDatastore } from '../remote/datastore';
 import { Code, FirestoreError } from '../util/error';
 import { logDebug } from '../util/log';
 
-import { FirestoreSettingsImpl } from './settings';
+import { FirestoreSettingsImpl, PrivateSettings } from './settings';
 
 export const LOG_TAG = 'ComponentProvider';
 
@@ -110,6 +110,7 @@ export function makeDatabaseInfo(
   persistenceKey: string,
   settings: FirestoreSettingsImpl
 ): DatabaseInfo {
+  const privateSettings = settings as PrivateSettings;
   return new DatabaseInfo(
     databaseId,
     appId,

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

@@ -28,6 +28,7 @@ import {
   EmulatorMockTokenOptions,
   getDefaultEmulatorHostnameAndPort,
   isCloudWorkstation,
+  updateStatus,
   pingServer
 } from '@firebase/util';
 
@@ -142,6 +143,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;
   }
 

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;
 }

packages/firestore/src/platform/browser_lite/fetch_connection.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { isCloudWorkstation } from '@firebase/util';
+
 import { Token } from '../../api/credentials';
 import { Stream } from '../../remote/connection';
 import { RestConnection } from '../../remote/rest_connection';

packages/storage/src/implementation/connection.ts

@@ -44,7 +44,8 @@ export interface Connection<T extends ConnectionType> {
     method: string,
     isUsingEmulator: boolean,
     body?: ArrayBufferView | Blob | string | null,
-    headers?: Headers
+    headers?: Headers,
+    isUsingEmulator?: boolean
   ): Promise<void>;
 
   getErrorCode(): ErrorCode;

packages/storage/src/platform/browser/connection.ts

@@ -65,7 +65,8 @@ abstract class XhrConnection<T extends ConnectionType>
     method: string,
     isUsingEmulator: boolean,
     body?: ArrayBufferView | Blob | string,
-    headers?: Headers
+    headers?: Headers,
+    isUsingEmulator?: boolean
   ): Promise<void> {
     if (this.sent_) {
       throw internalError('cannot .send() more than once');

packages/util/src/emulator.ts

@@ -140,3 +140,65 @@
     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';
+      parentDiv.classList.add('firebase-emulator-warning');
+      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();
+    }
+  }
+}