4

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: enter image description here

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

6
  • This seems like it would only throw this error if your token was invalid or doesn't have access to whatever you're requesting, but in this case, it's likely that you have an invalid token. I'd just go ahead and generate a new one and try with that. Commented May 21, 2022 at 23:31
  • I tried it, but its still not working Commented May 21, 2022 at 23:34
  • no, im using personal access tokens: docs.github.com/en/authentication/… Commented May 21, 2022 at 23:43
  • did you check the permissions of the token ? Commented May 21, 2022 at 23:56
  • consol says that access denied because im not authorized Commented May 22, 2022 at 0:00

2 Answers 2

2

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

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>

Sign up to request clarification or add additional context in comments.

Comments

-1

Explanation of the error.

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

How to solve it.

1 Comment

The question is about 401, not 404.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.