Incorrect redirection and duplicate OTP emails

[ikram-shah]

Issue I've integrated vue-clerk into my Vue 3 project to enable email login with OTP. However, when attempting to log in using the email for OTP, the redirection to the "/sign-in/factor-one" page is not being recognized within my Vue router config. As a result, the page goes blank, and the intended component is not displayed.

Solution Attempted I attempted to address the problem by creating children routes, namely "factor-one","factor-two" and "verify" under the "/sign-in" route. While this resolved the issue of displaying the component that handles OTP entry and allows user access to the application, it introduced a new problem. The OTP email is being sent twice, with the first redirection triggering one and the subsequent component load triggering another.

I would like to know if anyone else has encountered a similar issue and if there are any known solutions or workarounds.

References: https://clerk.com/blog/remix-delightful-developer-experiences https://clerk.com/docs/custom-flows/overview

[wobsoriano]

Hi, with Clerk Core 2 integrated with the latest vue-clerk versions, are you still able to replicate the issue?

[griffin-ezbot]

Hi, I'm facing this issue with vue-clerk at 0.3.7 and 0.3.8, and

I tested it with a peer dependency of @clerk/clerk-js 5.2.3 and 5.5.3, in case that matters.

Repro Steps:

1. Sign Up for a Clerk User Account (dev or prod Clerk)
2. Verify Email pops up immediately, then the whole page appears to reload.
3. Two code verification emails are sent

Video

SignUp Component

<template>
   <div id="sign-up-container">
      <SignUp
         path="/sign-up"
         force-redirect-url="/onboarding/create-org"
         routing="path"
      />
   </div>
</template>

<script lang="ts" setup>
import { SignUp } from "vue-clerk"
</script>

<style lang="scss" scoped>
#sign-up-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f5f5f5;
}
</style>

Routes

   {
      path: "/sign-up",
      name: "SignUp",
      component: SignUp,
      meta: {
         layout: "AppLayoutDefault",
      },
   },
   {
      path: "/sign-up/verify-email-address",
      name: "VerifyEmailAddress",
      component: SignUp,
      meta: {
         layout: "AppLayoutDefault",
      },
   },

[griffin-ezbot]

I was able to fix the issue with vue-clerk 0.3.8, @clerk/clerk-js 5.5.3 I think by removing the path prop.

SignUp Component

<template>
   <div id="sign-up-container">
      <SignUp force-redirect-url="/onboarding/create-org" />
   </div>
</template>

<script lang="ts" setup>
import { SignUp } from "vue-clerk"
</script>

<style lang="scss" scoped>
#sign-up-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f5f5f5;
}
</style>

No more duplicate OTP emails, no more full page re-render :)

[wobsoriano]

Thanks for the update! I have an incoming PR that will remove the @clerk/clerk-js dependency and lower the bundle size :)

[wobsoriano]

Hey, I'm closing this for now. Please use the latest version and check if the error still persists. If it does, feel free to reopen it!