Next.js配置basePath后，NextAuth与Keycloak集成出现登录重定向失效问题

这种给Next.js加上basePath后，Auth路由突然“罢工”的情况确实挺闹心的，我帮你梳理几个关键的排查点和修复建议，应该能解决你的问题：

1. 补全NextAuth服务端的basePath配置 #

你目前只在客户端的SessionProvider里设置了basePath，但服务端的authOptions里也必须同步配置basePath，这是很多人容易忽略的核心点！

修改你的authOptions.ts，添加basePath字段并调整redirect回调逻辑：

import KeycloakProvider from "next-auth/providers/keycloak";
import { type NextAuthOptions } from "next-auth";

const keycloak = KeycloakProvider({
  clientId: process.env.KEYCLOAK_CLIENT_ID!,
  clientSecret: process.env.KEYCLOAK_CLIENT_SECRET!,
  issuer: process.env.KEYCLOAK_ISSUER!,
});

export const authOptions: NextAuthOptions = {
  providers: [keycloak],
  secret: process.env.NEXTAUTH_SECRET,
  debug: true,
  // 新增：匹配NextAuth API路由的完整前缀
  basePath: "/app/api/auth",
  pages: {
    // 用环境变量动态拼接，避免硬编码
    signIn: `${process.env.NEXT_PUBLIC_BASE_PATH || ""}/auth/signin`,
    error: `${process.env.NEXT_PUBLIC_BASE_PATH || ""}/auth/error`,
    signOut: `${process.env.NEXT_PUBLIC_BASE_PATH || ""}/auth/signout`,
  },
  callbacks: {
    async redirect({ url, baseUrl }) {
      // 修复baseUrl：从NEXTAUTH_URL中提取应用根路径（去掉/api/auth后缀）
      const appBaseUrl = baseUrl.replace(/\/api\/auth$/, "");
      if (url.startsWith("/")) {
        return `${appBaseUrl}${url}`;
      }
      return url;
    },
  },
  logger: {
    error(code, meta) {
      console.error("[AUTH ERROR]", code, meta);
    },
    warn(code) {
      console.warn("[AUTH WARN]", code);
    },
    debug(code, meta) {
      console.debug("[AUTH DEBUG]", code, meta);
    },
  },
};

2. 验证环境变量的完整性 #

确保.env.local里的变量完全匹配配置，避免硬编码不一致：

# NextAuth API的完整地址
NEXTAUTH_URL=http://localhost:8080/app/api/auth
# 前端可用的basePath，和next.config.js保持一致
NEXT_PUBLIC_BASE_PATH=/app
# 其他Keycloak及Auth相关变量
KEYCLOAK_CLIENT_ID=你的客户端ID
KEYCLOAK_CLIENT_SECRET=你的客户端密钥
KEYCLOAK_ISSUER=http://你的Keycloak地址/auth/realms/你的领域
NEXTAUTH_SECRET=你的Auth密钥

3. 优化SessionProvider的动态配置 #

把SessionProvider的basePath改成环境变量动态获取，避免后续修改basePath时需要多处调整：

"use client";
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";

type Props = {
  children: ReactNode;
};

export default function SessionWrapper({ children }: Props) {
  const authBasePath = `${process.env.NEXT_PUBLIC_BASE_PATH || ""}/api/auth`;
  return (
    <SessionProvider basePath={authBasePath}>
      {children}
    </SessionProvider>
  );
}

4. 更新Keycloak客户端的回调URL #

务必在Keycloak管理后台的客户端配置中，把授权回调URL更新为包含basePath的地址：
http://localhost:8080/app/api/auth/callback/keycloak
如果还是用旧的不带/app的回调URL，Keycloak会直接拒绝回调，导致登录流程中断。

5. 本地测试验证 #

启动项目后，先手动访问http://localhost:8080/app/api/auth/signin，看是否能正常跳转到Keycloak登录页：

• 如果能跳转，说明服务端Auth路由配置正确；
• 如果不能，查看终端的debug日志（已开启debug: true）和浏览器控制台，定位具体错误（比如404路由不匹配、回调URL错误等）。

最后，修改配置后记得重启开发服务器，因为Next.js的配置文件和环境变量需要重启才能生效。

内容来源于stack exchange