Inconsistent behaviour between v4 and v5 w/ subdomains

[kevinmitch14]

Environment

System:
  OS: macOS 14.0
  CPU: (10) arm64 Apple M1 Pro
  Memory: 323.16 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 21.7.3 - ~/.nvm/versions/node/v21.7.3/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.5.0 - ~/.nvm/versions/node/v21.7.3/bin/npm
  pnpm: 8.15.1 - ~/Library/pnpm/pnpm
  bun: 1.0.3 - /usr/local/bin/bun
Browsers:
  Brave Browser: 124.1.65.114
  Chrome: 124.0.6367.202
  Safari: 17.0
npmPackages:
  next: 14.2.3 => 14.2.3 
  next-auth: ^4.24.7 => 4.24.7 
  react: ^18 => 18.3.1 

Reproduction URL

https://github.com/kevinmitch14/next-auth-subdomains

Describe the issue

I've noticed some discrepancies between v4 and v5. For some context, our app is a multi tenant nextjs app. Each tenant is housed on their own subdomain. I am using middleware rewrites to handle multitenancy.

As a result, I want to have authentication on a subdomain basis. I want to be able to enter the site via a subdomain Eg: http://tenant1.localhost:3000, login and have my auth session on this subdomain only.

In v5 I cannot seem to get this to work. Although my sign in is being initialized on http://tenant1.localhost:3000, I get CSFR errors. (Missing CSRF). I think the issue is that next-auth is hitting the api route at http://localhost:3000/api/auth instead of http://tenant1.localhost:3000/api/auth, causing the issues.

v5 steps:
Go to sign in from http://test.localhost:3000
Network tab shows authjs.callback-url cookie being set on http://localhost:3000, not on http://test.localhost:3000.
Try to log in, CSRF issues.
Add AUTH_URL=http://test.localhost:3000/api/auth
Login, success.

If I hardcode AUTH_URL to the subdomain I am on, like http://tenant1.localhost:3000/api/auth, then api requests to /credentials are made to the subdomain. However I can't set the AUTH_URL at build time because I don't know what the active tenant will be. It seems that I could maybe set the basePath when initializing NextAuth, but this doesn't work either..

I also saw a mention of TRUST_HOST which respects the x-forwarded-header, I thought this would solve my issues, but also no. The docs for this are super confusing too across the docs:

1. This tells Auth.js to trust the X-Forwarded-Host header from the reverse proxy
2. The AUTH_TRUST_HOST environment variable serves the same purpose as setting trustHost: true in your Auth.js configuration
3. trustHost: Auth.js relies on the incoming request’s host header to function correctly. For this reason this property needs to be set to true.

trustHost mentions using host, while AUTH_TRUST_HOST mentions x-forwarded-host.

---

When using v4 + AUTH_TRUST_HOST=true, API requests are made to the subdomain API route as wanted.

So if I am trying to log in on http://tenant1.localhost:3000, the api requests to /credentials etc are made to http://tenant1.localhost:3000/api/auth, as opposed to http://localhost:3000/api/auth

Any ideas as to why this is happening? Is this expected in v5, or a bug?

Some guidance on building multi-tenant auth with next-auth would be really helpful too if possible. There does not seem to be a very definitive blueprint of how to actually achieve this.

How to reproduce

v5 steps:
Go to sign in from http://test.localhost:3000
Network tab shows authjs.callback-url cookie being set on http://localhost:3000, not on http://test.localhost:3000.
Try to log in, CSRF issues.
Add AUTH_URL=http://test.localhost:3000/api/auth
Login, success.

v4 steps:
Comment out v5 code, use v4 code.
Change dep version.
Repeat steps and should be no issues.

Expected behavior

I want to be able to enter the site via a subdomain Eg: http://tenant1.localhost:3000, login and have my auth session on this subdomain only.

[kevinmitch14]

Also trying EmailProvider w/ Resend, I am making the request on http://tenant.localhost:3000, the email URL is tenant.localhost:3000/api/auth/callback/[...] and then when I click the link, it redirects me back to localhost:3000 (no subdomain)

[ajin-iqness]

I do face this weird issue. After being logged in, I could see the cookie authjs.callback-url is been set to http://localhost:3000/ in my PROD for a second and then been corrected to my PROD url http://aaa.bbb.com. Due to this at times it's been redirected to http://localhost:3000/ when session timeout. I have no traces of http://localhost:3000/ anywhere in my code or environment variable. I haven't set AUTH_URL as it's not necessary for v5 and I faced some other issues while setting it.

I use
"next": "14.1.4"
"next-auth": "^5.0.0-beta.18",