withApiAuthRequired not working from route handler

[withintheruins14]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

I am using the App Router. This code works when placed inside the component folder as app/trials/route.ts but gives 401 unauthorized when used as a route handler at app/api/trials/route.ts

import { NextResponse } from 'next/server';
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export const GET = withApiAuthRequired(async function trials(req:any, res:any) {
  const { accessToken } = await getAccessToken(req, res);
  const config = { headers: { Authorization: `Bearer ${accessToken}` }};
  const response = await fetch('https://myexternalapi.io/api/trials', config);
  const trials = await response.json();
  return NextResponse.json({ trials })
});

In the server logs...

GET /trials 200 in 317ms
 GET /api/auth/me 200 in 9ms
 GET /api/auth/me 200 in 5ms
 GET /api/trials 401 in 5ms
Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: true,
    requestIncludesCredentials: true,
    type: 'default',
    status: 401,
    timingInfo: {
      startTime: 27883.867709,
      redirectStartTime: 0,
      redirectEndTime: 0,
      postRedirectStartTime: 27883.867709,
      finalServiceWorkerStartTime: 0,
      finalNetworkResponseStartTime: 0,
      finalNetworkRequestStartTime: 0,
      endTime: 0,
      encodedBodySize: 110,
      decodedBodySize: 110,
      finalConnectionTimingInfo: null
    },
    cacheState: '',
    statusText: 'Unauthorized',
    headersList: HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [ URL {} ],
    body: { stream: undefined }
  },
  [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(6) {
      'vary' => [Object],
      'content-type' => [Object],
      'date' => [Object],
      'connection' => [Object],
      'keep-alive' => [Object],
      'transfer-encoding' => [Object]
    },
    [Symbol(headers map sorted)]: null
  }
}
 GET /trials 200 in 136ms
 GET /api/auth/me 200 in 6ms
 GET /api/auth/me 200 in 4ms

There just isn't any good documentation on doing this with the App Router and with the nextjs-auth0 library. Any guess what I'm doing wrong? I was expecting to be able to attach the token and keep everything server rendered. Thanks!

Reproduction

import { NextResponse } from 'next/server';
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export const GET = withApiAuthRequired(async function trials(req:any, res:any) {
  const { accessToken } = await getAccessToken(req, res);
  const config = { headers: { Authorization: `Bearer ${accessToken}` }};
  const response = await fetch('https://myexternalapi.io/api/trials', config);
  const trials = await response.json();
  return NextResponse.json({ trials })
});

Additional context

No response

nextjs-auth0 version

3.5.0

Next.js version

14.2.3

Node.js version

20.11.0