Email provider design flaw breaks auth flow

[nbayat]

Provider type

Email

Environment

"next": "13.4.13"
"next-auth": "^4.23.0"
"react": "18.2.0"
"nodemailer": "^6.9.4"

Node v20.4.0
OSX 13.4.1

Reproduction URL

.

Describe the issue

While authenticating with the email provider, the current flow is as follows:

1. Send the user's email to email.ts.
2. The route creates a temporary JWT which is then sent it in an email to the user.
3. Store the temp JWT in the database.
4. Redirect the user to the "verify-request" page.

Upon clicking the link on the email:

1. The callback API generates a JWT.
2. The JWT is returned and stored in a cookie.

The main issue arises from the fact that the JWT token gets stored in the browser that clicks on the link, rather than the browser that initiated the authentication flow.

For example, if a user starts the authentication flow on their desktop but receives a notification on their phone to verify the email and completes the verification on the phone, the desktop browser does not receive the authentication cookie, while the mobile browser does. A similar situation occurs when using an email client on the desktop that opens links in the default browser, such as Apple's email client defaulting to Safari. This can create discrepancies when the authentication flow was initiated in a different browser like Chrome or Firefox.

How to reproduce

Ensure you have a nextjs project with next-auth and an email provider. then, use a different device or browser to verify the request.

Expected behavior

For the email provider, api/callback should not return the JWT directly, instead when the browser initiates an authentication flow, it should receive a JWT with a flag indicating that it's waiting for email verification. Once the email is verified, the flag should be updated.