Receiving Twice Email Verification Codes During Sign-In with Clerk

[Shinchan3102]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/Shinchan3102/clerk-auth-next

Publishable key

pk_test_bWFpbi10b21jYXQtMzQuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Description:

• I am using only email and email verifcation code for authentication purpose in my app but while signin with email it is sending the email verification code twice to my email each time but it works good while signup process. It is happening on locally and sometimes on production too.
• On refreshing the page, while entering otp even if the resend option is still showing the timeline, it resets itself from the start and sends the otp to the email.
  Can anybody help me with this issue?

Screenshots:

• Two time api call for email verification of clicking on continue
  
• Two OTPs are received while signin each time
  

Environment

System:
 OS: Windows 11 10.0.22631
 CPU: (12) x64 AMD Ryzen 5 5600H with Radeon Graphics
 Memory: 886.65 MB / 7.35 GB
 Binaries:
 Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
 Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
 npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
 pnpm: 9.7.0 - ~\AppData\Roaming\npm\pnpm.CMD
 Browsers:
 Edge: Chromium (127.0.2651.74)
 Internet Explorer: 11.0.22621.3527
 npmPackages:
 @clerk/nextjs: ^5.7.2 => 5.7.2
 @types/node: ^20 => 20.16.11
 @types/react: ^18 => 18.3.11
 @types/react-dom: ^18 => 18.3.1
 eslint: ^8 => 8.57.1
 eslint-config-next: 14.2.15 => 14.2.15
 next: 14.2.15 => 14.2.15
 postcss: ^8 => 8.4.47
 react: ^18 => 18.3.1
 react-dom: ^18 => 18.3.1
 tailwindcss: ^3.4.1 => 3.4.13
 typescript: ^5 => 5.6.3

[maximilianotaverna]

Hi same with my project
Using the Clerk SignIn and tried with and without wrapping with ClerProvider too.
import { SignIn, ClerkProvider } from "@clerk/nextjs";

[defudef]

I found a fix for this. In your <SignIn.Root /> component add routing property with a value virtual. After this change it will send an email code once. I'm not sure why it works.

Example usage:

<SignIn.Root path="/auth" routing="virtual">
 //...children here
</SignIn.Root>

[alexcarpenter]

This should be resolved in #5095

[devansh101005]

<SignIn.Root path="/auth" routing="virtual">
//...children here
</SignIn.Root>

After doing this the sign up component disappears I also tried to set routing property to hash but that too didn't work

[devansh101005]

Still experiencing this on @clerk/clerk-react with routing="path". Two different OTP codes sent simultaneously on sign-up. The suggested fix (routing="virtual" or routing="hash") breaks the form rendering — the sign-up/sign-in UI doesn't display at all. Tested in production (Vercel + Vite + React 18). Clerk version: @clerk/clerk-react ^5.20.0.

[antoinebrtd]

Still experiencing this as well @alexcarpenter @LauraBeatris, our clients are receiving two codes after signing in

[ben-ftl]

I am getting two codes as well - but only on my Staging environment. In the development environment I get one code.