Firebase HTTP Cloud Function works with Axios but permission-denied with httpsCallable

Question

I want to use httpsCallable because of its support for emulation and no need to write out the whole cloud function url. When I use AXIOS it simply works:

import axios from "axios";

const cloudFunctionURL = window.cloudFunctionBase + "editors-getCompanyEditors";

export async function fetchCompanyEditors(userId: string, companyId: string) {
    try {
        const response = await axios.post(cloudFunctionURL, { userId, companyId });
        const res = response.data;
        return res;
    } catch (error) {
        console.error("Error:", error);
        throw error;
    }
}

but

import { httpsCallable } from "firebase/functions";
import { functions } from "@/js/firebase";

const getCompanyEditors = httpsCallable(functions, 'editors-getCompanyEditors');

export async function fetchCompanyEditors(userId: string, companyId: string) {
  try {
    const result = await getCompanyEditors({ userId, companyId });
    return result.data;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

leads to permission-denied, both on production and localhost. Any idea what could lead to this?

I've downloaded the permission JSON with the cloud function invoker but still get it (and on production (where it has the permissions) it also throws the error

I read threw all the documentation but must have missed sth

Answer 1

You didn't show the code of your function, but I can tell you that you probably didn't write a callable function using onCall as shown in the documentation. If you used onRequest, then you didn't write a callable function - you wrote a normal HTTP function instead. They are not compatible with each other. See: How do Callable Cloud Functions compare to HTTP functions?

Normal HTTP functions using onRequest can't be invoked like callables using the Firebase client SDK. If you want to use the Firebase client SDK, then you will have to write your function using onCall.