feat(ui): Hide "Remove" action for last second factor strategy when required

[octoper]

Description

This PR hides the "Remove" action from the last 2nd factor authentication strategy in <UserProfile/> security page, when multi-factor requirement is enabled.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Bug Fixes

  • Hide the delete action for the last available second-factor when MFA is required, preventing users from removing their only active MFA method.

• New Behavior

  • Signup configuration now includes an optional MFA-required flag, which influences MFA UI visibility.

• Tests

  • Added tests covering MFA deletion visibility across multiple MFA configurations.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 2, 2026 5:49pm

[changeset-bot]

🦋 Changeset detected

Latest commit: f01aa62

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/shared	Minor
@clerk/ui	Minor
@clerk/chrome-extension	Patch
@clerk/expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/msw	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/react	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7729

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7729

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7729

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7729

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7729

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7729

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7729

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7729

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7729

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7729

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7729

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7729

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7729

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7729

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7729

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7729

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7729

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7729

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7729

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7729

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7729

commit: f01aa62

[coderabbitai]

📝 Walkthrough

Walkthrough

This change introduces MFA requirement configuration and updates UI logic to conditionally hide delete actions for multi-factor authentication strategies. A new mfa field with a required boolean flag is added to SignUpData type and UserSettings defaults. The MfaSection component is refactored to evaluate MFA requirements and compute visibility flags for delete actions on TOTP and phone code factors. The MfaPhoneCodeMenu component signature is updated to accept isDefault and hidePhoneCodeDeleteAction props. Tests and fixture helpers are added to validate the delete action hiding behavior under various MFA configurations.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main feature: hiding the Remove action for the last second factor when MFA is required.
Linked Issues check	✅ Passed	Changes implement USER-4387 requirements: hide Remove action for last second factor when MFA is required through signUp-based gating logic.
Out of Scope Changes check	✅ Passed	All changes are scoped to USER-4387 requirements: MFA visibility logic, test fixtures, and test cases validating delete action behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/ui/src/components/UserProfile/__tests__/MfaPage.test.tsx`:
- Around line 506-538: The test "shows phone code delete action when TOTP is
also available" is missing the MFA-required fixture; update the createFixtures
callback to call f.withMfaRequired(true) alongside the existing
f.withPhoneNumber, f.withAuthenticatorApp, and f.withUser calls so the test runs
in the MFA-required scenario and properly asserts the delete action visibility
for phone codes when TOTP is enabled.

In `@packages/ui/src/components/UserProfile/MfaSection.tsx`:
- Around line 188-191: Remove the debug console.log statements that print
actions, hidePhoneCodeDeleteAction, and isDefault in the MfaSection component;
locate the logs in packages/ui/src/components/UserProfile/MfaSection.tsx (inside
the MfaSection function/render logic where those variables are referenced) and
delete the three console.log lines so no debug output is emitted in production.