invalid_state error after accepting an invitation to join an organization in v4

[jdwitten]

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

I am running into an invalid_state error while testing organizations/invitations with 4.0.0-beta.13. I can tell what's happening, but I don't know why it's happening so could use some help resolving.

My current knowledge of what's happening:

1. When I click on the link in the invitation I am taken to the /auth/login route with the organization and invitation query param set.
2. I can tell that auth0 middleware does a couple of things when processing the /auth/login request. It returns a Next.redirect response to the /authorize endpoint on the auth0 server with the correct query params (client id, state, organizationId, invitationId, etc.). I can also tell the the transaction state is included in a set-cookie header with the same corresponding state value with the __txn prefix.
3. The middleware redirects to Auth0 Universal login page with the organization and invitation param set and the UI correctly prompts me to accept the invitation.
4. I accept the invitation and I am redirected back to the /auth/callback route handler with the same state query param from step 2.
5. This all looks like it's working correctly, except the auth0 middleware now returns an invalid_state error. After debugging I can tell the request cookies in the /auth/callback request do NOT include the transaction state cookie that was set in step 2! So the auth0 middleware cannot find the corresponding state and throw an error.

I'm not entirely clear why this behavior is only happening when trying to accept an invitation. Performing a regular login appears to persist the transaction state cookie correctly.

Reproduction

1. Send an invitation in the Auth0 console
2. Click on the link in the invitation email
3. See you are redirected to Universal Login page and prompted to accept the invitation
4. Log in to accept the invite and see you are redirected back to the app
5. Upon redirect, see that you encounter an invalid_state error from the auth0 middleware

Additional context

No response

nextjs-auth0 version

4.0.0-beta.13

Next.js version

15.1.0

Node.js version

20.9.0

[jdwitten]

Created a repo here that is a clone of the sample project that demonstrates a minimal reproduction of the issue. See the readme on this project for repro steps: https://github.com/jdwitten/auth0-nextjs-v4-callback-error-repro

[jdwitten]

Ok so discovered that this must just be an issue with using the direct local IP address 127.0.0.1 in the login URL. When I use localhost:3000 in the URL it looks like the cookies are set correctly. I suspect this is some quirk with Chrome in how it handles cookies on redirects.

The reason I was using 127.0.0.1 instead of localhost was because the Auth0 UI does not allow me to set the login URI to localhost (or use HTTP instead of HTTPS for local development). Here is the error I get:

And then when I try to use HTTPS:

This is the URI used in the invitation email, so it's inconvenient and confusing to need to manually update the link from HTTPS -> HTTP and 127.0.0.1 -> localhost when accepting the invitation during local dev.