I am trying to list my GitHub public repos on my public website using their REST API. I have been creating personal tokens so far. In localhost it works.

When I do the request from my site it responds a 401 and it deletes my token.

To get the repos I am doing this simple request:

async function loadRepositories() {
  const token = 'my_token';

  const response = await fetch("https://api.github.com/users/tauromachian/repos",
    {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
      },
    }
  );
  const repositories = await response.json();

  return repositories;
},

How can I get this done?

CodePudding user response：

Github is trying to protect you from someone stealing your identity here. There are ways to detect if a HTTP request is sent from the browser or a server (it's not 100% reliable though).

As you make the request from the browser which is a public client, meaning everyone can read the code and hence secrets you use within the code you are exposing your Personal Access Token (PAT). This PAT identifies you against Github, therefore if someone else could get hold of it, they can impersonate you and e.g. delete repos, steal code etc. (if the token has the correct scopes). As Github wants to prevent that from happening, they delete tokens which are publicly exposed (they know it's exposed as the the request comes from a browser). Therefore attacks like that are not possible anymore.

To make your website work however you can simply make the request from your server as you can securely store secrets on the server-side and call the endpoint of your server from your website. Once you do that, Github won't delete the token, your token is save and you can display the data on the website.