Invoke remote API from forge application

[Simon Larson]

Hi,

I'm currently developing a Jira 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 11:17:14.077 bb7613df-e978-4965-8ce5-0b56feeb0483 
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);
}
};

return (
<fragment>
<button text "Send" onClick={sendWhatsappMessage}/>
</fragment>
);
};

export const run = render(
<IssuePanel>
<App />
</IssuePanel>  
);

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!

[Tuncay Senturk · Accepted solution]

Hi @Simon Larson 

Your manifest.yml configuration seems fine, and I couldn't see any reason for authentication problems (except for the accountSid and authToken, which are obtained via environment variables). I suggest trying to temporarily hardcode the values to check if the environment variables are the issue.

I'd strongly recommend posting this in the developer community as it is a better place to find more people working on this topic.