Using GithubAPI + NextAuth Github Provider to access a User's repo information.

I am building an app where will allow users to login with Github and view their Github accounts data ( Repos and issues ). A good example would be vercel or netlify, which accesses a user's public repos.

I currently have Github Auth Configured...

// auth.ts
 providers: [
    GithubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
      // Notice the scope of user here
      authorization: {params: {scope: 'user'}}
    })

// auth.ts
 providers: [
    GithubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
      // Notice the scope of user here
      authorization: {params: {scope: 'user'}}
    })

// auth.ts
 providers: [
    GithubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
      // Notice the scope of user here
      authorization: {params: {scope: 'user'}}
    })

// auth.ts
 providers: [
    GithubProvider({
      clientId: env.GITHUB_CLIENT_ID,
      clientSecret: env.GITHUB_CLIENT_SECRET,
      // Notice the scope of user here
      authorization: {params: {scope: 'user'}}
    })

// user.ts

  getUserGithub: protectedProcedure.query(async ({ ctx }) => {
 
    const account = await ctx.prisma.account.findFirst({
      where: {
        userId: ctx.session.user.id,
      },
     include: {
      user: true
     },
    })

    const accessToken = account?.access_token;
    
    const response = await fetch(`https://api.github.com/user`, {
      headers: {Authentication: `Bearer ${accessToken}`}
    });

    const userData = response.json()

    return userData;

  }),

// user.ts

  getUserGithub: protectedProcedure.query(async ({ ctx }) => {
 
    const account = await ctx.prisma.account.findFirst({
      where: {
        userId: ctx.session.user.id,
      },
     include: {
      user: true
     },
    })

    const accessToken = account?.access_token;
    
    const response = await fetch(`https://api.github.com/user`, {
      headers: {Authentication: `Bearer ${accessToken}`}
    });

    const userData = response.json()

    return userData;

  }),

// user.ts

  getUserGithub: protectedProcedure.query(async ({ ctx }) => {
 
    const account = await ctx.prisma.account.findFirst({
      where: {
        userId: ctx.session.user.id,
      },
     include: {
      user: true
     },
    })

    const accessToken = account?.access_token;
    
    const response = await fetch(`https://api.github.com/user`, {
      headers: {Authentication: `Bearer ${accessToken}`}
    });

    const userData = response.json()

    return userData;

  }),

// user.ts

  getUserGithub: protectedProcedure.query(async ({ ctx }) => {
 
    const account = await ctx.prisma.account.findFirst({
      where: {
        userId: ctx.session.user.id,
      },
     include: {
      user: true
     },
    })

    const accessToken = account?.access_token;
    
    const response = await fetch(`https://api.github.com/user`, {
      headers: {Authentication: `Bearer ${accessToken}`}
    });

    const userData = response.json()

    return userData;

  }),

and when attempting to print out the result...

  {JSON.stringify(userAccount.data)}

  {JSON.stringify(userAccount.data)}

  {JSON.stringify(userAccount.data)}

  {JSON.stringify(userAccount.data)}

...I get the message

"message":"Requires authentication","documentation_url":"https://docs.github.com/rest/reference/users#get-the-authenticated-user"}

"message":"Requires authentication","documentation_url":"https://docs.github.com/rest/reference/users#get-the-authenticated-user"}

"message":"Requires authentication","documentation_url":"https://docs.github.com/rest/reference/users#get-the-authenticated-user"}

"message":"Requires authentication","documentation_url":"https://docs.github.com/rest/reference/users#get-the-authenticated-user"}

I am not sure where I am going wrong. I would attempt to hit the

api.github.com/users/{username}

api.github.com/users/{username}

api.github.com/users/{username}

api.github.com/users/{username} endpoint, but I do not have access to the user's

{username}

{username}

{username}

{username}.

I would appreciate any help and direction others could provide. Thanks !

EthanOP•5/12/23, 4:41 PM

Bumping

Sturlen•5/12/23, 11:06 PM

have you tried logging the accessTokenaccessToken directly? if it's undefined, then that would point to an issue with Prisma

EthanOP•5/12/23, 11:44 PM

Thanks for the reply !

Yeah so I was having issues with it being undefined, but I fixed that issue.

My issue still persist, but now the error reads “bad credentials”.

I’m not exactly sure what I’m doing wrong.

I even tried appending ?token={access_token}?token={access_token} to the request URL, but that didn’t help.

EthanOP•5/13/23, 5:37 PM

Bumping

Alfonso Guerra•5/31/23, 1:02 AM

You're using NextAuth?

Alfonso Guerra•5/31/23, 1:24 AM

Gotta be. Now I know why T used Clerk in the t3 tutorial. I've spent the whole day trying to get this to work with GitHub too.

Alfonso Guerra•5/31/23, 4:02 PM

When you fixed the undefined issues, did you change the code you posted previously?

Using GithubAPI + NextAuth Github Provider to access a User's repo information.

Similar Threads

Similar Threads

Similar Threads