Host nextjs auth0 handlers at a different route name than "/api"

[christian5]

My nextjs application has to host its server side api routes at /functions/ rather than /api. I’ve noticed that after logging in with auth0 it tries to redirect to the nextjs callback at /api/auth/callback. Is there anyway to tell it that the callback lives at /functions/auth/callback/?

[pratyush.pandey]

To change the callback URL for Auth0 in your Next.js application, you’ll need to modify your Auth0 configuration. Here’s a general outline of the steps you can follow:

1. Open your Auth0 dashboard and navigate to the Application settings for your Next.js application.

2. Look for the “Allowed Callback URLs” field and update it to include your desired callback URL, in this case, /functions/auth/callback/. Make sure to save the changes.

3. In your Next.js application, locate the file where you initialize the Auth0 client. This could be in a file like auth0.js or auth.js.

4. Look for the redirectUri property in the Auth0 client configuration and update it to the new callback URL: /functions/auth/callback/.

5. Save the changes and restart your Next.js application.

By modifying the Auth0 configuration and updating the redirect URI, you should be able to redirect to the desired callback URL at /functions/auth/callback/ instead of the default /api/auth/callback.

[christian5]

Steps 3 and 4 in this solution are incorrect because it instructs setting the redirect URI in the client side code rather than the server side nextjs server side handler which is what the auth0 nextjs library uses.

I was ultimately able to solve this issue by setting the following env variables:

    AUTH0_CALLBACK="/functions/auth/callback",
    NEXT_PUBLIC_AUTH0_PROFILE="/functions/auth/me",