Hi,
I’m currently developing an UI kit issue panel app using Atlassian Forge, and I am having trouble integrating Twilio’s WhatsApp API. I’m trying to send WhatsApp messages from Jira using Twilio, but my current approach cannot seem to authenticate properly and is throwing a 401 error
Error sending WhatsApp message: Error:
Twilio API request failed with status 401
at Object.sendWhatsAppMessage (webpack://jira-issue-panel-ui-kit/src/index.jsx:111:1)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:31:1)
at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13:1)
at async (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:34:1)
at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13:1)
at async (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:96:1)
at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13:1)
at async (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:34:1)
at async asyncMap (webpack://jira-issue-panel-ui-kit/node_modules/@forge/ui/out/reconcile.js:13:1)
Here’s a brief overview of my setup:
import {invokeRemote} from '@forge/api';
const App = () => {
const sendWhatsappMessage = async () => {
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const messageBody = "Hello! This is a WhatsApp message from Jira.";
const authHeader = 'Basic ' + Buffer.from(accountSid + ':' + authToken).toString('base64');
try {
console.log("Before making the Twilio API call");
const response = await invokeRemote('twilio-remote', {
path: `/2010-04-01/Accounts/${accountSid}/Messages.json`,
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': authHeader
},
body: new URLSearchParams({
From: 'whatsapp:+987654321',
To: 'whatsapp:+123456789',
Body: messageBody
}).toString()
});
console.log("Twilio API call made, checking response...");
if (!response.ok) {
throw new Error(`Twilio API request failed with status ${response.status}`);
}
const jsonResponse = await response.json();
setMessageStatus(`WhatsApp message sent: ${JSON.stringify(jsonResponse)}`);
console.log(`WhatsApp message sent: ${JSON.stringify(jsonResponse)}`);
} catch (error) {
setMessageStatus(`Error sending WhatsApp message: ${error.message}`);
console.error('Error sending WhatsApp message:', error);
}
};
This is included in my manifest.yml:
remotes:
- key: twilio-remote
baseUrl: 'https://api.twilio.com'
operations:
- compute
I’m unsure if I’m setting it up correctly, particularly with handling request headers and body formatting for external API integration. My environment variables TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN seems to be set correctly, I am using the credentials from Twilio sandbox.
Could anyone with experience in integrating external APIs, especially Twilio, with Forge apps advise on best practices or what might be going wrong? Also, any insights into configuring the manifest.yml
for remote APIs would be greatly appreciated.
Thanks in advance!