`signIn.prepareFirstFactor` sending two emails with different codes

[sgrund14]

• Review the documentation: https://docs.clerk.dev/
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• gatsby-plugin-clerk
• build/tooling/chore
• other:

Version:

clerk/clerk-js @ 4.27.2

Browser/OS

If applicable e.g. Chrome latest

Description

I'm trying to write a custom email_code flow like so

 const { signIn } = useSignIn();
const onEmailSubmit = useCallback(async () => {
    try {
        const signInObj = await signIn?.create({
            identifier: email,
            strategy: 'email_code',
        });
        const firstFactorObj = signInObj?.supportedFirstFactors?.find?.(
            (factor) => factor.strategy === 'email_code'
        ) as EmailCodeFactor;
        await signIn?.prepareFirstFactor({
            strategy: 'email_code',
            emailAddressId: firstFactorObj.emailAddressId || '',
        });
        console.log('email send');
        setShowTokenInput(true);
    } catch (e) {
        setHasEmailError(true);
    }
}, [email, signIn]);

And it's sending two emails instead of one. The first email has an invalid code, and the second email has a code that works. I checked to make sure that the function was only running once ("email send" only logs once), upon submitting an email address. Thus, it shouldn't be sending two emails.

Am I doing something wrong here?

[gkats]

Hi @sgrund14, the signIn.create() method will also prepare a verification under the hood when called with a strategy such as "email_code".

That's why you get two codes. The first one comes from signIn.create() and becomes invalid as soon as the second one is generated.

When you call signIn.create() with a "phone_code", "email_code" or "email_link" strategy you don't need to also prepare the verification afterwards.

At the moment, if you really want to control the verification preparation you can omit the strategy parameter from signIn.create(), with code similar to this:

await signIn.create({ identifier: email });
await signIn.prepareFirstFactor({
  strategy: "email_code",
  emailAddressId,
});

[sgrund14]

aha, thanks @gkats!