如何使用NextAuth.js实现登录后重定向至动态用户Profile URL？

你可以通过NextAuth的服务器端回调组合或者自定义回调页面实现需求，完全避免前端useEffect导致的内容闪烁，具体方案如下：

方案一：使用NextAuth内置回调链（推荐） #

在[...nextauth].js/ts配置文件中，通过signIn、jwt和redirect三个回调配合，在登录流程中获取用户数据并构造跳转URL：

1. 配置signIn回调：获取用户数据库信息 #

登录验证通过后，从数据库拉取用户的role和username，附加到用户对象中：

import { getUserFromDatabase } from "@/lib/db"; // 替换成你的数据库查询方法

export const authOptions = {
  // ...其他配置（providers、secret等）
  callbacks: {
    async signIn({ user }) {
      // 根据登录用户的邮箱/ID查询数据库
      const dbUser = await getUserFromDatabase(user.email);
      if (dbUser) {
        // 将role和username附加到user对象，供后续回调使用
        user.role = dbUser.role;
        user.username = dbUser.username;
      }
      return true; // 允许登录
    },
    // ...
  }
};

2. 配置jwt回调：存储用户数据到Token #

把role和username存入JWT Token，方便后续服务器端回调读取：

async jwt({ token, user }) {
  // 登录阶段user对象存在，写入数据到token
  if (user) {
    token.role = user.role;
    token.username = user.username;
  }
  return token;
},

3. 配置redirect回调：构造动态跳转URL #

在服务器端读取Token中的用户数据，生成目标URL并完成重定向：

import { getToken } from "next-auth/jwt";

async redirect({ baseUrl }) {
  // 从请求中获取JWT Token
  const token = await getToken({ req });
  if (token?.role && token?.username) {
    // 构造个人主页URL并返回
    return `${baseUrl}/${token.role}/u/${token.username}`;
  }
  // 兜底跳转（比如首页）
  return baseUrl;
},

方案二：自定义回调页面（App Router适用） #

创建对应登录服务商的回调路由，在服务器端直接获取Session并重定向：

1. 在app/api/auth/callback/[provider]/route.js创建文件（比如Google登录就是google/route.js）：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../../[...nextauth]/route";
import { redirect } from "next/navigation";

export async function GET(request) {
  // 服务器端获取已登录用户的Session
  const session = await getServerSession(authOptions);
  
  if (session?.user?.role && session?.user?.username) {
    // 重定向到个人主页
    redirect(`/${session.user.role}/u/${session.user.username}`);
  }
  // 兜底跳转
  redirect("/");
}

关键说明 #

• 两种方案都是服务器端执行重定向，完全不会出现前端内容闪烁问题。
• 无需在客户端提前获取Session，所有用户数据都在登录流程的服务器环节获取，避免了登录前Session为undefined的问题。

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