Get Github repo data after authenticating with OAuth and Auth0

Question

What i want to do, is to get private repo datas (issues amount) from a small application.

Since I don't want to expose my personal github access_token in the request I searched another solution which I think is OAuth.

So i setted up an OAuth following these and these steps.

And setted the permissions in Auth0 in the social github settings to repo (grants read/write access for repos).

Until now everything works fine, I'm able to authenticate with my github account.

But now I don't know which token I have to use for my request to the github API.

Here is the relevant code I have so far:

const  handleAuthentication = () => {
  webAuth.parseHash((err, authResult) => {
    if (authResult && authResult.accessToken && authResult.idToken) {
      window.location.hash = '';
      setSession(authResult);

      //here the call to the relevant function
      getIssues('my-element', /*here i should pass the correct token*/); //tryed all tokens i found in authResult

    } else if (err) {
      alert(
        `Error: ${err.error} . Check the console for further details.`
      );
    }
  });
}

const getIssues = (element, token) => {
  const request = new XMLHttpRequest();
  request.open('GET', `https://api.github.com/repos/my_organization/element-${element}/issues?access_token=${token}`, true);

  request.onload = () => {
    if (request.status >= 200 && request.status < 400) {
      const data = JSON.parse(request.responseText);
      //use the data
    } else {
      console.log('error');
    }
  };

  request.onerror = function(e) {
    console.log('connection error: ', e)
  };

  request.send();
}

But this results to a 401 (Unauthorized) response.

I didn't use XMLHttpRequests a lot and I'm sure, that I'm missing something fundamental here.

And now i'm not even sure if oAuth is the correct way to achieve what I want.

Any help would be greatly appreciated.

Edit:

Meanwhile I did some more research and found out (here), that there are some steps missing to get the correct user access_token for connecting to the github api.

I'll try to complete these steps and will post an answer if it works.

Would still appreciate a clear answer if somebody knows how to do it exactly.

user_5418906 · Answer

To get list of issues of a repo, call this API endpoint:

https://api.github.com/repos/${owner}/${repository}/issues

Where the ${owner} is the organization name (NOT your github username), and ${repo} is the repo that you want to list the issues.

For reference, the documentation is here: https://developer.github.com/v3/issues/#list-issues-for-a-repository. However like a lot OAuth endpoint documentation, this is cryptic, thus requires hours of tinkering.

There is a live working code snippet so that you can see the sample code, test and tweak it: https://jsfiddle.net/son74dj2/

The code snippet explanation follows.

It uses https://oauth.io service and its SDK (the OAuth class in the code below), which is not required. However OAuth.io enables you to implement OAuth flow with just front-end, e.g., Javascript, so the live working code snippet can be self-contained in a jsfiddle that can be easily shared, tweaked, tested and even just cut-and-pasted on your website.

$('#github-button').on('click', function() {

    // Initialize with your OAuth.io app public key
    OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');

    // Use popup for oauth
    OAuth.popup('github').then(provider => {

        const repository = 'YOUR REPOSITORY';

        const owner = 'REPOSITORY OWNER';

        provider.get(`/repos/${owner}/${repository}/issues`).then(data => {
            alert('Now you could see list of issues in the console!')
            console.log('Issue list:', data);
        })
    });
})

Hope this is useful to help you understand and test the endpoint without spending hours figuring out the documentation, and tinkering with the url and parameters.

NOTE: You need to have access to the repo, which the repo owner needs to grant you. See the original article for screenshot details: https://tome.oauth.io/providers/github/get-repository-issue-list

Get Github repo data after authenticating with OAuth and Auth0

1 Answers