How to call Jira REST API (Cloud) from React?

#1

Hi all, new learner here. I recently learned React and am trying to build an app for Jira.

I managed to successfully upload my React app (built with create-react-app) to my development Jira instance. But I can’t successfully call the Jira REST API to get an issue. In my learnings, I was able to call other APIs with React, so I’m not sure if Jira requires something special.

My code:

fetch('https://blah.atlassian.com/rest/api/3/issue/AP-1', {
      method: 'GET',
      headers: {
        'Authorization': `Basic ${Buffer.from(
          'email: api key'
        ).toString('base64')}`,
        'Accept': 'application/json'
      }
    }).then(response => response.json()
    ).then(jsonResponse => {
      console.log(jsonResponse.key);
    })

Does anyone know if I need to be doing something differently or authenticating somehow?

#2

Hey @AdamPramono

How you make calls to the Jira REST API from your frontend code depends on what framework you use. It is either Atlassian Connect or Forge.

If you are using Atlassian Connect…
… you can use the Atlassian Connect JS API. Make sure to have the Atlassian Connect JS dependency included in your iframe HTML.

You can call the API like so:

AP.request('/rest/api/latest/...', {
  success: function(responseText){
    alert(responseText);
  }
});

If you are using Custom UI with Forge…
… you can use the Custom UI Bridge to make calls to the Jira REST API like so:

import { requestJira } from '@forge/bridge';

requestJira('/rest/api/3/issue/ISSUE-1').then(response => {
  console.log(response);
});

Make sure you have the @forge/bridge package installed.

3 Likes
#3

Could you share the error you’re seeing? Does the API call work when testing it in Postman?

@tbinna has shared some awesome example code above for the Connect and Forge platforms, however if you’re building a personal integration you should be able to get things working with just a Basic API token as well (what you appear to be using, and also the simplest way to go for personal scripts).

Here’s how I’m using a Basic API token to authenticate to Confluence (only difference is URL path) for one of my side projects, using Node:

contentForId.js

const fetch = require("node-fetch");

const API_KEY = "redacted";
const API_USER = "skubica@atlassian.com";

const contentForId = async (id) =>
  (
    await fetch(`https://foo.atlassian.net/content/${id}?expand=history,body.editor2`, {
      headers: {
        Authorization: `Basic ${Buffer.from(`${API_USER}:${API_KEY}`).toString(
          "base64"
        )}`,
      },
    })
  ).json();

module.exports = contentForId;

Yours looks pretty close, but testing in Postman and applying some closer scrutiny at your error message should get you over the line. Also, this is likely just how you’ve redacted your code snippet, but note that your Jira site path should be foo.atlassian.net, rather than .com.

Good luck, let me know how you go!

1 Like