如何在Next.js 15中通过Auth0 v4捕获用户注册信息并存入数据库

Auth0 v4 for Next.js采用App Router优先设计，API结构和v3差异较大，以下是替代v3实现的具体方案：

方案一：在Next.js回调路由中处理 #

1. 配置基础认证路由 #

创建app/api/auth/[auth0]/route.ts，替换v3的handleAuth逻辑：

import { handleAuth, handleCallback } from '@auth0/nextjs-auth0';
import { getUserByEmail, createUser } from '@/lib/queries/users';

export const GET = handleAuth({
  async callback(req) {
    try {
      const res = await handleCallback(req, {
        async afterCallback(req, session) {
          // 从session中获取用户信息
          if (!session.user) {
            console.error('未找到用户信息');
            return session;
          }

          // 检查用户是否已存在于自有数据库
          const existingUser = await getUserByEmail(session.user.email!);

          // 不存在则创建新用户
          if (!existingUser) {
            await createUser({
              email: session.user.email!,
              name: session.user.name!,
              auth0Id: session.user.sub!,
            });
            console.log(`创建新用户: ${session.user.email}`);
          }

          return session;
        },
      });
      return res;
    } catch (error) {
      console.error('登录后处理用户出错:', error);
      return Response.redirect(new URL('/', req.url));
    }
  },
});

2. 配置Middleware #

创建middleware.ts管理认证流程：

import { authMiddleware } from '@auth0/nextjs-auth0';

export default authMiddleware({
  authRequired: false, // 根据需求设置是否强制认证
  routes: {
    callback: '/api/auth/callback',
    postLogoutRedirect: '/',
  },
});

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

3. 初始化Auth0 #

创建auth.ts文件配置Auth0客户端信息：

import { initAuth0 } from '@auth0/nextjs-auth0';

export const auth0 = initAuth0({
  domain: process.env.AUTH0_DOMAIN!,
  clientId: process.env.AUTH0_CLIENT_ID!,
  clientSecret: process.env.AUTH0_CLIENT_SECRET!,
  authorizationParams: {
    redirect_uri: process.env.AUTH0_REDIRECT_URI!,
  },
});

方案二：使用Auth0 Post Login Action #

如果不想在Next.js中处理回调逻辑，可直接在Auth0控制台配置Post Login Action触发用户信息同步：

1. 创建Auth0 Action #

在Auth0控制台「Actions > Flows > Login」中添加自定义Action：

exports.onExecutePostLogin = async (event, api) => {
  const axios = require('axios');
  try {
    // 调用你的Next.js API同步用户信息
    await axios.post('https://your-domain.com/api/users/sync', {
      email: event.user.email,
      name: event.user.name,
      auth0Id: event.user.user_id,
    });
  } catch (error) {
    console.error('同步用户到数据库失败:', error);
  }
};

2. 实现Next.js同步API #

创建app/api/users/sync/route.ts处理Auth0 Action的请求：

import { NextResponse } from 'next/server';
import { getUserByEmail, createUser } from '@/lib/queries/users';

export async function POST(req: Request) {
  // 可选：验证请求来自Auth0（可通过Auth0签名或密钥验证）
  const { email, name, auth0Id } = await req.json();

  try {
    const existingUser = await getUserByEmail(email);
    if (!existingUser) {
      await createUser({ email, name, auth0Id });
      console.log(`创建新用户: ${email}`);
    }
    return NextResponse.json({ success: true });
  } catch (error) {
    console.error('同步用户出错:', error);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

关键差异说明 #

• v4不再使用v3中handleAuth导出GET/POST的方式，而是在App Router路由中直接调用
• 用户信息从session.user获取，而非v3的res.user
• afterCallback参数简化为req和session，不再接收res和state

内容的提问来源于stack exchange，提问作者שמעון פוקס