Next-auth集成Keycloak：登录/登出无法重定向至指定URL问题

核心问题分析 #

1. Keycloak客户端配置错误 #

你两个应用共用了同一个Client ID，但Keycloak的客户端配置里Valid Redirect URIs只添加了http://localhost:3000/*，未包含3001的地址。而且Keycloak的单个Client ID是为单一应用设计的，共用会导致认证流程无法区分两个应用，强制跳转到已配置的默认回调地址（3000）。

2. NextAuth配置缺失关键参数 #

• 未指定site参数：NextAuth默认会自动推断站点地址，但在同域名不同端口的多应用场景下，容易出现推断错误，导致重定向Cookie被其他应用覆盖。
• Cookie未隔离：两个应用都运行在localhost，默认的NextAuth会话Cookie名称相同，会互相覆盖，导致3001应用读取到3000应用的重定向缓存。

3. callbackUrl无效的本质 #

Keycloak会严格校验回调地址是否在Valid Redirect URIs列表中，不在列表中的地址会被拒绝，自动跳转到已授权的地址（也就是3000），所以你设置的callbackUrl根本不会生效。

分步解决方案 #

第一步：修正Keycloak客户端配置 #

1. 登录Keycloak后台，进入目标Realm，创建两个独立的客户端：
   • 给3000应用创建react-client-3000，给3001应用创建react-client-3001
2. 分别配置每个客户端的Valid Redirect URIs：
   • 3000应用：http://localhost:3000/*
   • 3001应用：http://localhost:3001/*
3. 配置Web Origins：开发环境可直接设为*，生产环境需指定对应域名。

第二步：修正NextAuth配置（每个应用独立配置） #

3001应用的api/auth/[...nextauth].ts：

import NextAuth from "next-auth/next";
import KeycloackProvider from "next-auth/providers/keycloak";

export default NextAuth({
  debug: true,
  // 明确指定当前应用的站点地址，避免推断错误
  site: "http://localhost:3001",
  // 配置独立的Cookie名称，避免与3000应用冲突
  cookies: {
    sessionToken: {
      name: `next-auth.session-token.3001`,
      options: {
        domain: "localhost",
        path: "/",
        httpOnly: true,
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
      },
    },
    callbackUrl: {
      name: `next-auth.callback-url.3001`,
      options: {
        domain: "localhost",
        path: "/",
        httpOnly: false,
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
      },
    },
  },
  providers: [
    KeycloackProvider({
      clientId: "react-client-3001", // 对应Keycloak里3001应用的Client ID
      clientSecret: "你的3001应用Client Secret",
      issuer: "http://localhost:8080/realms/react-auth",
    }),
  ],
  // 自定义重定向逻辑（可选）
  callbacks: {
    redirect({ url, baseUrl }) {
      // 确保重定向地址属于当前应用
      if (url.startsWith("/")) return `${baseUrl}${url}`;
      // 允许外部重定向的话可添加白名单判断，否则默认返回baseUrl
      return baseUrl;
    },
  },
});

3000应用的配置同理，把site改成http://localhost:3000，clientId换成对应的react-client-3000，Cookie名称改成.3000后缀。

第三步：验证登录函数 #

现在可以正常使用callbackUrl了，比如3001应用的登录函数：

const handleKeycloackSignIn = (): void => {
  signIn("keycloak", {
    callbackUrl: "http://localhost:3001/dashboard", // 任意3001下的地址都可以
  });
};

登出重定向配置 #

如果需要自定义登出后的重定向地址，在NextAuth配置里添加logout参数：

export default NextAuth({
  // ...其他配置
  logout: {
    callbackUrl: "http://localhost:3001/login",
  },
});

同时在Keycloak客户端的Valid Post Logout Redirect URIs里添加对应地址，确保登出后能正常跳转。

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