v4: Support for basePath config in next.config.ts

[MilanLund]

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

We are running a site that is routed through a basePath defined in the next.config.ts file.
(FYI: URLs without the basePath are handled by a different site.)

After migrating from v3 to v4 of this package, we encountered an issue that seems to be caused by incorrect handling of basePath.
I followed the v4 the README and V4_MIGRATION_GUIDE files, but there is no mention of a scenario where basePath is used.

Main Question

Is basePath supported?

If it is, could you provide a code example demonstrating how to set it up? Otherwise, I would be grateful for any reasonable guidance.

Reproduction

1. In next.config.ts, define a basePath property.
2. Follow the migration guide—no extra modifications, just migrate the app code to v4.
3. In Auth0 Admin → Application settings → Allowed Callback URLs, add a new callback URL: http://localhost:3000/<basePath>/auth/callback
4. While testing the authentication flow, when I attempt to log in, I receive the following error message: Callback URL mismatch. The provided redirect_uri is not in the list of allowed callback URLs. I noticed in the query string that the redirect_uri parameter is set to:
   http://localhost:3000/auth/callback (without the basePath).

Additional context

I know the reproduction steps are not very detailed, but I hope they are sufficient to convey the issue.

I also tried adding custom routes within the Auth0Client initialization that include the basePath. However, this led to an unexpected chain of redirects.

While briefly reviewing the package's source code, I found that the callback URL is constructed based on the APP_BASE_URL environment variable and the callback route definition—without incorporating basePath.

I also attempted to set APP_BASE_URL to include the basePath, like: http://localhost:3000/<basePath>. However, it seems that the package implementation strips the pathname anyway.

nextjs-auth0 version

4.0.0

Next.js version

15.1.6

Node.js version

20.9.0

[matthew-gladman-oua]

This is very frustrating, v3 didn't support basePath either. This is the workaround we employed:

// middleware.ts

if (request.nextUrl.pathname.startsWith(`/auth`)) {
  // This is a hack because auth0 does not support basePath currently in v4.0.0. This should be removed once native support is added
  request.nextUrl.pathname = `${request.nextUrl.basePath}${request.nextUrl.pathname}`;

  return auth0.middleware(request);
}

// src/lib/auth0.ts

// This is specific to our app. Notably this stores both the full URL and base path seperately
const { basePath, appUrl } = getConfig();

return new Auth0Client({
  // Set this to `http://localhost:3000` (no basePath)
  appBaseUrl: appUrl.replace(basePath, ''),
  // These must have the basePath in the URL
  routes: {
    callback: `${basePath}/auth/callback`,
    login: `${basePath}/auth/login`,
    logout: `${basePath}/auth/logout`,
  },
});

Not ideal that we are modifying the request object directly, but it appears to work in my local prototype