1

I have a callable function using the firebase cloud function. My problem with this function is a cors error when trying to use it. Currently, I am using a function like this.

export const sendWhatsapp = functions.region('europe-west2').https.onCall(async (data, context) => {
  
  // verify Firebase Auth ID token
  if (!context.auth) {
    return { message: "Authentication Required!", code: 401 };
  }
  const credential = functions.config().twilio;
  const accountSid = credential?.sid;
  const authToken = credential?.token; 
  const client = require("twilio")(accountSid, authToken);

  const numbers = data?.query?.numbers;
  const text = data?.query?.text;

  let messages = [];
  for (let i = 0; i < numbers; i++) {
    messages.push(
      client.messages.create({
        from: "whatsapp:+",
        body: `Attention! There is {{1}}.`,
        to: "whatsapp:+",
      })
    );
  }

  //.then(message => console.log(message))
  // .catch(e => console.log(e));
  const res = await Promise.all(messages);

  return { message: res, code: 200 };
});

I am using the HTTP function with the on-call method to check if the user is authenticated, I tried to use the HTTP on request, but I can not see where I can make sure the user is authenticated.

export const sendWhatsappApi = functions.region('europe-west2').https.onRequest(async (req, res) => {
  // the same code will be here
});

In the second example, I solved the cors issue, but I could not make sure the user is login, and in the first example, I could make sure the user is login but not allow my app URL to activate this function. If someone knows how to make the first example allow the duplicate URLs I inserted in the firebase Authorised domains section, this will help me a lot. I saw something similar that should work but did not here. Just to be clear, I am requesting a different domain. My nuxt app is running in cloud run, and I am not using the firebase hosting platform. It is working when using firebase hosting, but I want to use cloud run.

The client side code is

const res = await this.$fire.functions.httpsCallable('sendWhatsapp')({
        query: { text: this.text },
      });

The error I am getting for the first example

Access to fetch at 'function url' from origin 'origin url' has been blocked by CORS policy: 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.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
shaked
  • 561
  • 7
  • 19

1 Answers1

1

So apparently, firebase, when it encounters an internal error when running the function, sends a cors error even when the error is something else. The actual error was space and timeout, but the console did not show the exact error but a cors error. So to solve this, I added memory and timeout. I did not need to change the security in the firebase tab. It was already configured.

shaked
  • 561
  • 7
  • 19