如何通过NextAuth的Github OAuth访问授权scope对应的数据

你的配置已经完成基础的Github OAuth认证，但useSession()默认仅返回用户基础身份信息（如姓名、邮箱），要访问授权Scope对应的Github资源，需利用认证后拿到的Access Token调用Github官方API，具体实现步骤如下：

1. 修改NextAuth配置，将Access Token同步到Session #

首先在NextAuth配置中添加callbacks，把Github返回的Access Token存入JWT并同步到Session，让前端组件能获取到它：

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      authorization: {
        params: {
          scope: "read:repo_hook user:email public_repo" // 若要获取仓库列表，需添加public_repo或repo权限
        }
      }
    })
  ],
  callbacks: {
    // 将Access Token存入JWT
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    // 将JWT中的Access Token同步到Session
    async session({ session, token }) {
      session.user.accessToken = token.accessToken
      return session
    }
  }
})

注意：你当前配置的read:repo_hook权限仅能读取仓库钩子信息，若要获取仓库名称，需要添加public_repo（读取公开仓库）或repo（读取所有仓库）权限到scope中。

2. 在组件中获取Access Token并调用Github API #

利用useSession()拿到Access Token后，即可发起请求调用Github API获取对应资源，以下是获取用户仓库列表的完整组件示例：

import { useSession } from "next-auth/react"
import { useEffect, useState } from "react"

export default function RepoList() {
  const { data: session, status } = useSession()
  const [repos, setRepos] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (status === "authenticated" && session?.user.accessToken) {
      const fetchRepos = async () => {
        setLoading(true)
        try {
          const res = await fetch("https://api.github.com/user/repos", {
            headers: {
              Authorization: `Bearer ${session.user.accessToken}`
            }
          })
          if (!res.ok) throw new Error("获取仓库列表失败")
          const data = await res.json()
          setRepos(data.map(repo => ({ id: repo.id, name: repo.name })))
        } catch (err) {
          setError(err.message)
        } finally {
          setLoading(false)
        }
      }
      fetchRepos()
    }
  }, [session, status])

  if (status === "loading") return <div>加载中...</div>
  if (status === "unauthenticated") return <div>请先登录</div>
  if (error) return <div>错误：{error}</div>

  return (
    <div>
      <h2>你的Github仓库</h2>
      {loading ? (
        <div>加载仓库数据中...</div>
      ) : (
        <ul>
          {repos.map(repo => (
            <li key={repo.id}>{repo.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

关键说明 #

• Access Token有效期：Github的Access Token存在有效期限制，若需长期使用，可配置NextAuth的refreshToken逻辑实现自动刷新（需在Github OAuth应用中开启refresh token权限）。
• API权限匹配：调用的Github API必须与申请的Scope对应，比如read:repo_hook对应的API是GET /repos/{owner}/{repo}/hooks，具体可参考Github官方API权限规则。

内容的提问来源于stack exchange，提问作者Raiyan Jamil