@auth0/nextjs-auth0中间件报Invalid URL错误，配置看似无误

使用Next.js（App Router）和最新版@auth0/nextjs-auth0开发应用，目标通过Universal Login流程实现无密码邮箱登录。已配置auth0.middleware保护路由，但当中间件拦截/auth/login请求时，出现500内部服务器错误，终端提示TypeError: Invalid URL，堆栈跟踪显示错误源于auth0.middleware调用，推测是构建Auth0 /authorize端点重定向URL时出问题。

相关配置如下：

middleware.ts

import { NextRequest } from 'next/server';
import { auth0 } from './lib/auth0';

export async function middleware(request: NextRequest) {
  return await auth0.middleware(request);
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - public files
     * - /onboarding (public page)
     */
    '/((?!_next/static|_next/image|favicon.ico|onboarding).*)',
  ],
};

lib/auth0.ts

import { Auth0Client } from '@auth0/nextjs-auth0/server';

export const auth0 = new Auth0Client({
  authorizationParameters: {
    connection: 'email',
  }
});

已验证环境变量正常，Auth0控制台的Branding > Universal Login已选择无密码模板，注册按钮会重定向到/auth/login?login_hint=xxx。

1. 补充Auth0Client核心配置 #

出现Invalid URL错误的核心原因是Auth0Client初始化时缺少必要参数，无法正确构建授权端点URL。需在lib/auth0.ts中补充必填的身份验证配置：

import { Auth0Client } from '@auth0/nextjs-auth0/server';

export const auth0 = new Auth0Client({
  domain: process.env.AUTH0_DOMAIN!,
  clientId: process.env.AUTH0_CLIENT_ID!,
  clientSecret: process.env.AUTH0_CLIENT_SECRET!,
  redirectUri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
  postLogoutRedirectUri: `${process.env.NEXT_PUBLIC_APP_URL}/`,
  authorizationParameters: {
    connection: 'email',
    prompt: 'login' // 可选：强制显示无密码登录界面，避免自动登录
  }
});

确保环境变量包含：

• AUTH0_DOMAIN、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET（Auth0控制台获取）
• NEXT_PUBLIC_APP_URL（应用根URL，如http://localhost:3000）

2. 排除Auth0内置路由 #

当前middleware的匹配规则包含了/auth/*路径，而该路径是@auth0/nextjs-auth0的内置路由（处理登录回调、登出等），需排除避免拦截：
修改middleware.ts的config.matcher：

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - public files
     * - /onboarding (public page)
     * - /auth (Auth0内置路由)
     */
    '/((?!_next/static|_next/image|favicon.ico|onboarding|auth).*)',
  ],
};

补充说明 #

• @auth0/nextjs-auth0的Auth0Client依赖核心配置生成合法的授权请求URL，缺失会直接导致URL构建失败。
• 排除/auth路由是为了让SDK自动处理身份验证流程，避免自定义中间件干扰正常登录逻辑。

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