GitHub API fails with JavaScript FETCH-CodePudding

GitHub seems to have made updates since end of 2021.

https://developer.github.com/changes/2020-02-10-deprecating-auth-through-query-param/

I have followed numerous resources where the below code increases the amount of requests one can do per hour. Now the below request does not work. Instead the documentation says to use CURL, so for instance the below works in a terminal:

curl -u client_id:secret_key https://api.github.com/users/<username>

I want to do this in JavaScript, I am playing around with a GitHub user finder app in JavaScript. Can someone please show me how I can get this to actually work. The code I am using is below.

TL:DR: I can access the github API using the code below and receive a JSON object to display, but it's limited to 60 requests per hour. GitHub documentation says that since end of 2021 query parameters are not allowed anymore so I'm lost now. How can I do this in JavaScript now?

const client_id = "df2429c311a306c35233";
const client_secret = "5c23233326680aa21629451a6401d36ec";

const fetchUsers = async (user) => {
    const api_call = await fetch(`https://api.github.com/users/${user}?client_id=df5429c311a306c356f4&
    client_secret=${client_secret}`);

    const data = await api_call.json();
    return {data};

};

EDIT/UPDATE:

const inputValue = document.querySelector("#search");
const searchButton = document.querySelector(".searchButton");
const nameContainer = document.querySelector(".main__profile-name");
const unContainer = document.querySelector(".main__profile-username");
const reposContainer = document.querySelector(".main__profile-repos");
const urlContainer = document.querySelector(".main__profile-url");

const client_id = "<user_id>";
const client_secret = "<client_secret>";

const headers = {
    'Authorization': 'Basic '   (new Buffer(client_id   ':'   client_secret).toString('base64'))
}

const fetchUsers = async (user) => {
    const api_call = await fetch(`https://api.github.com/users/${user}`, {
        method: 'GET',
        headers: headers
    });

    const data = await api_call.json();
    return {data};

};

const showData = () => {
    fetchUsers(inputValue.value).then((res) => {
        console.log(res);

        nameContainer.innerHTML = `Name: <span >${res.data.name}</span>`

        unContainer.innerHTML = `Username: <span >${res.data.login}</span>`

        reposContainer.innerHTML = `Repos: <span >${res.data.public_repos}</span>`

        urlContainer.innerHTML = `Url: <span >${res.data.url}</span>`

    })
};

searchButton.addEventListener("click", () => {
    showData();
})

CodePudding user response：

Those behave as username and password of the basic authentication type. Hence your Api request should have the following header.

const headers = {
      'Authorization': 'Basic '   btoa(CLIENT_ID   ':'   CLIENT_SECRET)
    }

Please note that btoa function is being used because browsers don't have a native support of Buffer. If btoa throws error then try with window.btoa and use it like

const response = await fetch(url, {method:'GET',
    headers: headers,
   })