Next.js login fails with custom domain in hosts file, but not localhost

Help
,
1

Summary

Auth0 Login works with the app from the Auth0 Next.js QuickStart when using localhost, but attempting to use a custom domain by configuring the hosts file does not.

Environment

  • Node Version Manager 0.39.7
  • Node v18.19.0
  • “@auth0/nextjs-auth0”: “^3.5.0”

How to recreate the issue

  • Install Windows Subsystem for Linux Ubuntu-24.04
  • Install nginx on WSL
  • Follow the Auth0 quick start with Next.js to create a new app on Windows Subsystem for Linux
  • Test login and logout functionality when the app is configured to use localhost (works)
  • Configure nginx as reverse proxy to point to next.js app and restart nginx
  • Think of a custom domain name, e.g. dev.company.com
  • Update the hosts file on windows with a custom domain to point to the IP of Windows Subystem for Linux
  • Reconfigure the app to use a custom domain
  • Relaunch the app and attempt to test the login functionality - this might require clearing the browser history/cache. The user will get redirected to the login page, but the login process fails on the callback url with an http status code 302.

Auth0 Next.js SDK Quickstarts: Login

The only error that happens is before the login process even happens

Error: Route “/api/auth/[auth0]” used params.auth0. params should be awaited before using its properties. Learn more: Dynamic APIs are Asynchronous | Next.js

3

Hi @milotis,

Thanks for reaching out to the Auth0 Community!

Could you check your Auth0 Logs to determine the behavior you are experiencing? Then, please share your findings with me here.

Secondly, if the login flow fails on the callback URL, there might be issues around the URL itself. Is this callback URL the same one you used during your localhost login attempts?

Thanks,
Rueben

1 Like
4

The logs show two entries ‘Success Login’ and and ‘Success Exchange of Authorization Code’ and I should have also stated the browser lands on an NGinx 502 Bad Gateway on the callback.

The callback URL uses the domain and not localhost.

https://dev.company.net/api/auth/callback?code=CODE&state=STATE

image
image396×862 21.6 KB

image
image730×783 25.7 KB

image
image800×718 24.8 KB

5

I tried creating a new project with Next.js 14.2.17 just in case it was because of the recent breaking changes, but still get the same error.

Ok, I didn’t believe it was nginx, but seems to be this error. Found some nginx settings online to configure buffer sizes, etc. Gotta find one that doesn’t throw errors I think.

upstream sent too big header while reading response header from upstream

No combination of increasing the header size has worked; so I just deleted everything in the user’s app_metadata and was able to login. So, some secret combo of settings will get stuff working again.

6

Hi @milotis,

Thanks for the update.

If you are experiencing a 502 error, that is indicating a server error.

I have just checked your tenant settings and found that you do not currently have a custom domain configured.

Please check out the following documentation:

Thanks,
Rueben

7

Thank you for checking, but I have verified the issue is I did not properly configure nginx to handle the large header size resulting from the user’s app_metadata.

1 Like
8

Hi @milotis,

Thanks for sharing your solution. I’m glad it’s working now.

Let us know if you have any more questions.

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.