CORS error on httpsCallable firebase in Create React App

Question

SOLVED - See my answer below.

Callable function is causing CORS error like this:

Access to fetch at 'https://us-central1-careerhub-a50a2.cloudfunctions.net/createUser' from origin 'http://localhost:3000' 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.

Function code:

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

    admin.auth().createUser({
        email: email,
        emailVerified: false,
        password: password
    }).then((res) => {
        return {
            response: res
        }
    }).catch((err) => {
        return {err}
    })

})

Client-side:

    const handleAddUser = () => {
      let pswd = passwordGen(7)
      const createUser = firebase.functions().httpsCallable('createUser');
      createUser({email: email, password: pswd}).then(function(result) {
        let res = result.data
        console.log(res)
      }).catch(function(error) {
        console.log(error.code)
      })

    }

package.json

{
  "name": "careerhub-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.0.2",
    "firebase": "^7.10.0",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-email-editor": "^1.0.0",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "recharts": "^2.0.0-beta.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This error persists even if I'm offline.

Things I've tried:

Updating firebase SDK
Adding "proxy" : '...' to package.json
Using basic functions from the cloud functions guides
Deleting firebase app and deleting function and redeploying
Adding const cors = require('cors')({origin: true}); to function

You should add cors in your firebase function. check this stackoverflow.com/questions/57326098/… — David Agustin Melgar
@DavidAgustinMelgar forgot to add that I had tried this to no success. Tried again to be certain with no luck. — Tom West

Tom West Tom West · Accepted Answer · 2020-04-02T03:49:46

The error turned out to be a poorly documented change on Google's end around IAM permissions, which are not clearly accessible via the Firebase console.

The Cause:

Cloud functions were forbidding access to the function. Newly created functions did not have a Cloud Functions Invoker. This change was implemented on Jan 15, 2020

Solution:

Create Cloud Functions Invoker and set to allUsers. https://cloud.google.com/functions/docs/securing/managing-access-iam

CORS error on httpsCallable firebase in Create React App

1 Answers