fix(clerk-js): Remove duplicate prepare first factor calls

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});

.changeset/real-bees-post.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Reworked the cache key creation logic in SignInFactorOneCodeForm.tsx not to rely on sign_in.id, which can change after host app re-renders

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "608.92kB" },
+ { "path": "./dist/clerk.js", "maxSize": "610kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "70.16KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "53.06KB" },

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx

@@ -1,6 +1,7 @@
 import { isUserLockedError } from '@clerk/shared/error';
 import { useClerk } from '@clerk/shared/react';
 import type { EmailCodeFactor, PhoneCodeFactor, ResetPasswordCodeFactor } from '@clerk/types';
+import { useMemo } from 'react';
 
 import { useCardState } from '@/ui/elements/contexts';
 import type { VerificationCodeCardProps } from '@/ui/elements/VerificationCodeCard';
@@ -41,6 +42,31 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
 
  const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
 
+ const cacheKey = useMemo(() => {
+ const factor = props.factor;
+ let factorKey = factor.strategy;
+
+ if ('emailAddressId' in factor) {
+ factorKey += `_${factor.emailAddressId}`;
+ }
+ if ('phoneNumberId' in factor) {
+ factorKey += `_${factor.phoneNumberId}`;
+ }
+ if ('channel' in factor && factor.channel) {
+ factorKey += `_${factor.channel}`;
+ }
+
+ return {
+ name: 'signIn.prepareFirstFactor',
+ factorKey,
+ };
+ }, [
+ props.factor.strategy,
+ 'emailAddressId' in props.factor ? props.factor.emailAddressId : undefined,
+ 'phoneNumberId' in props.factor ? props.factor.phoneNumberId : undefined,
+ 'channel' in props.factor ? props.factor.channel : undefined,
+ ]);
+
  const goBack = () => {
  return navigate('../');
  };
@@ -64,11 +90,7 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
  ?.prepareFirstFactor(props.factor)
  .then(() => props.onFactorPrepare())
  .catch(err => handleError(err, [], card.setError)),
- {
- name: 'signIn.prepareFirstFactor',
- factor: props.factor,
- id: signIn.id,
- },
+ cacheKey,
  {
  staleTime: 100,
  },

packages/clerk-js/src/ui/components/SignIn/__tests__/SignInFactorOneCodeForm.spec.tsx

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { render } from '../../../../vitestUtils';
+import { CardStateProvider } from '../../../elements/contexts';
+import { clearFetchCache, useFetch } from '../../../hooks';
+import { localizationKeys } from '../../../localization';
+import { bindCreateFixtures } from '../../../utils/vitest/createFixtures';
+import { SignInFactorOneCodeForm } from '../SignInFactorOneCodeForm';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+vi.mock('../../../hooks', async () => {
+ const actual = await vi.importActual('../../../hooks');
+ return {
+ ...actual,
+ useFetch: vi.fn(),
+ };
+});
+
+describe('SignInFactorOneCodeForm', () => {
+ beforeEach(() => {
+ clearFetchCache();
+ vi.mocked(useFetch).mockClear();
+ });
+
+ const renderWithProviders = (component: React.ReactElement, options?: any) => {
+ return render(<CardStateProvider>{component}</CardStateProvider>, options);
+ };
+
+ const defaultProps = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ describe('Cache Key Generation', () => {
+ it('generates cache key without signIn.id to prevent extra API calls', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('includes channel in cache key for phone code with WhatsApp', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const phonePropsWithChannel = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ channel: 'whatsapp' as const,
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...phonePropsWithChannel} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function),
+ {
+ name: 'signIn.prepareFirstFactor',
+ factorKey: 'phone_code_idn_123_whatsapp',
+ },
+ {
+ staleTime: 100,
+ },
+ );
+ });
+
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const props = {
+ factor: {
+ strategy: 'phone_code' as const,
+ phoneNumberId: 'idn_123',
+ safeIdentifier: '+1234567890',
+ },
+ factorAlreadyPrepared: true,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.phoneCode.title'),
+ cardSubtitle: localizationKeys('signIn.phoneCode.subtitle'),
+ inputLabel: localizationKeys('signIn.phoneCode.formTitle'),
+ resendButton: localizationKeys('signIn.phoneCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...props} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(expect.any(Function), expect.any(Object), expect.any(Object));
+ });
+ });
+
+ describe('shouldAvoidPrepare Logic', () => {
+ it('still calls prepare when factor is already prepared but verification not verified', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: true,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should still be a function because shouldAvoidPrepare requires BOTH conditions
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+
+ it('allows prepare when factor is not already prepared', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ const propsWithFactorNotPrepared = {
+ ...defaultProps,
+ factorAlreadyPrepared: false,
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...propsWithFactorNotPrepared} />, { wrapper });
+
+ expect(vi.mocked(useFetch)).toHaveBeenCalledWith(
+ expect.any(Function), // fetcher should be a function when prepare is allowed
+ expect.any(Object),
+ expect.any(Object),
+ );
+ });
+ });
+
+ describe('Component Rendering', () => {
+ it('renders phone code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withPhoneNumber();
+ f.startSignInWithPhoneNumber({ supportPhoneCode: true });
+ });
+
+ renderWithProviders(<SignInFactorOneCodeForm {...defaultProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+
+ it('renders email code verification form', async () => {
+ const { wrapper } = await createFixtures(f => {
+ f.withEmailAddress();
+ f.startSignInWithEmailAddress({ supportEmailCode: true });
+ });
+
+ const emailProps = {
+ factor: {
+ strategy: 'email_code' as const,
+ emailAddressId: 'idn_456',
+ safeIdentifier: 'test@example.com',
+ },
+ factorAlreadyPrepared: false,
+ onFactorPrepare: vi.fn(),
+ cardTitle: localizationKeys('signIn.emailCode.title'),
+ cardSubtitle: localizationKeys('signIn.emailCode.subtitle'),
+ inputLabel: localizationKeys('signIn.emailCode.formTitle'),
+ resendButton: localizationKeys('signIn.emailCode.resendButton'),
+ };
+
+ renderWithProviders(<SignInFactorOneCodeForm {...emailProps} />, { wrapper });
+
+ expect(document.querySelector('input[type="text"]')).toBeInTheDocument();
+ });
+ });
+});