feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(clerk-js,ui): Introduce setup MFA session task - #7626

Merged
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task
Feb 3, 2026
Merged

feat(clerk-js,ui): Introduce setup MFA session task#7626
octoper merged 3 commits into
mainfrom
octoper/setup-mfa-task

Conversation

@octoper

@octoperoctoper commented Jan 20, 2026

Copy link
Copy Markdown
Contributor

Description

This PR introduces the the screens and functionality for the new setup-mfa session task
If an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.

Sign up

CleanShot.2026-02-02.at.20.01.53.mp4

Sign in

CleanShot.2026-02-02.at.20.04.53.mp4

With other tasks

CleanShot.2026-02-02.at.20.06.27.mp4

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

  • New Features
    • Introduced a "setup_mfa" session task and a TaskSetupMFA UI flow (SMS and authenticator/TOTP) with phone registration, selection, verification, and backup codes; new sandbox route to preview it.
  • Tests
    • Added end-to-end integration tests covering MFA setup happy paths, errors, navigation and back/cancel flows.
  • Documentation
    • Expanded localization strings across many locales for the MFA setup flows and related alerts.

@changeset-bot

changeset-botBot commented Jan 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ec92505

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

This PR includes changesets to release 20 packages
NameType
@clerk/tanstack-react-startMinor
@clerk/localizationsMinor
@clerk/react-routerMinor
@clerk/clerk-jsMinor
@clerk/nextjsMinor
@clerk/sharedMinor
@clerk/reactMinor
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nuxtPatch
@clerk/testingPatch
@clerk/vuePatch

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

@vercel

vercelBot commented Jan 20, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 3, 2026 0:48am

Request Review

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260121104441
@clerk/astro3.0.0-snapshot.v20260121104441
@clerk/backend3.0.0-snapshot.v20260121104441
@clerk/chrome-extension3.0.0-snapshot.v20260121104441
@clerk/clerk-js6.0.0-snapshot.v20260121104441
@clerk/dev-cli1.0.0-snapshot.v20260121104441
@clerk/expo3.0.0-snapshot.v20260121104441
@clerk/expo-passkeys1.0.0-snapshot.v20260121104441
@clerk/express2.0.0-snapshot.v20260121104441
@clerk/fastify2.6.9-snapshot.v20260121104441
@clerk/localizations4.0.0-snapshot.v20260121104441
@clerk/msw0.0.1-snapshot.v20260121104441
@clerk/nextjs7.0.0-snapshot.v20260121104441
@clerk/nuxt2.0.0-snapshot.v20260121104441
@clerk/react6.0.0-snapshot.v20260121104441
@clerk/react-router3.0.0-snapshot.v20260121104441
@clerk/shared4.0.0-snapshot.v20260121104441
@clerk/tanstack-react-start1.0.0-snapshot.v20260121104441
@clerk/testing2.0.0-snapshot.v20260121104441
@clerk/ui1.0.0-snapshot.v20260121104441
@clerk/upgrade2.0.0-snapshot.v20260121104441
@clerk/vue2.0.0-snapshot.v20260121104441

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact

@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from 4fc95f2 to 61862a2CompareJanuary 22, 2026 11:04
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260122110524
@clerk/astro3.0.0-snapshot.v20260122110524
@clerk/backend3.0.0-snapshot.v20260122110524
@clerk/chrome-extension3.0.0-snapshot.v20260122110524
@clerk/clerk-js6.0.0-snapshot.v20260122110524
@clerk/dev-cli1.0.0-snapshot.v20260122110524
@clerk/expo3.0.0-snapshot.v20260122110524
@clerk/expo-passkeys1.0.0-snapshot.v20260122110524
@clerk/express2.0.0-snapshot.v20260122110524
@clerk/fastify2.6.9-snapshot.v20260122110524
@clerk/localizations4.0.0-snapshot.v20260122110524
@clerk/msw0.0.1-snapshot.v20260122110524
@clerk/nextjs7.0.0-snapshot.v20260122110524
@clerk/nuxt2.0.0-snapshot.v20260122110524
@clerk/react6.0.0-snapshot.v20260122110524
@clerk/react-router3.0.0-snapshot.v20260122110524
@clerk/shared4.0.0-snapshot.v20260122110524
@clerk/tanstack-react-start1.0.0-snapshot.v20260122110524
@clerk/testing2.0.0-snapshot.v20260122110524
@clerk/ui1.0.0-snapshot.v20260122110524
@clerk/upgrade2.0.0-snapshot.v20260122110524
@clerk/vue2.0.0-snapshot.v20260122110524

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260129231425
@clerk/astro3.0.0-snapshot.v20260129231425
@clerk/backend3.0.0-snapshot.v20260129231425
@clerk/chrome-extension3.0.0-snapshot.v20260129231425
@clerk/clerk-js6.0.0-snapshot.v20260129231425
@clerk/dev-cli1.0.0-snapshot.v20260129231425
@clerk/expo3.0.0-snapshot.v20260129231425
@clerk/expo-passkeys1.0.0-snapshot.v20260129231425
@clerk/express2.0.0-snapshot.v20260129231425
@clerk/fastify2.7.0-snapshot.v20260129231425
@clerk/localizations4.0.0-snapshot.v20260129231425
@clerk/msw0.0.1-snapshot.v20260129231425
@clerk/nextjs7.0.0-snapshot.v20260129231425
@clerk/nuxt2.0.0-snapshot.v20260129231425
@clerk/react6.0.0-snapshot.v20260129231425
@clerk/react-router3.0.0-snapshot.v20260129231425
@clerk/shared4.0.0-snapshot.v20260129231425
@clerk/tanstack-react-start1.0.0-snapshot.v20260129231425
@clerk/testing2.0.0-snapshot.v20260129231425
@clerk/ui1.0.0-snapshot.v20260129231425
@clerk/upgrade2.0.0-snapshot.v20260129231425
@clerk/vue2.0.0-snapshot.v20260129231425

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260129231425 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260129231425 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260129231425 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260129231425 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260129231425 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260129231425 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260129231425 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260129231425 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260129231425 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260129231425 --save-exact

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)

72-74: Missing dependency array entries in useEffect.

The effect references prepare which is defined inline and not memoized. While this works for the initial mount pattern, adding prepare or using useCallback would align with React best practices and avoid stale closure issues if the component re-renders.

packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)

271-271: Minor: Comment says "Step 3" but index is 2.

The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/contexts/components/SessionTasks.ts
@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260130165100
@clerk/astro3.0.0-snapshot.v20260130165100
@clerk/backend3.0.0-snapshot.v20260130165100
@clerk/chrome-extension3.0.0-snapshot.v20260130165100
@clerk/clerk-js6.0.0-snapshot.v20260130165100
@clerk/dev-cli1.0.0-snapshot.v20260130165100
@clerk/expo3.0.0-snapshot.v20260130165100
@clerk/expo-passkeys1.0.0-snapshot.v20260130165100
@clerk/express2.0.0-snapshot.v20260130165100
@clerk/fastify2.7.0-snapshot.v20260130165100
@clerk/localizations4.0.0-snapshot.v20260130165100
@clerk/msw0.0.1-snapshot.v20260130165100
@clerk/nextjs7.0.0-snapshot.v20260130165100
@clerk/nuxt2.0.0-snapshot.v20260130165100
@clerk/react6.0.0-snapshot.v20260130165100
@clerk/react-router3.0.0-snapshot.v20260130165100
@clerk/shared4.0.0-snapshot.v20260130165100
@clerk/tanstack-react-start1.0.0-snapshot.v20260130165100
@clerk/testing2.0.0-snapshot.v20260130165100
@clerk/ui1.0.0-snapshot.v20260130165100
@clerk/upgrade2.0.0-snapshot.v20260130165100
@clerk/vue2.0.0-snapshot.v20260130165100

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact

@octoper

Copy link
Copy Markdown
ContributorAuthor

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @octoper - the snapshot version command generated the following package versions:

PackageVersion
@clerk/agent-toolkit0.2.9-snapshot.v20260202085507
@clerk/astro3.0.0-snapshot.v20260202085507
@clerk/backend3.0.0-snapshot.v20260202085507
@clerk/chrome-extension3.0.0-snapshot.v20260202085507
@clerk/clerk-js6.0.0-snapshot.v20260202085507
@clerk/dev-cli1.0.0-snapshot.v20260202085507
@clerk/expo3.0.0-snapshot.v20260202085507
@clerk/expo-passkeys1.0.0-snapshot.v20260202085507
@clerk/express2.0.0-snapshot.v20260202085507
@clerk/fastify2.7.0-snapshot.v20260202085507
@clerk/localizations4.0.0-snapshot.v20260202085507
@clerk/msw0.0.1-snapshot.v20260202085507
@clerk/nextjs7.0.0-snapshot.v20260202085507
@clerk/nuxt2.0.0-snapshot.v20260202085507
@clerk/react6.0.0-snapshot.v20260202085507
@clerk/react-router3.0.0-snapshot.v20260202085507
@clerk/shared4.0.0-snapshot.v20260202085507
@clerk/tanstack-react-start1.0.0-snapshot.v20260202085507
@clerk/testing2.0.0-snapshot.v20260202085507
@clerk/ui1.0.0-snapshot.v20260202085507
@clerk/upgrade2.0.0-snapshot.v20260202085507
@clerk/vue2.0.0-snapshot.v20260202085507

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact

@clerk/astro

npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/backend

npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/dev-cli

npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo

npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/express

npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact

@clerk/localizations

npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/msw

npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/react

npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact

@clerk/react-router

npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact

@clerk/shared

npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact

@clerk/tanstack-react-start

npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/testing

npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/ui

npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact

@clerk/upgrade

npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact

@clerk/vue

npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact

@octoperoctoper removed the blocked label Feb 2, 2026

@nikosdouvlisnikosdouvlis left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just a few questions

Comment threadpackages/ui/src/components/SessionTasks/index.tsx Outdated
Comment threadpackages/ui/src/utils/mfa.ts Outdated
@octoper
octoperforce-pushed the octoper/setup-mfa-task branch from f6c23c4 to 433ff6cCompareFebruary 3, 2026 12:10

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)

869-872: Minor voseo inconsistency: "Únete" → "Unite"

The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."

Suggested fix
 organizationAlreadyExists:
- 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.',+ 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',

Comment threadpackages/localizations/src/nl-BE.ts
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@octoper@clerk-cookie@nikosdouvlis@wobsoriano