如何移除NextAuth重定向URL中的?callbackUrl参数

问题描述 #

未登录用户访问受保护路由时，预期重定向到localhost:3000/login，但实际生成的重定向URL为http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fdashboard，需要移除URL中的?callbackUrl参数。

用户提供的NextAuth配置代码如下：

import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { NextAuthOptions } from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { db } from "@/lib/prismadb";
import { getUserById } from "@/actions/user";
import { User, UserRole } from "@prisma/client";

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(db),

  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null;
        }

        const user = await db.user.findUnique({
          where: { email: credentials.email },
        });

        if (!user) {
          return null;
        }

        const passwordMatch = await bcrypt.compare(
          credentials.password,
          user.password,
        );

        if (!passwordMatch) {
          return null;
        }

        return user;
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },

  callbacks: {
    async session({ token, session }) {
      if (token.sub && session.user) {
        session.user.id = token.sub;
      }

      if (token.role && session.user) {
        session.user.role = token.role as UserRole;
      }

      return session;
    },
    async jwt({ token }) {
      if (!token.sub) return token;

      const existingUser = (await getUserById(token.sub)) as User;

      if (!existingUser) return token;

      token.role = existingUser.role;

      return token;
    },
  },
  pages: {
    signIn: "/login",
  },
  secret: process.env.NEXTAUTH_SECRET,
  debug: process.env.NODE_ENV === "development",
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

同时已在.env文件中配置：NEXTAUTH_URL=http://localhost:3000

解决方案 #

方法1：修改NextAuth的redirect回调（全局生效） #

在authOptions的callbacks对象中添加redirect函数，自定义重定向逻辑，直接返回不带callbackUrl的登录页地址：

callbacks: {
  // 保留原有的session和jwt回调
  async session({ token, session }) {
    if (token.sub && session.user) {
      session.user.id = token.sub;
    }

    if (token.role && session.user) {
      session.user.role = token.role as UserRole;
    }

    return session;
  },
  async jwt({ token }) {
    if (!token.sub) return token;

    const existingUser = (await getUserById(token.sub)) as User;

    if (!existingUser) return token;

    token.role = existingUser.role;

    return token;
  },
  // 新增redirect回调，清除callbackUrl参数
  async redirect({ url, baseUrl }) {
    // 判断是否跳转到登录页，若是则返回纯净的登录URL
    if (url.startsWith(`${baseUrl}/login`)) {
      return `${baseUrl}/login`;
    }
    // 其他重定向场景保持原有逻辑
    return url.startsWith(baseUrl) ? url : baseUrl;
  },
},

这种方法会从根源上修改NextAuth的重定向行为，所有指向登录页的跳转都会自动剥离callbackUrl参数，适合全局统一处理的需求。

方法2：在登录页客户端清除URL参数（局部处理） #

如果不想改动NextAuth核心配置，可以在/login页面组件中，利用Next.js的路由工具移除URL中的callbackUrl参数：

'use client';
import { useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';

export default function LoginPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 检测到callbackUrl参数时，替换当前路由
    if (searchParams.has('callbackUrl')) {
      router.replace('/login', { scroll: false });
    }
  }, [router, searchParams]);

  // 登录表单及其他页面内容
  return (
    <div className="login-container">
      {/* 登录表单代码 */}
    </div>
  );
}

这种方法仅在用户进入登录页后，在客户端层面修改URL，适合临时需求或不想变更Auth配置的场景。

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