I am trying to list GitHub repositories in my app after the user has successfully authenticated with Auth0:
import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
const Repositories = () => {
const { getAccessTokenSilently, user } = useAuth0();
const [repositories, setRepositories] = useState(null);
useEffect(() => {
(async () => {
try {
const token = await getAccessTokenSilently({
audience: 'https://api.github.com/',
scope: 'public_repo',
});
console.log("Token:" + token)
const response = await fetch('https://api.github.com/users/' + user.nickname + '/repos', {
headers: {
Accept: `application/vnd.github+json`,
Authorization: `token ${token}`,
},
});
console.log(response)
setRepositories(await response.json());
} catch (e) {
console.error(e);
}
})();
}, [getAccessTokenSilently, user]);
if (!repositories) {
return <div>Loading...</div>;
}
return (
<ul>
{repositories.map((repository, index) => {
return <li key={index}>{repository.name}</li>;
})}
</ul>
);
};
export default Repositories;
But it does not work. I get an error in the console Error: Service not found: https://api.github.com/
.
Somebody recommended to add api.github.com to the list of my Auth0 APIs. I did that and now I am getting 401 unauthorized response. On closer inspection, the token that is returned as a result of getAccessTokenSilently() call does not really fit the GitHub format (gho_ahdfhasdhfahs) and is longer than expected.
What am I going wrong? Are there any Auth0 examples that show how to authenticate against GitHub API to use it in my application using the user on my website authenticated with Auth0?
Thanks in advance