fix(ui): hide unavailable alternative verification methods

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {

.changeset/tidy-device-trust-methods.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Hide the “Use another method” action during Device Trust and second-factor verification when no alternative verification method is available.

integration/tests/client-trust.test.ts

@@ -38,6 +38,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withNeedsClientTrust] })(
 
  // Should contain the new device verification notice
  await expect(u.page.getByText("You're signing in from a new device.")).toBeVisible();
+ await expect(u.page.getByRole('link', { name: 'Use another method' })).toBeHidden();
 
  // User should not be signed in yet since client trust step is required
  await u.po.expect.toBeSignedOut();

packages/ui/src/components/SignIn/SignInClientTrust.tsx

@@ -19,6 +19,8 @@ function SignInClientTrustInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  if (!currentFactor) {
  return <LoadingCard />;
@@ -41,7 +43,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_code':
@@ -51,7 +53,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -61,7 +63,7 @@ function SignInClientTrustInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwo.tsx

@@ -28,6 +28,8 @@ function SignInFactorTwoInternal(): JSX.Element {
  showAllStrategies,
  toggleAllStrategies,
  } = useSecondFactorSelection(signIn.supportedSecondFactors);
+ const onShowAlternativeMethodsClicked =
+ signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined;
 
  React.useEffect(() => {
  if (clerk.__internal_setActiveInProgress) {
@@ -69,7 +71,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'totp':
@@ -78,18 +80,18 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'backup_code':
- return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+ return <SignInFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} />;
  case 'email_code':
  return (
  <SignInFactorTwoEmailCodeCard
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  case 'email_link':
@@ -98,7 +100,7 @@ function SignInFactorTwoInternal(): JSX.Element {
  factorAlreadyPrepared={factorAlreadyPrepared}
  onFactorPrepare={handleFactorPrepare}
  factor={currentFactor}
- onShowAlternativeMethodsClicked={toggleAllStrategies}
+ onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked}
  />
  );
  default:

packages/ui/src/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

@@ -19,7 +19,7 @@ import { navigateOnSignInProtectGate } from './handleProtectCheck';
 import { isResetPasswordStrategy } from './utils';
 
 type SignInFactorTwoBackupCodeCardProps = {
- onShowAlternativeMethodsClicked: React.MouseEventHandler;
+ onShowAlternativeMethodsClicked?: React.MouseEventHandler;
 };
 
 export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCardProps) => {

packages/ui/src/components/SignIn/__tests__/SignInClientTrust.test.tsx

@@ -0,0 +1,35 @@
+import type { SignInResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInClientTrust } from '../SignInClientTrust';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInClientTrust', () => {
+ describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInClientTrust({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInClientTrust />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+ });
+});

packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx

@@ -407,6 +407,28 @@ describe('SignInFactorTwo', () => {
  });
 
  describe('Use another method', () => {
+ it('does not render when only one verification factor is available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.queryByText('Use another method')).not.toBeInTheDocument();
+ });
+
+ it('renders when multiple verification factors are available', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.startSignInFactorTwo({ supportPhoneCode: true, supportEmailCode: true });
+ });
+
+ fixtures.signIn.prepareSecondFactor.mockResolvedValueOnce({} as SignInResource);
+ render(<SignInFactorTwo />, { wrapper });
+
+ expect(screen.getByText('Use another method')).toBeInTheDocument();
+ });
+
  it('renders the other authentication methods list component when clicking on "Use another method"', async () => {
  const { wrapper, fixtures } = await createFixtures(f => {
  f.withEmailAddress();

packages/ui/src/test/fixture-helpers.ts

@@ -119,6 +119,7 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  type SignInFactorTwoParams = {
  identifier?: string;
  supportPhoneCode?: boolean;
+ supportEmailCode?: boolean;
  supportTotp?: boolean;
  supportBackupCode?: boolean;
  supportResetPasswordEmail?: boolean;
@@ -185,17 +186,21 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- const startSignInFactorTwo = (params?: SignInFactorTwoParams) => {
+ const startSignInVerification = (
+ status: Extract<SignInJSON['status'], 'needs_client_trust' | 'needs_second_factor'>,
+ params?: SignInFactorTwoParams,
+ ) => {
  const {
  identifier = '+30 691 1111111',
  supportPhoneCode = true,
+ supportEmailCode,
  supportTotp,
  supportBackupCode,
  supportResetPasswordEmail,
  supportResetPasswordPhone,
  } = params || {};
  baseClient.sign_in = {
- status: 'needs_second_factor',
+ status,
  identifier,
  ...(supportResetPasswordEmail
  ? {
@@ -216,13 +221,20 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  supported_identifiers: ['email_address', 'phone_number'],
  supported_second_factors: [
  ...(supportPhoneCode ? [{ strategy: 'phone_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
+ ...(supportEmailCode ? [{ strategy: 'email_code', safe_identifier: 'n*****@clerk.com' }] : []),
  ...(supportTotp ? [{ strategy: 'totp', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ...(supportBackupCode ? [{ strategy: 'backup_code', safe_identifier: identifier || 'n*****@clerk.com' }] : []),
  ],
  user_data: { ...(createUserFixture() as any) },
  } as SignInJSON;
  };
 
+ const startSignInFactorTwo = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_second_factor', params);
+
+ const startSignInClientTrust = (params?: SignInFactorTwoParams) =>
+ startSignInVerification('needs_client_trust', params);
+
  const startSignInWithProtectCheck = (params?: {
  expiresAt?: number;
  uiHints?: Record<string, string>;
@@ -249,7 +261,13 @@ const createSignInFixtureHelpers = (baseClient: ClientJSON) => {
  } as SignInJSON;
  };
 
- return { startSignInWithEmailAddress, startSignInWithPhoneNumber, startSignInFactorTwo, startSignInWithProtectCheck };
+ return {
+ startSignInWithEmailAddress,
+ startSignInWithPhoneNumber,
+ startSignInFactorTwo,
+ startSignInClientTrust,
+ startSignInWithProtectCheck,
+ };
 };
 
 const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {