NextAuth集成Auth0：如何区分登录/注册并实现不同跳转？

1. 区分登录与注册的触发请求 #

给登录、注册按钮分别配置不同的signIn调用，通过Auth0官方支持的screen_hint参数指定显示注册界面，同时携带自定义状态标记：

// 登录按钮调用
const login = async () => {
  await signIn("auth0", {
    callbackUrl: "/dashboard",
  });
};

// 注册按钮调用
const signup = async () => {
  await signIn("auth0", {
    authorizationParams: {
      screen_hint: "signup", // 强制Auth0显示注册页面
    },
    state: JSON.stringify({ isNewUser: true }), // 自定义状态，标记当前是注册请求
  });
};

2. 在NextAuth中处理跳转逻辑 #

修改[...nextauth].js，添加redirect回调，通过两种方式判断是否为新注册用户，并重定向到设置页面：

import NextAuth from "next-auth";
import Auth0Provider from "next-auth/providers/auth0";

export default NextAuth({
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      issuer: process.env.AUTH0_ISSUER,
      authorization: {
        params: {
          prompt: "login",
        },
      },
    }),
  ],
  secret: process.env.JWT_SECRET,
  session: {
    strategy: "jwt",
    maxAge: 3000,
  },
  callbacks: {
    async jwt({ token, account, user }) {
      if (account) {
        token.accessToken = account.access_token;
        token.id = user.id;
        // 方式一：通过用户创建时间判断是否为新注册
        const now = Date.now() / 1000;
        const createdAt = Date.parse(user.created_at) / 1000;
        // 5分钟内创建的用户视为新注册用户
        token.isNewUser = now - createdAt < 300;
      }
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.user.id = token.id;
      session.user.isNewUser = token.isNewUser;
      return session;
    },
    async redirect({ url, baseUrl, token }) {
      // 根据token标记跳转设置页
      if (token.isNewUser) {
        return `${baseUrl}/setup-profile`;
      }

      // 方式二：解析state中的标记（若用state传递）
      // const state = JSON.parse(url.split('state=')[1]?.split('&')[0] || '{}');
      // if (state.isNewUser) return `${baseUrl}/setup-profile`;

      // 默认跳转dashboard
      return url.startsWith(baseUrl) ? url : `${baseUrl}/dashboard`;
    },
  },
});

3. 调整Middleware配置 #

根据设置页面的权限需求，修改middleware.js排除或保留该路径：

export { default } from "next-auth/middleware";

export const config = {
  matcher: [
    "/dashboard/:path*",
    "/devices/:path*",
    "/studios/:path*",
    "/account/:path*",
    "/settings/:path*",
    // 若设置页面无需登录验证，添加排除规则
    // "!/setup-profile"
  ],
};

4. 完成设置后更新用户状态 #

在/setup-profile页面完成信息配置后，更新session标记，避免后续登录重复跳转：

import { useSession, update } from "next-auth/react";

const SetupProfile = () => {
  const { data: session } = useSession();

  const handleSave = async (formData) => {
    // 保存用户名、头像等信息到数据库或Auth0
    // ...

    // 更新session，标记用户已完成设置
    await update({
      ...session,
      user: { ...session.user, isNewUser: false },
    });

    // 跳转至dashboard
    window.location.href = "/dashboard";
  };

  return (
    // 渲染设置表单
    <div>
      <h1>完善个人信息</h1>
      <form onSubmit={(e) => {
        e.preventDefault();
        handleSave(new FormData(e.target));
      }}>
        <input name="username" placeholder="设置用户名" required />
        <input name="avatar" placeholder="头像URL" />
        <button type="submit">保存</button>
      </form>
    </div>
  );
};

export default SetupProfile;

核心说明 #

• screen_hint是Auth0官方参数，确保注册按钮直接触发注册流程；
• 新用户判断可选择创建时间对比或自定义state传递两种方式，按需选择；
• 若设置页面需要登录保护，无需在middleware中排除，否则添加排除规则。

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