Next JS+Next Auth集成自定义Okta Widget时的回调JWE错误求助

我正在Next.js应用中尝试用自定义Okta Widget完成登录流程，已经在/api/auth路径下配置了Okta Provider。使用该组件登录时，把redirectUri指向http://localhost:3000/api/auth/callback/okta，想以此传递信息并创建会话，模拟官方Okta登录组件的行为，但回调过程中出现了以下错误，找不到原因，求解决思路。

代码仓库：nextjs-auth

错误日志 #

[next-auth][error][CALLBACK_OAUTH_ERROR] 
https://next-auth.js.org/errors#callback_oauth_error Invalid Compact JWE JWEInvalid: Invalid Compact JWE
    at compactDecrypt (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\jose\dist\node\cjs\jwe\compact\decrypt.js:16:15)
    at jwtDecrypt (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\jose\dist\node\cjs\jwt\decrypt.js:8:61)
    at Object.decode (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\jwt\index.js:64:34)
    at async useState (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\lib\oauth\state-handler.js:62:17)
    at async oAuthCallback (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\lib\oauth\callback.js:82:19)
    at async Object.callback (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\routes\callback.js:50:11)
    at async NextAuthHandler (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\core\index.js:186:28)
    at async NextAuthNextHandler (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next-auth\next\index.js:23:19)
    at async auth (webpack-internal:///(api)/./src/pages/api/auth/[...nextauth].ts:12:12)
    at async Object.apiResolver (C:\Users\miles\OneDrive\Documents\NextJs\nextjs-auth\node_modules\next\dist\server\api-utils\node.js:184:9) {
  name: 'OAuthCallbackError',
  code: 'ERR_JWE_INVALID'
}

解决思路 #

• 检查OAuth流程的state参数：NextAuth在OAuth授权时会生成加密的state参数，自定义Okta Widget跳转时必须原样传递该参数到回调地址。若组件未正确保留或传递原始state，会导致NextAuth无法解密验证，触发JWE错误。
• 确认Okta应用配置：
  • 检查Okta控制台中应用的Login redirect URIs是否包含http://localhost:3000/api/auth/callback/okta，必须完全匹配。
  • 确认应用的Response Type设置为code（Authorization Code Flow），这是NextAuth Okta Provider默认使用的流程。
• 验证NextAuth配置：
  • 确保pages/api/auth/[...nextauth].ts中的Okta Provider配置的clientId、clientSecret、issuer与Okta控制台完全一致，尤其是issuer要包含完整的Okta域名（例如https://your-domain.okta.com/oauth2/default）。
  • 检查NEXTAUTH_SECRET环境变量是否正确设置，该密钥用于加密OAuth的state和JWT，缺失或错误会导致解密失败。
• 排查自定义Widget的跳转逻辑：
  • 自定义Okta Widget登录成功后，应让Okta处理授权码返回，而非手动构造跳转。确保Widget配置的redirectUri正确，且未篡改Okta返回的code和state参数。
  • 检查跳转时是否对参数进行了错误的编码/解码，比如误转义state参数的特殊字符，导致解密时格式错误。
• 查看网络请求日志：
  • 打开浏览器开发者工具，查看授权请求（到Okta的/authorize端点）和回调请求（到/api/auth/callback/okta）的参数，确认state参数在两个请求中完全一致，未被修改或丢失。

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