如何用Action Flow实现跳转并在Next.js(NextAuth)中保留session.user.email访问权限？

一、Auth0 Post Login Action 配置 #

1. 登录Auth0控制台，进入「Actions」>「Flows」>「Login」
2. 创建新的Post Login Action，粘贴以下代码：

exports.onExecutePostLogin = async (event, api) => {
  // 读取用户app_metadata中的isActive状态，默认设为false
  const isActive = event.user.app_metadata?.isActive ?? false;
  // 根据状态确定重定向路径
  const targetPath = isActive ? '/dashboard' : '/signup';
  // 拼接应用回调地址与目标路径，完成重定向
  api.redirect.sendUserTo(`${event.request.query.redirect_uri}${targetPath}`);
};

3. 保存并发布该Action，将其添加到Login Flow的执行序列中

注意：需确保你的应用域名已添加到Auth0的「Allowed Callback URLs」列表中，避免重定向被拦截。

二、NextAuth 配置（保留邮箱信息） #

在Next.js项目的[...nextauth].js（或.ts）文件中，配置Auth0 Provider并处理session回调：

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_BASE_URL,
      // 明确请求邮箱权限
      authorization: {
        params: {
          scope: "openid profile email",
        },
      },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      // 将邮箱与app_metadata同步到session，供前端访问
      session.user.email = token.email;
      session.user.app_metadata = token.app_metadata;
      return session;
    },
    async jwt({ token, user }) {
      // 首次登录时，将用户邮箱与app_metadata存入token
      if (user) {
        token.email = user.email;
        token.app_metadata = user.app_metadata;
      }
      return token;
    },
  },
});

三、前端使用示例 #

在Next.js组件中，通过useSession钩子获取用户信息：

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

export default function SignupPage() {
  const { data: session } = useSession();

  return (
    <div>
      {session ? (
        <div>
          <p>请完成注册流程：{session.user.email}</p>
          <p>当前激活状态：{session.user.app_metadata?.isActive ? "已激活" : "未激活"}</p>
        </div>
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
}

关键注意事项 #

• Auth0的Post Login Action默认不会过滤用户邮箱，确保邮箱信息能正常传递到应用
• NextAuth的jwt回调会存储用户核心信息，session回调同步后，前端可在任何路由下访问session.user.email
• 若重定向后session未立即加载，可使用useSession({ required: true })强制触发登录校验

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