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.