如何通过NextAuth提取Okra OIDC claims_supported中的自定义属性

步骤1：在Okra提供商配置中声明自定义Claim的Scope #

OIDC协议要求显式请求需要的Claim，即使它在claims_supported列表中。在NextAuth的Okra提供商配置里，要把自定义Claim加入授权请求的Scope参数中。

在pages/api/auth/[...nextauth].js（App Router对应路由文件同理）中配置：

import NextAuth from "next-auth"
import Okra from "next-auth/providers/okra"

export default NextAuth({
  providers: [
    Okra({
      clientId: process.env.OKRA_CLIENT_ID,
      clientSecret: process.env.OKRA_CLIENT_SECRET,
      authorization: {
        params: {
          // 替换成你的自定义Claim键名，比如"openid email profile employee_id"
          scope: "openid email profile your_custom_claim_key"
        }
      }
    })
  ],
  // 步骤2：通过回调提取并传递自定义属性
  callbacks: {
    async jwt({ token, profile }) {
      // 从返回的profile对象中提取自定义属性，存入JWT Token
      if (profile) {
        token.your_custom_claim_key = profile.your_custom_claim_key
      }
      return token
    },
    async session({ session, token }) {
      // 将Token中的自定义属性同步到Session，供前端调用
      session.user.your_custom_claim_key = token.your_custom_claim_key
      return session
    }
  }
})

步骤3：前端获取自定义属性 #

配置完成后，通过NextAuth的useSession()钩子即可在组件中访问该属性：

import { useSession } from "next-auth/react"

function YourComponent() {
  const { data: session } = useSession()
  
  if (session) {
    console.log("自定义属性值：", session.user.your_custom_claim_key)
  }
  
  // ...组件逻辑
}

注意事项 #

• 替换所有your_custom_claim_key为你实际的自定义属性键名
• 可通过调试查看profile对象，确认Okra返回的用户信息中确实包含该属性

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