v4: appBaseUrl with additional url path after domain causes /auth/callback / redirect_uri mismatch

[priley86]

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

This issue is currently encountered in v4 when you use an APP_BASE_URL that has an additional path, e.g.: APP_BASE_URL='http://localhost:3000/ai'

and attempt to use the default middleware /auth/callback route handler currently provided. In this case, you will likely encounter a Callback URL mismatch error.

The current code in question in that is causing this is here:
https://github.com/auth0/nextjs-auth0/blob/main/src/server/auth-client.ts#L264

I have validated that @frederikprijck 's fix here resolves the problem.
#1941

Reproduction

1. Provide an APP_BASE_URL like APP_BASE_URL='http://localhost:3000/ai'
2. Set your Allowed Callback URLs to "http://localhost:3000/ai/auth/callback", and Allowed Logout URLs to "http://localhost:3000/ai"
3. Use the default middleware setup as indicated currently in the README
4. Attempt the login flow and note that http://localhost:3000/auth/callback is provided as the redirect_uri instead of http://localhost:3000/ai/auth/callback leading to the Callback URL mismatch above.

It does not seem to matter whether the APP_BASE_URL is provided with or without the trailing slash, e.g. "/ai" or "/ai/", the same error occurs.

An aside, but unrelated issue to this issue was also encountered when using the useUser hook currently provided here on the client:

nextjs-auth0/src/client/hooks/use-user.ts

Line 9 in 724310c

process.env.NEXT_PUBLIC_PROFILE_ROUTE || "/auth/profile",

And seeing the /auth/profile also experience a similar issue and 404 (and not provide the /ai/auth/profile) in the request.

This issue is less urgent, b/c we can simply write our own hook to navigate around this, e.g.:

"use client";

import useSWR from "swr";

export function useUser() {
  const { data, error, isLoading } = useSWR<unknown, Error, string>(
    "/ai/auth/profile",
    (...args) =>
      fetch(...args).then((res) => {
        if (!res.ok) {
          throw new Error("Unauthorized");
        }

        return res.json();
      })
  );

  // if we have the user loaded via the provider, return it
  if (data) {
    return {
      user: data,
      isLoading: false,
      error: null,
    };
  }

  if (error) {
    return {
      user: null,
      isLoading: false,
      error,
    };
  }

  return {
    user: data,
    isLoading,
    error,
  };
}

Additional context

No response

nextjs-auth0 version

4.0.2

Next.js version

15.2.0

Node.js version

20

[tusharpandey13]

Fixed in #1941

[priley86]

Adding some further notes about the configuration used here in case it is at all helpful:

The root next.config.ts looks like:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  basePath: "/ai",
...
}

Upon requests to the server after, the pathname referenced here will always be a partial path, e.g. when req.nextUrl is logged:

req.nextUrl: {
  href: 'http://localhost:3000/ai/auth/login?audience=https%3A%2F%2Flogin0.local.dev.auth0.com%2Fapi%2Fv2%2F&scope=openid+profile+email&returnTo=%2Fai%2Fdocs',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/auth/login',
  search: '?audience=https%3A%2F%2Flogin0.local.dev.auth0.com%2Fapi%2Fv2%2F&scope=openid+profile+email&returnTo=%2Fai%2Fdocs',
  searchParams: URLSearchParams {  },
  hash: ''
}

So in this case, even overriding the routing configuration as mentioned in the EXAMPLES will not currently match in this case:

export const auth0 = new Auth0Client({
  routes: {
    login: "/ai/auth/login",
    logout: "/ai/auth/logout",
    callback: "/ai/auth/callback",
  },
});

and 404 would be returned by the next js server:

So i believe this fix mentioned here is intended for this case 👍