Users keep getting "verification error" when using email provider

[thomasmol]

Question 💬

I am using @auth/core and @auth/sveltekit with the email provider and prisma adapter.

I see many users landing on the auth-error page along with this error message in my logs:

[auth][error][Verification]: Read more at [https://errors.authjs.dev#verification](https://errors.authjs.dev/#verification)
  [auth][cause]: Verification
  at Module.callback (file:///app/node_modules/@auth/core/lib/routes/callback.js:124:23)
  at async AuthInternal (file:///app/node_modules/@auth/core/lib/index.js:65:38)
  at async Auth (file:///app/node_modules/@auth/core/index.js:100:30)
  at async SvelteKitAuth.session.strategy (file:///app/build/server/chunks/hooks.server-b6c3cda7.js:265:22)
  at async respond (file:///app/build/server/chunks/index-04aebecb.js:3667:22)
  at async Array.ssr (file:///app/build/handler.js:1207:3)
  [auth][details]: {
    "provider": "email"
}

I understand that this might be happening because they click the verification link twice (while it will only work once), and this is probably expected behavior.
I can also see that the user is correctly added to the database so that's all fine.
My question is, how can I make sure users are redirected to the auth environment if they have already logged in and clicked the link twice?

This seems to happen most often when users use different browsers. The link in the email probably opens in the default browser and if it is not the browser they are actually using they click/copy the login link and open it in their other browser, resulting in this error. Any ways to mitigate this problem?

How to reproduce ☕️

Create an next-auth/authjs app with email provider and use the login link.

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[thomasmol]

Does somebody have a solution for this?

[thomasmol]

OTP would work, or logging in the original session

[goodpilotfish]

How did you manage to solve this?

[thomasmol]

custom verification token, send it to email, and create a form with action in the form of the auth callback
little bit like this:

EmailProvider({
	maxAge: 15 * 60, // 15 minutes
	generateVerificationToken: () => {
		const random = crypto.getRandomValues(new Uint8Array(8));
		return Buffer.from(random).toString('hex').slice(0, 6); // generates a random token of 6 alphanumeric characters
	},
	sendVerificationRequest: async ({ identifier: email, token }) => {
		// send email with token using nodemailer, etc..
	}
}),

and a form like so: (this is in SvelteKit

<form
action="/auth/callback/email?email={$signInEmail}&callbackUrl={$signInCallbackUrl}&token={token}"
method="post"
class="flex flex-col">
<input type="hidden" name="email" value={$signInEmail} />
<input type="hidden" name="callbackUrl" value={$signInCallbackUrl} />

<input
	type="text"
	name="token"
	id="code"
	minlength="6"
	maxlength="6"
	size="6"
	required
	placeholder="000000"
	bind:value={token}
	on:input={handleTokenInput}
	class="input input-bordered w-full" />

<button type="submit" class="btn btn-primary btn-block mt-2"
	>login</button>
</form>

[thomasmol]

The issue explained here with solution: #4585

[thomasmol]

tldr: some email platforms make a get request for spam filtering or getting e.g. the og:image to the login link url -> causing the token to be invalided.