chore(ui): Add wizard steps to <ConfigureSSO />

[LauraBeatris]

Description

• Introduces Wizard component with support for root and inner steps
• Introduce basic boilerplate of modules per step
• Add different Flow.Part per step type
• Handles initial loading UI state when querying enterprise connections

To be handled in next PRs:

• Whether a step is considered "complete" (green mark)

CleanShot.2026-05-05.at.00.18.48.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:

[changeset-bot]

🦋 Changeset detected

Latest commit: a7f1340

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

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

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 5, 2026 11:11pm

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx`:
- Line 1: The import line in ConfigureSSO.tsx duplicates useUser, causing an
import/no-duplicates lint error; edit the import statement `import {
__internal_useUserEnterpriseConnections, useOrganization, useUser, useUser }
from '@clerk/shared/react';` to remove the second `useUser` so each symbol is
only listed once (keep `__internal_useUserEnterpriseConnections`,
`useOrganization`, and `useUser`).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 57d13034-c273-46f4-8e70-b521d99cd2d8

📥 Commits

Reviewing files that changed from the base of the PR and between 798ee78 and c0e5daf.

📒 Files selected for processing (2)

• packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
• packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx`:
- Around line 180-181: The isFirstStep and isLastStep flags in
ConfigureSSOWizard.tsx are incorrectly computed to force nested wizards to never
be absolute-first/last by ANDing with !parentWizard; update the logic so
isFirstStep becomes (index <= 0) and isLastStep becomes (index ===
activeSteps.length - 1) regardless of parentWizard, while preserving any
existing local/relative navigation behavior elsewhere; adjust any places that
relied on the old flags (e.g., footer/navigation render) to respect the absolute
boundary flags so Previous/Next become no-op-disabled at true first/last
positions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 4d798647-9ece-48ff-86be-e806b52877e1

📥 Commits

Reviewing files that changed from the base of the PR and between c0e5daf and aa04cf0.

📒 Files selected for processing (4)

• packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
• packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx
• packages/ui/src/components/ConfigureSSO/steps/index.ts
• packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx

[LauraBeatris]

Added this one that got missed on the first PR

[iagodahlem]

The declarative shape is great 👏 — I think we still need some improvements to better structure it and separate the wizard responsibilities into more layers, so we can easily extract those components for reuse later, but I think it's good enough as it is for now and we can follow up. Just two small alignment items I'd flag for this PR before the bigger refactor lands as a follow-up:

1. Flow.Part part= naming convention.
2. isLoading flowing through ConfigureSSOFlowContext.

[iagodahlem]

Suggested change

{/* TODO: Implement configure steps */}

[iagodahlem]

I think passing the initial isLoading down to the context and rendering it on the wizard might lead us to issues when invalidating the query, and also for instance, when we start determining the current step after a refresh I think it would be good to have the loading before the wizard even renders, so what do you think of lifting the initial loading state here to ConfigureSSO root? Something like:

const AuthenticatedContent = withCoreUserGuard(() => {
  const { data, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
  
  if (isLoading && !data) {
    return <FullSpinner />;
  }
  
  return (
    // …existing layout…
    <ConfigureSSOFlowProvider enterpriseConnection={data?.[0]}>
      <ConfigureSSOSteps />
    </ConfigureSSOFlowProvider>
  );
});

Happy to take this as a separate PR if you'd rather keep this one tight.

[iagodahlem]

I think the convention for Flow.Part part= is camelCase across Sign-In / Sign-Up / SessionTasks / UserVerification (phoneCode2Fa, alternativeMethods, enterpriseConnections, chooseOrganization, etc.). The four other ConfigureSSO steps already follow that — only test-sso here and sso-confirmation in ConfirmationStep are kebab-case.