使用@auth0/nextjs-auth0在Next.js App Router遇TypeError错误求助

错误原因 #

你在App Router的route.ts中误用了Pages Router的NextApiRequest/NextApiResponse类型，且未遵循v3版本库对App Router的适配规则编写代码，导致请求对象不匹配，触发Cannot read properties of undefined (reading 'headers')错误。

修复步骤 #

1. 替换请求响应类型：从next/server导入App Router对应的NextRequest，替代原有的NextApiRequest/NextApiResponse。
2. 调整handleAuth配置逻辑：v3版本针对App Router优化了API，handleLogin/handleLogout无需手动传递res参数，直接返回处理结果即可。
3. 配置Auth0环境变量：在.env.local中添加ALLOWED_CALLBACK_URLS和ALLOWED_LOGOUT_URLS，包含你的跳转地址（如http://localhost:3000/home）。

修复后的完整代码 #

import { handleAuth, handleLogin, handleLogout } from '@auth0/nextjs-auth0';
import { NextRequest } from 'next/server';

export const GET = handleAuth({
  async login(req: NextRequest) {
    return handleLogin(req, {
      returnTo: '/home', // 推荐用相对路径，避免硬编码域名
    });
  },
  async logout(req: NextRequest) {
    return handleLogout(req, {
      returnTo: '/home',
    });
  },
});

export const dynamic = 'force-dynamic';

额外注意事项 #

• 确保.env.local文件包含以下核心配置（替换为你的Auth0实际信息）：

  AUTH0_SECRET=你的Auth0密钥
  AUTH0_BASE_URL=http://localhost:3000
  AUTH0_ISSUER_BASE_URL=https://你的Auth0域名.auth0.com
  AUTH0_CLIENT_ID=你的客户端ID
  AUTH0_CLIENT_SECRET=你的客户端密钥
  ALLOWED_CALLBACK_URLS=http://localhost:3000/home
  ALLOWED_LOGOUT_URLS=http://localhost:3000/home
  

• v3版本的@auth0/nextjs-auth0对App Router的支持更简洁，无需手动处理响应对象，直接返回handleLogin/handleLogout的结果即可。

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