重新申请 GitHub API 时出现 401 Unauthorized 错误

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

Explanation of the error.

The 404 status code means your authentication data are not the good ones.

How to solve it.

• First, check your GitHub personal token is ok (i am guessing it is)
• Second, do the following : https://docs.github.com/en/developers/apps/building-github-apps/identifying-and-authorizing-users-for-github-apps

Answer 2

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/octokit@1.7.1'; window.Octokit = Octokit; </script> <div id="root"></div><script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.18.1/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>