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