Getting 401 Unauthorized error while requesting GitHub API

Question

Good evening. My task is to create a website with react that will list through github users. I was following this instruction: https://docs.github.com/en/rest/users/users#get-a-user (for JS). My credentials:

async function searchUsers() {
  try {
    const octokit = new Octokit({
      auth: 'ghp_MY_PERSONAL_TOKEN',
      acceptstring: 'application/vnd.github.v3+json'
    })
    const response = await octokit.request(`GET /users/${name}`, {
      username: 'maria98kgm'
    });

    setUsers(response.data);
    setLoading(false);
    searchRepos();
    } 
    catch(e) {
      setLoading(false);
      setUsers('notFound');
      console.error('no such a user');
   }
}

Whenever i use it too long or push changes to github, it stops working and gives me 401 Unauthorized error:

I cannot solve it for two days already, please help.

Answer 1

You don't need any authentication for that endpoint. Here's a working example:

• Octokit.js docs
• GitHub REST API docs for getting a user

body { font-family: sans-serif; }
button, input[type="text"] { font-size: 1rem; padding: 0.2rem; }
pre { font-family: monospace; font-size: 1rem; }
.vertical { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }

<!-- Babel seemed to have trouble with this, so I'm putting it on window -->
<script type="module">
  import {Octokit} from 'https://cdn.skypack.dev/[email protected]';
  window.Octokit = Octokit;
</script>

<div id="root"></div><script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

// import * as ReactDOM from 'react-dom/client';
// import {useState} from 'react';
// import {Octokit} from 'octokit';

// This Stack Overflow snippet demo uses UMD modules instead of the commented import statments above
const {useState} = React;

const octokit = new Octokit();

function App () {
  const [user, setUser] = useState('maria98kgm');
  const [userData, setUserData] = useState(undefined);
  const [error, setError] = useState(undefined);

  const updateUserData = async () => {
    try {
      const username = user.trim();
      const response = await octokit.request(`GET /users/${username}`);
      setUserData(response.data);
      setError(undefined);
    }
    catch (ex) {
      if (ex instanceof Error) setError(ex);
      else console.error(ex);
    }
  };

  const displayString = error
    ? error.toString()
    : userData
      ? JSON.stringify(userData, null, 2)
      : 'No data yet';

  return (
    <div>
      <div className="vertical">
        <input
          type="text"
          onChange={ev => setUser(ev.target.value)}
          value={user}
        />
        <button onClick={updateUserData}>Update user data</button>
      </div>
      <pre><code>{displayString}</code></pre>
    </div>
  );
}

const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render(<App />);

</script>