使用ZITADEL登录Next.js时出现next-auth/react OAuthSignin错误

1. 修复缺失的refreshAccessToken函数 #

你的[...nextauth].js中调用了refreshAccessToken函数但未实现，这会直接导致登录流程抛出错误。添加以下函数实现到配置文件中：

async function refreshAccessToken(token) {
  try {
    const response = await fetch(`${token.issuer}/oauth/v2/token`, {
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      method: "POST",
      body: new URLSearchParams({
        client_id: process.env.ZITADEL_CLIENT_ID,
        client_secret: process.env.ZITADEL_CLIENT_SECRET,
        grant_type: "refresh_token",
        refresh_token: token.refreshToken,
      }),
    });

    const refreshedTokens = await response.json();

    if (!response.ok) {
      throw refreshedTokens;
    }

    return {
      ...token,
      accessToken: refreshedTokens.access_token,
      refreshToken: refreshedTokens.refresh_token ?? token.refreshToken,
      expiresAt: Date.now() + refreshedTokens.expires_in * 1000,
    };
  } catch (error) {
    return {
      ...token,
      error: "RefreshAccessTokenError",
    };
  }
}

2. 检查ZITADEL应用的回调URL配置 #

登录ZITADEL控制台，找到你的应用，确保授权回调URL已添加：http://localhost:3000/api/auth/callback/zitadel，这个地址必须和NextAuth的回调路径完全匹配。

3. 修复ZITADEL实例的协议/证书问题 #

你的ZITADEL_ISSUER设置为https://localhost:8080，如果本地ZITADEL使用自签名证书，Node.js会拒绝信任该证书，导致OAuth请求失败：

• 临时开发解决方案：将ZITADEL_ISSUER改为http://localhost:8080（需确保ZITADEL配置为HTTP运行）
• 开发环境兼容方案：启动Next.js时添加环境变量NODE_TLS_REJECT_UNAUTHORIZED=0（仅本地开发使用，生产环境禁用）

4. 验证环境变量的正确性 #

• 确认ZITADEL_CLIENT_ID和ZITADEL_CLIENT_SECRET完全匹配ZITADEL应用中的值，注意大小写和特殊字符
• NEXTAUTH_SECRET需设置为独立的随机安全字符串，避免和ZITADEL_CLIENT_SECRET重复（当前两者值高度相似，建议修改）
• NEXTAUTH_URL必须保持为http://localhost:3000，和应用运行地址完全一致

5. 调整next.config.js中的图片配置 #

如果ZITADEL实例使用HTTP协议，需修改图片加载配置中的协议和路径截取长度：

images: {
    remotePatterns: [
        {
            protocol: 'http', // 对应本地HTTP实例
            hostname: process.env.ZITADEL_ISSUER.slice(7), // http://前缀长度为7，需调整截取位置
            pathname: '/assets/v1/**',
        },
    ],
},

完成以上调整后，重启Next.js应用，再尝试登录即可。

内容的提问来源于stack exchange，提问作者M.Çelik