Next.js使用next-auth对接Keycloak出现GET_AUTHORIZATION_URL_ERROR问题

现有代码问题说明 #

你当前的配置存在几处错误，是导致报错的直接原因：

• KeycloakProvider入参不符合next-auth的规范，你直接传入了Keycloak原生客户端配置，next-auth的Keycloak提供者要求使用标准化参数
• realm值Users未加引号，会被识别为未定义变量
• 缺少next-auth必要的全局配置项和环境变量

具体修改步骤 #

1. 修正[...nextauth.js]代码 #

修正后的代码参考如下：

import NextAuth from 'next-auth'
import KeycloakProvider from 'next-auth/providers/keycloak'

export default NextAuth ({
  providers: [
    KeycloakProvider({
      clientId: 'Route', // 对应你原配置的resource字段
      // issuer格式：你的Keycloak服务地址 + /realms/ + 你的realm名称
      // Keycloak 17及以上版本默认移除了/auth路径，对应改为http://localhost:8080/realms/Users
      issuer: 'http://localhost:8080/auth/realms/Users',
      // 非公开客户端需要填写clientSecret，你设置了public-client为true可省略该字段
      // clientSecret: '你的客户端秘钥'
    })
  ],
  // 必须配置，用于加密会话数据
  secret: process.env.NEXTAUTH_SECRET
})

同时确认路由文件位置正确：

• Pages Router场景：文件需放在pages/api/auth/[...nextauth].js
• App Router场景：文件需放在app/api/auth/[...nextauth]/route.js，导出语法对应适配App Router规范

2. 配置必要环境变量 #

在项目根目录新建.env.local文件，添加以下配置：

# 你的Next.js应用访问地址，必须为绝对路径
NEXTAUTH_URL=http://localhost:3000
# 会话加密秘钥，可执行openssl rand -hex 32生成随机字符串填入
NEXTAUTH_SECRET=你生成的随机32位秘钥

你遇到的only absolute URL's can be requested报错就是因为缺少NEXTAUTH_URL配置，next-auth生成回调地址时使用了相对路径导致的。

3. 调整Keycloak客户端配置 #

打开Keycloak管理后台，进入你创建的Route客户端设置页：

• 有效重定向URI添加http://localhost:3000/api/auth/callback/keycloak
• Web源添加http://localhost:3000
• 生产环境部署时需要将对应生产域名同步添加到上述两个配置项中

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