Firebase Callable Function + CORS

Question

I'm trying to call a callable Cloud Function from my app, but I'm facing CORS issues.

I can't enable Cors since I don't have access to the request and response on the onCall function. This is my function:

exports.UserInvitation = functions.https.onCall((data, context) => {
  const email = data.email


  return new Promise((resolve, reject) => {
    admin.auth().createUser({
      email: email,
      emailVerified: false,
      password: password
    }).then(resolve).catch((err) => {
      console.error(err.code)
      reject(new functions.https.HttpsError(err.code, err.message))
    })
  })
})

And this is how I call it:

functions.httpsCallable('UserInvitation')({ email: this.input.value }).then((data) => {
      console.log('Sent invitation:', data)
})

Firebase-functions package.json:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "bluebird": "^3.5.1",
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "private": true
}

WEB SDK Firebase version: 4.13.1

CORS should be automatically handled by the onCall handler. I suspect that the error message about CORS is inaccurate, and a result of the function returning 500 internal. What do you see in the Functions Logs in the Firebase Console? — bklimt
You're right, the problem is with my error handler. The documentation says I can reject a promise with a instance of functions.https.HttpsError, but even though I'm doing that I'm getting a 500 error on the client. How can I fix that? — Pietro Coelho
Even if I remove my return statement and add a throw new functions.https.HttpsError('test/code', 'error message') it only returns a object with message and status equals to "INTERNAL" — Pietro Coelho
Ah yes, the status code passed to HttpsError cannot be test/code. It must be one of the standard codes listed here: firebase.google.com/docs/reference/functions/… — bklimt
@bklimt please create an answer with this comment and I'll accept it :) I believe this detail should be added to the firebase onCall documentation — Pietro Coelho

Aido Aido · Accepted Answer · 2020-05-27T11:55:56

For anybody else who has arrived here searching firebase callable functions cors errors, here's my checklist:

Ensure the function is deployed.
Ensure the function name is correct. I was calling recalculatY when it should have been recalculateY. Got a cors error for some reason.
Ensure the function code itself is not throwing an error. Use the emulator to help. This didn't throw a cors error still helpful to know.
Ensure your regions match - I am using europe-west2. I had to both deploy the function with that region, and call it using the region. For a while, I assumed the client would infer the correct region if the function name was correct. That was not the case.

Deploying a callable function to a specific region:

// This is the file in which you define your callable function.
const functions = require('firebase-functions');
...
exports.yourFunc = functions.region('europe-west2').https.onCall(async (data, context) => {
    ...
})

Calling a function in a specific region from the client (in this case, a vuejs web app):

// In my case, this is a vuex store file, but it is safe to assume this is plain old javascript
import firebase from 'firebase/app'
import 'firebase/functions'
...
firebase.app().functions('europe-west2').httpsCallable('yourFunc')

Note: firebase.app().function... vs firebase.app.function...

Firebase Callable Function + CORS

13 Answers