Next.js中使用自定义Auth0Server调用withMiddlewareAuthRequired报错求助

我在 Next.js 13.4.19 项目中无法使用 Auth0 库默认的环境变量名称，希望通过实例化自定义 Auth0Server 传入自定义环境变量来配置密钥、客户端ID等参数。使用默认环境变量命名时，通过middleware.js导出withMiddlewareAuthRequired指定受保护路由一切正常，但自定义实例后出现如下错误：

- error node_modules/oidc-token-hash/lib/shake256.js (3:0) @ <unknown>
- error Cannot read properties of undefined (reading 'substring')
null

推测错误源于middleware.js间接导入 Auth0 库文件导致，求正确使用自定义 Auth0Server 实例实现功能的方法。以下是最小复现示例（基于npx create-next-app默认项目，安装@auth0/nextjs-auth0 3.1.0版本）：

src/pages/_app.tsx #

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { UserProvider } from '@auth0/nextjs-auth0/client'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UserProvider>
        <Component {...pageProps} />
    </UserProvider>
  )
}

src/auth0.js #

默认（可用） #

无需添加任何代码

自定义（不可用） #

import { initAuth0 } from "@auth0/nextjs-auth0";
const auth0 = initAuth0({
    baseURL: process.env.CUSTOM_AUTH0_BASE_URL,
    clientID: process.env.CUSTOM_AUTH0_CLIENT_ID,
    clientSecret: process.env.CUSTOM_AUTH0_CLIENT_SECRET,
    issuerBaseURL: process.env.CUSTOM_AUTH0_ISSUER_BASE_URL,
    secret: process.env.CUSTOM_AUTH0_SECRET
});

export {auth0};

src/pages/api/auth/[...auth0].js #

默认（可用） #

import { handleAuth } from "@auth0/nextjs-auth0";
export default handleAuth();

自定义（不可用） #

import { auth0 } from '@/auth0';
export default auth0.handleAuth();

src/middleware.js #

默认（可用） #

import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';
export default withMiddlewareAuthRequired();
export const config = {
    matcher: [
        '/((?!api|favicon.ico|logo-dark.jpg).*)'
    ]
};

自定义（不可用） #

import { auth0 } from '@/auth0';
export default auth0.withMiddlewareAuthRequired();
export const config = {
    matcher: [
        '/((?!api|favicon.ico|logo-dark.jpg).*)'
    ]
};

.env.local #

默认（可用） #

AUTH0_BASE_URL="value"
AUTH0_CLIENT_ID="value"
AUTH0_CLIENT_SECRET="value"
AUTH0_ISSUER_BASE_URL="value"
AUTH0_SECRET="value"

自定义（不可用） #

CUSTOM_AUTH0_BASE_URL="value"
CUSTOM_AUTH0_CLIENT_ID="value"
CUSTOM_AUTH0_CLIENT_SECRET="value"
CUSTOM_AUTH0_ISSUER_BASE_URL="value"
CUSTOM_AUTH0_SECRET="value"

问题核心是中间件运行在Edge Runtime（V8隔离环境），无法直接使用initAuth0创建的Node.js环境实例——initAuth0依赖Node.js内置API，而Edge环境不支持这些API，导致依赖的oidc-token-hash库触发报错。

正确做法是区分Node.js环境和Edge环境的Auth0配置方式：

1. 更新 src/auth0.js #

拆分Node.js环境（API路由、服务器端组件）和Edge环境（中间件）的专用实例：

import { initAuth0 } from "@auth0/nextjs-auth0";
import { initAuth0Edge } from "@auth0/nextjs-auth0/edge";

// Node.js环境专用实例（API路由、SSR场景）
export const auth0 = initAuth0({
    baseURL: process.env.CUSTOM_AUTH0_BASE_URL,
    clientID: process.env.CUSTOM_AUTH0_CLIENT_ID,
    clientSecret: process.env.CUSTOM_AUTH0_CLIENT_SECRET,
    issuerBaseURL: process.env.CUSTOM_AUTH0_ISSUER_BASE_URL,
    secret: process.env.CUSTOM_AUTH0_SECRET
});

// Edge环境专用实例（中间件场景）
export const auth0Edge = initAuth0Edge({
    baseURL: process.env.CUSTOM_AUTH0_BASE_URL,
    clientID: process.env.CUSTOM_AUTH0_CLIENT_ID,
    issuerBaseURL: process.env.CUSTOM_AUTH0_ISSUER_BASE_URL,
    secret: process.env.CUSTOM_AUTH0_SECRET
});

2. 修改 src/middleware.js #

使用Edge专用实例：

import { auth0Edge } from '@/auth0';
export default auth0Edge.withMiddlewareAuthRequired();
export const config = {
    matcher: [
        '/((?!api|favicon.ico|logo-dark.jpg).*)'
    ]
};

3. 保持API路由配置不变 #

src/pages/api/auth/[...auth0].js仍使用Node.js实例：

import { auth0 } from '@/auth0';
export default auth0.handleAuth();

关键说明 #

• initAuth0仅适用于Node.js环境，依赖Node.js内置API，不能在Edge Runtime运行
• initAuth0Edge是Auth0专为Edge环境设计的初始化方法，兼容V8隔离环境，不会触发依赖Node API的代码路径
• Edge环境不需要配置clientSecret，因为授权流程的密钥验证由Auth0服务器端完成，中间件仅负责令牌合法性校验

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