Firebase-tools: Emulator is calling https.callable functions remotely instead of from localhost

[rmoskal]

[REQUIRED] Environment info

firebase-tools:

6.10.0

Platform:

Fedora 30

[REQUIRED] Test case

I have a very simple firebase https.callable function:

const functions = require('firebase-functions');

const admin = require('firebase-admin');
admin.initializeApp();

exports.oauth = functions.https.onCall((data, ctx) => {

    return ({ok:1})

});

And in my calling code

const oauth = Firebase.functions().httpsCallable('oauth')
oauth('foo').then(console.log)

[REQUIRED] Steps to reproduce

You just need to initialize FB all call the above in some front end code

[REQUIRED] Expected behavior

After running firebase serve, I expected my front end code to call the function on localhost, as in the last line below:

✔  functions: Using node@8 from host.
✔  functions: Emulator started at http://localhost:5001
i  functions: Watching "/home/rob/development/stripmall/src/try1/web_app/functions" for Cloud Functions...
i  hosting: Serving hosting files from: build
✔  hosting: Local server: http://localhost:5000
i  Your code has been provided a "firebase-admin" instance.
**i  functions: HTTP trigger initialized at http://localhost:5001/stripmall-0001/us-central1/oauth**

[REQUIRED] Actual behavior

Instead, my front end code is making CORS requests against the deployed functions url. But note, the url is malformed (undefined is in the place where my project id should be). The result is the same whether I deploy the function or not.

Access to fetch at 'https://us-central1-undefined.cloudfunctions.net/oauth' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
app.js:206

Firebase auth is working fine in the front end application. The function is working fine in the shell.

[google-oss-bot]

This issue does not have all the information required by the template. Looks like you forgot to fill out some sections. Please update the issue with more information.

[samtstern]

@rmoskal is this code in your web frontent?

const oauth = Firebase.functions().httpsCallable('oauth')
oauth('foo').then(console.log)

It does not automatically know about the functions emulator. Instead you have to tell it:

Firebase.functions().useFunctionsEmulator('http://localhost:5001') 

[GriffinJohnston]

@samtstern Sorry to comment on a closed issue - but I just wanted to point out that this information doesn't appear anywhere in the functions emulator docs. Seems like a significant oversight to me. Thanks for listening! https://firebase.google.com/docs/functions/local-emulator

[samtstern]

@GriffinJohnston thanks for the feedback! Right now we document this behavior here:
https://firebase.google.com/docs/emulator-suite/connect_and_prototype

But you're right, it's confusing that the /functions/local-emulator docs are something else entirely.

[Elijer]

@samtstern Just to make sure I'm not making a dumb mistake, where does line:
Firebase.functions().useFunctionsEmulator('http://localhost:5001')
Get put? Somewhere in the public folder, like when the doc gets loaded? I'm putting it here:

document.addEventListener("DOMContentLoaded", event => {
  const app = firebase.app();
  const db = firebase.firestore();

  var functions = firebase.functions();
  // this following line is to make functions use the emulator
  //firebase.functions().useFunctionsEmulator("http://localhost:5001");
  var stripe = Stripe('pk_test_FjTxRNal2FWcwhlqw0WtIETQ00ZDxO3D9S');  
  document.getElementById("banner-login").innerText = "login";

  ```if (window.location.hostname === "localhost") {
    firebase.functions().useFunctionsEmulator("http://localhost:5001"); //wtfwtfwtfwtf
    console.log("localhost detected!");
    db.settings({
      host: "localhost:8080",
      ssl: false
    });
  }
});

And my https.callable functions are still getting called from the live server, not the emulators.

[GriffinJohnston]

@Elijer I put all this in an init file. So I'll do something like:

const func = firebase.functions()

if (window.location.host.includes('localhost')) {
  func.useFunctionsEmulator('http://localhost:5001')
}

export { func, ... }

[Elijer]

@GriffinJohnston Thanks for the reply Griffin. In any case, I reset to my last clean commit and my code worked. What you're writing looks the same as what I wrote up above.

Putting the document.ready stuff in its own folder is maybe a good organizational technique though.

[samtstern]

@Elijer @GriffinJohnston that all looks correct! If you're still having trouble with this please file a new issue.

[Alynva]

Oh my god, I spent so much time on this. I was getting just "Error: Response is not valid JSON object." because I don't deployed the function yet. I had to debug the source code of the lib to figure out that it was trying to use the cloud URL. The useFunctionsEmulator just works fine, but the docs of it are not linked anywhere in other languages.

[samtstern]

@Alynva sorry to hear that, are there other pages in the docs you think we should link to there from?

[Alynva]

@samtstern basically the submenus of "Connect your app and prototype" in the sidebar doesn't appear when other languages are selected. When you already are in one of these submenus and change the language, all the sidebar disappear. Actually, there are others pages where the sidebar just doesn't appear, for example this, this, and so on...

[samtstern]

@Alynva ah you're right, thank you for noticing! I'll look into the translation pipeline.