fix(ui): self-serve SSO follow-ups (a11y + UX)

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');

.changeset/tame-dogs-allow.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.

packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx

@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
  const steps = React.useMemo<WizardStepConfig[]>(
  () => [
- { id: 'verify-domain', label: 'Domains' },
- // `select-provider` now lives inside `configure` as its first sub-step, so
- // reaching `configure` only requires verified domains (fresh start) or an
- // existing connection (resume / change-provider).
- { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
- { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
- { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+ { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+ {
+ id: 'configure',
+ label: 'Connection',
+ isReachable: () => allDomainsVerified || c.hasConnection,
+ isComplete: () => c.hasMinimumConfiguration || c.isActive,
+ },
+ {
+ id: 'test',
+ label: 'Test',
+ isReachable: () => c.hasMinimumConfiguration || c.isActive,
+ isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+ },
+ {
+ id: 'activate',
+ label: 'Activate',
+ isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+ isComplete: () => c.isActive,
+ },
  ],
  [c, allDomainsVerified],
  );

packages/ui/src/components/ConfigureSSO/__tests__/ConfigureSSO.navigation.test.tsx

@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
  expect(getByText('Test')).toBeInTheDocument();
  expect(getByText('Activate')).toBeInTheDocument();
  });
+
+ // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+ // shows every stepper step ticked even after navigating BACK to an earlier step.
+ // A completed bullet renders a checkmark regardless of whether it is also the
+ // current step — so for a fully active connection all four bullets show checkmarks
+ // and zero show a digit. Under the old positional logic the steps AFTER current
+ // would lose their tick and show their numbers again, so this asserts the fix directly.
+ it('re-entering an active connection keeps every step completed after navigating back', async () => {
+ const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+ fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+ { ...configuredConnection, id: 'ent_active', active: true } as any,
+ ]);
+ fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+ data: [],
+ total_count: 0,
+ } as any);
+ mockVerifiedDomains(fixtures);
+
+ const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+ // Mounts on the activate step (active connection short-circuits to it).
+ await findByText(/sso connection is active/i);
+
+ const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+ const bulletDigitCount = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+ /\d/.test(el.textContent ?? ''),
+ ).length;
+ const stepperLabels = () =>
+ Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+ const stepperButton = (label: string) =>
+ Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+ btn => btn.textContent?.trim() === label,
+ )!;
+
+ // The breadcrumb carries all four labels.
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+ // On the terminal step all four steps are complete, so all four bullets show
+ // checkmarks — including the current 'Activate' step — and zero show a digit.
+ expect(bulletDigitCount()).toBe(0);
+
+ // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+ // holds for an active connection, so 'Domains' is reachable.
+ await userEvent.click(stepperButton('Domains'));
+
+ // Positional completion would now un-tick Connection/Test/Activate (they sit
+ // AFTER current) and show their numbers. Guard-driven completion keeps them
+ // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+ // zero bullets show a digit.
+ expect(bulletDigitCount()).toBe(0);
+ expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+ });
 });

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
  width: theme.sizes.$4,
  height: theme.sizes.$4,
  borderRadius: theme.radii.$circle,
- backgroundColor: isCurrent
- ? theme.colors.$colorForeground
- : isCompleted
- ? theme.colors.$success500
+ backgroundColor: isCompleted
+ ? theme.colors.$success500
+ : isCurrent
+ ? theme.colors.$colorForeground
  : theme.colors.$colorMutedForeground,
  })}
  >
- {isCompleted && !isCurrent ? (
+ {isCompleted ? (
  <Icon
  icon={Checkmark}
  size='sm'

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
  /** The step graph (see the component doc below). The array IS the graph. */
  steps: WizardStepConfig[];
- /** Mount here instead of the guard-derived initial step (nested resume). */
+ /** Mount here instead of the reachability-derived initial step (nested resume). */
  initialStepId?: string;
  children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
  const parentWizard = React.useContext(WizardContext);

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/Wizard.test.tsx

@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
  it('renders only the active step body and advances on goNext', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
  render(
  <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
- const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+ const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
  // Single inner step => inner is immediately terminal; its goNext bubbles.
  const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
  });
 
  it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
- const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+ const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
  render(
  <Wizard

packages/ui/src/components/ConfigureSSO/elements/Wizard/__tests__/reducer.test.ts

@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- * a — entry (no guard, always enterable)
- * b — guard: g1
- * c — guard: g2
- * d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ * a — entry (no isReachable, always enterable)
+ * b — isReachable: g1
+ * c — isReachable: g2
+ * d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
  { id: 'a' },
- { id: 'b', guard: () => g1 },
- { id: 'c', guard: () => g2 },
- { id: 'd', guard: () => g3 },
+ { id: 'b', isReachable: () => g1 },
+ { id: 'c', isReachable: () => g2 },
+ { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
- it('resolves TRUE when no guard (entry step default flip)', () => {
- expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+ it('resolves TRUE when no isReachable (entry step default)', () => {
+ expect(isStepReachable({ id: 'a' })).toBe(true);
  });
 
  it('delegates to the inline predicate', () => {
- expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
- expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+ expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+ expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
  });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
- it('all guards false but entry → step 0', () => {
+ it('all isReachable false but entry → step 0', () => {
  expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
  });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
  expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
  });
 
- it('stops at the first gate (does not jump a closed guard)', () => {
+ it('stops at the first gate (does not jump a closed isReachable)', () => {
  // b open, c closed, d open: contiguous run stops at b.
  expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
  });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('NEXT blocked by next guard → same ref', () => {
+ it('NEXT blocked by next isReachable → same ref', () => {
  const s = at('a');
- // b's guard is false → cannot advance.
+ // b's isReachable is false → cannot advance.
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
  });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('PREV blocked by predecessor guard → same ref', () => {
- // Non-monotonic on purpose: at c, b's guard is false.
+ it('PREV blocked by predecessor isReachable → same ref', () => {
+ // Non-monotonic on purpose: at c, b's isReachable is false.
  const steps: WizardStepDescriptor[] = [
  { id: 'a' },
- { id: 'b', guard: () => false },
- { id: 'c', guard: () => true },
+ { id: 'b', isReachable: () => false },
+ { id: 'c', isReachable: () => true },
  ];
  const s = at('c');
  expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
  expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
  });
 
- it('GOTO blocked by target guard → same ref', () => {
+ it('GOTO blocked by target isReachable → same ref', () => {
  const s = at('a');
- // d's guard is false → cannot jump.
+ // d's isReachable is false → cannot jump.
  expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
  });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
  });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
- it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+ it('advances exactly one slot when the next isReachable holds', () => {
  const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
  expect(next.current).toBe('b');
  expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
  expect(next.current).toBe('b');
  });
 
- it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+ it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
  // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
  const s = at('b');
  expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
  });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
  it('walks exactly one declaration slot back', () => {
  const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
  expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
  });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
  it('jumps to a reachable target', () => {
  const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
  expect(goto.current).toBe('c');