OctoKit with Auth0 (Github Login) in NextJS

Question

I am building a Next JS app that has Github Login through Auth0 and uses the Octokit to fetch user info / repos.

In order to get the IDP I had to setup a management api in auth0. https://community.auth0.com/t/can-i-get-the-github-access-token/47237 which I have setup in my NodeJs server to hide the management api token as : GET /getaccesstoken endpoint

On the client side : /chooserepo page, I have the following code :

const chooserepo = (props) => {
 
  const octokit = new Octokit({
    auth: props.accessToken,
  });

  async function run() {
    const res = await octokit.request("GET /user");
    console.log("authenticated as  ", res.data);
  }
  run();

And

export const getServerSideProps = withPageAuthRequired({
  async getServerSideProps({ req, params }) {
    let { user } = getSession(req);
    console.log("user from get session ", user);
    let url = "http://localhost:4000/getaccesstoken/" + user.sub;

    let data = await fetch(url);
    let resData = await data.text();
    return {
      props: { accessToken: resData }, // will be passed to the page component as props
    };
  },
});

However, I keep getting Bad credentials error. If I directly put the access token in the Octokit it seems to work well, but doesn't work when it's fetching the access token from the server.

It seems like Octokit instance is created before server side props are sent. How do I fix it ?

Answer 1

I figured out the error by comparing the difference between the request headers when hardcoding and fetching access token from server. Turns out quotes and backslashes need to be replaced (and aren't visible when just console logging)