Cannot use https schemes with useEmulator

[moifort]

Describe your environment

• Operating System version: Mac OS Catalina 10.15.7
• Browser version: Chrome Version 87.0.4280.67 (Build officiel) (x86_64)
• Firebase SDK version: 8.0.1
• Firebase Product: Functions

Describe the problem

When I use useEmulator I cannot use https event if I set a port at 443. But with deprecated useFunctionsEmulator I can use https

Steps to reproduce:

Code

useEmulator('blabla.com', 443)

Chrome console

index.esm.js?7dc7:490 POST http://blabla.com:443/my-project-id/europe-...

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

Right now it's designed to only work with http, but can you tell me more about your use case and why you would like to use https with useEmulator?

[moifort]

Hello @hsubox76 !

First I would like to thanks all the firebase team making this awesome product. Your services highly improve my code quality, increase my delivery time and help me to focus on my users values!

Since you introduce gradually your emulators (👍 for the new auth emulator, I can't wait to see Storage emulator), I improve my CI pipeline and my tests (end-to-end, integration, unit).

I work with git feature branching strategy (one feature, one branch), and every time I create a new branch my CI trigger automatically all tests using an specific docker image and run all the infrastructure from firestore to functions and hosting with my (production bundle SPA). For this part it's not a problem because I use only localhost url for all the emulators.

But recently you add auth emulator and I decided to push further my CI. Now (with the deprecated method), I create a full environment containing all the code of my branch un deploy on docker swarm using Traefik as a reverse proxy (with letsencrypt integration for automatic ssl generation). When I finish my work on the feature I send a specific url like https://mybranchname.myawesomefrebaseproject.com and my client/PO/QA can validate and make feedbacks on my feature. My idea here is to create the closest environment from the firebase production, and for me https is very important because I encounter to many issues in production because of SSL, by using https very early in my development process it help me to fix and validate all the issues before delivering to production.

Before, I use a specific firebase projet as staging, but it's too difficult to maintain with configuration and everything. But with your emulators, testing/validating are easier than ever 😄 !

I hope you understand why is important for me, and I think developers will need this option.

I success to create the environment using only deprecated functions. I have other issues like:

• Firebase JS SDK do not authorize other than localhost url (even if I set url for auth emulator) when redirect
• Firebase emulators UI is not working because it try to access data (functions logs, Firestone data etc) in localhost.

[samtstern]

@moifort thank you for sharing your use case! It definitely makes sense and we love to see developers pushing the emulators as far as they can go.

I'll circulate this to the team and see if it changes any minds about accepting https in useEmulator. If it does change our mind though expect this to take a while, since we'd have to make a change in all of the product SDKs on all platforms 🙃

[moifort]

@sandersn thanks for your quick answer. It's very valuable, for me, to see that you listen and take care about us (developer). Don't worry, I understand, is not an easy task and maybe is not a priority now! I hope that my post will convince the team!

Thanks a lot!

[yuchenshi]

@moifort Thanks for the detailed explanation of your use case here. As a tl;dr, for your specific use case (setting up a preview environment for client/PO/QA), we recommend using real separate Firebase projects (sometimes called "staging / QA projects").

A real project gives you the full benefit of closely matching production behavior (stated as one of your goals) without the hassle of setting up the emulators and reverse proxies. We appreciate your attempt to push the limits of emulators but I'd also like to remind you that testing with emulators won't be sufficient for QA purposes -- for example, you cannot catch errors like missing an index in Firestore Emulator (because the Firestore Emulator does NOT require creating indexes in advance). As another example, Cloud Functions execute really fast in the Functions Emulator but you may still want to test with real function triggers to make sure your app accommodates code starts (and potential concurrency issues). Emulated SSL through Traefik and emulators is also very different from production, as you may expect.

At Firebase, we have to balance among many different goals and for the Emulator Suite, we've made our mind to focus on making it easier to develop, test, and iterate on the app, instead of being a full emulation of production. When given choices, we lean on simpler implementations that provide more help or insights, which may deviate from production. Self-hosted Firebase is an explicit non-goal for us for 1) the reasons above, and 2) we believe a staging project is the way to go.

And just to make sure I'm clear here -- we're still considering whether to add https support with useEmulator, for reasons like consistency with functions emulator etc., but we consider "hosting a QA environment closer to production" neither a reason for or against it since it's not part of the bigger goal. I've created b/175034902 to track the feature request internally and we'll get back to you if we decide to move forward.

[zanona]

Just chiming in with my use case being the need to integrate with Apple/Google Pay from inside a web application where those are only available behind https, which we can get away via tunnelling. i.e: ngrok.
The problem is then the mixed content error with emulator endpoints being blocked since it's being requested from a https environment but served only through http.

[BobbieGoede]

As I said mentioned in #5648, it used to be possible to set the full host allowing us to support https urls. This broke, from what I can see, since changes made in #3906.

export function useFunctionsEmulator(
  functionsInstance: FunctionsService,
--  origin: string
  host: string,
  port: number
): void {
--  functionsInstance.emulatorOrigin = origin;
++  functionsInstance.emulatorOrigin = `http://${host}:${port}`;
}

We rely on this for our dev environment to run behind https proxies, for the same reasons as mentioned above, to keep dev and staging as close as possible to our prod environment.