@clerk/ui 1.11.1-snapshot.v20260516134813 → 1.12.0

package/dist/ClerkUI.js

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.11.1-snapshot.v20260516134813";
-	version = "1.11.1-snapshot.v20260516134813";
+	static version = "1.12.0";
+	version = "1.12.0";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/components/ConfigureSSO/ConfigureSSO.js

@@ -5,12 +5,13 @@ import { Switch } from "../../router/Switch.js";
 import exclamation_triangle_default from "../../icons/exclamation-triangle.js";
 import { useProtect } from "../../common/Gate.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
-import { withCardStateProvider } from "../../elements/contexts/index.js";
+import { useCardState, withCardStateProvider } from "../../elements/contexts/index.js";
 import { Flow } from "../../customizables/Flow.js";
 import { Col, Flex, Heading, Icon, Text } from "../../customizables/index.js";
 import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { ConfigureSSOProvider, useConfigureSSO } from "./ConfigureSSOContext.js";
 import { ProfileCardFooter, ProfileCardHeader } from "./elements/ProfileCard.js";
+import { useWizard } from "./elements/Wizard/WizardContext.js";
 import { Wizard } from "./elements/Wizard/Wizard.js";
 import { ConfigureSSOHeader } from "./ConfigureSSOHeader.js";
 import { ConfigureSSONavbar } from "./ConfigureSSONavbar.js";
@@ -22,7 +23,7 @@ import { SelectProviderStep } from "./steps/SelectProviderStep.js";
 import { TestConfigurationStep } from "./steps/TestConfigurationStep.js";
 import { VerifyDomainStep } from "./steps/VerifyDomainStep.js";
 import React from "react";
-import { __internal_useUserEnterpriseConnections, useSession } from "@clerk/shared/react";
+import { __internal_useEnterpriseConnectionTestRuns, __internal_useUserEnterpriseConnections, useSession } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/ConfigureSSO/ConfigureSSO.tsx
@@ -63,12 +64,17 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 	});
 });
 const ConfigureSSOCardContent = ({ contentRef }) => {
-	const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
+	const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections, createEnterpriseConnection, updateEnterpriseConnection, deleteEnterpriseConnection } = __internal_useUserEnterpriseConnections({ enabled: true });
 	const enterpriseConnection = enterpriseConnections?.[0];
-	if (isLoading && !enterpriseConnection) return /* @__PURE__ */ jsx(ConfigureSSOSkeleton, {});
+	const { hasSuccessfulTestRun, isLoading: isLoadingTestRuns } = useHasSuccessfulTestRun(enterpriseConnection);
+	if (isLoadingEnterpriseConnections || isLoadingTestRuns) return /* @__PURE__ */ jsx(ConfigureSSOSkeleton, {});
 	return /* @__PURE__ */ jsx(ConfigureSSOProvider, {
+		hasSuccessfulTestRun,
 		enterpriseConnection,
 		contentRef,
+		createEnterpriseConnection,
+		updateEnterpriseConnection,
+		deleteEnterpriseConnection,
 		children: /* @__PURE__ */ jsx(ConfigureSSOSteps, {})
 	});
 };
@@ -77,6 +83,7 @@ const ConfigureSSOSteps = () => {
 	return /* @__PURE__ */ jsxs(Wizard, {
 		initialStepId,
 		children: [
+			/* @__PURE__ */ jsx(ResetCardErrorOnStepChange, {}),
 			/* @__PURE__ */ jsx(ConfigureSSOHeader, {}),
 			/* @__PURE__ */ jsx(Wizard.Step, {
 				id: "select-provider",
@@ -161,6 +168,40 @@ const MissingManageEnterpriseConnectionsPermission = () => /* @__PURE__ */ jsxs(
 	}) }),
 	/* @__PURE__ */ jsx(ProfileCardFooter, {})
 ] });
+/**
+* Sentinel component rendered inside `<Wizard>`
+*
+* Clears any card-level error whenever the active step transitions, so a stale failure from one step
+* doesn't leak into the next
+*/
+const ResetCardErrorOnStepChange = () => {
+	const { currentStep } = useWizard();
+	const card = useCardState();
+	const previousStepIdRef = React.useRef(currentStep?.id);
+	React.useEffect(() => {
+		if (previousStepIdRef.current === currentStep?.id) return;
+		previousStepIdRef.current = currentStep?.id;
+		card.setError(void 0);
+	}, [currentStep?.id, card]);
+	return null;
+};
+/**
+* Fetches a single successful test run for the given connection on mount
+*/
+const useHasSuccessfulTestRun = (enterpriseConnection) => {
+	const { data: successfulTestRuns, isLoading } = __internal_useEnterpriseConnectionTestRuns({
+		enterpriseConnectionId: enterpriseConnection?.id ?? null,
+		params: {
+			initialPage: 1,
+			pageSize: 1,
+			status: ["success"]
+		}
+	});
+	return {
+		hasSuccessfulTestRun: (successfulTestRuns?.length ?? 0) > 0,
+		isLoading
+	};
+};
 const ConfigureSSO = withCardStateProvider(ConfigureSSOInternal);
 
 //#endregion

package/dist/components/ConfigureSSO/ConfigureSSO.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureSSO.js","names":["ExclamationTriangle","ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps>"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSO.tsx"],"sourcesContent":["import { __internal_useUserEnterpriseConnections, useSession } from '@clerk/shared/react';\nimport type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useProtect } from '@/common';\nimport { withCoreUserGuard } from '@/contexts';\nimport { Col, descriptors, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';\nimport { withCardStateProvider } from '@/elements/contexts';\nimport { ProfileCard } from '@/elements/ProfileCard';\nimport { ExclamationTriangle } from '@/icons';\nimport { Route, Switch } from '@/router';\n\nimport { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext';\nimport { ConfigureSSOHeader } from './ConfigureSSOHeader';\nimport { ConfigureSSONavbar } from './ConfigureSSONavbar';\nimport { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';\nimport { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard';\nimport { Step } from './elements/Step';\nimport { Wizard } from './elements/Wizard';\nimport { ConfigureStep, ConfirmationStep, SelectProviderStep, TestConfigurationStep, VerifyDomainStep } from './steps';\n\nconst ConfigureSSOInternal = () => {\n  return (\n    <Flow.Root flow='configureSSO'>\n      <Switch>\n        <Route>\n          <AuthenticatedContent />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedContent = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <ProfileCard.Root\n      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}\n    >\n      <ConfigureSSONavbar contentRef={contentRef}>\n        <Col\n          ref={contentRef}\n          elementDescriptor={descriptors.scrollBox}\n          sx={t => ({\n            backgroundColor: t.colors.$colorBackground,\n            position: 'relative',\n            borderRadius: t.radii.$lg,\n            width: '100%',\n            overflow: 'hidden',\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            flex: 1,\n          })}\n        >\n          <ConfigureSSOCardProtect>\n            <ConfigureSSOCardContent contentRef={contentRef} />\n          </ConfigureSSOCardProtect>\n        </Col>\n      </ConfigureSSONavbar>\n    </ProfileCard.Root>\n  );\n});\n\nconst ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {\n  const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });\n\n  // Currently FAPI only supports one enterprise connection per user\n  const enterpriseConnection = enterpriseConnections?.[0];\n\n  if (isLoading && !enterpriseConnection) {\n    return <ConfigureSSOSkeleton />;\n  }\n\n  return (\n    <ConfigureSSOProvider\n      enterpriseConnection={enterpriseConnection}\n      contentRef={contentRef}\n    >\n      <ConfigureSSOSteps />\n    </ConfigureSSOProvider>\n  );\n};\n\nconst ConfigureSSOSteps = () => {\n  const { initialStepId } = useConfigureSSO();\n\n  return (\n    <Wizard initialStepId={initialStepId}>\n      <ConfigureSSOHeader />\n\n      <Wizard.Step id='select-provider'>\n        <SelectProviderStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='verify-domain'\n        label='Verify domain'\n      >\n        <VerifyDomainStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='configure'\n        label='Configure'\n      >\n        <ConfigureStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='test'\n        label='Test'\n      >\n        <TestConfigurationStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='confirmation'\n        label='Confirmation'\n      >\n        <ConfirmationStep />\n      </Wizard.Step>\n    </Wizard>\n  );\n};\n\nconst ConfigureSSOCardProtect = ({ children }: { children: React.ReactNode }) => {\n  const { session } = useSession();\n  const isPersonalWorkspace = !session?.lastActiveOrganizationId;\n  const canManageEnterpriseConnections = useProtect(\n    has => isPersonalWorkspace || has({ permission: 'org:sys_enterprise_connections:manage' }),\n  );\n\n  if (!canManageEnterpriseConnections) {\n    return <MissingManageEnterpriseConnectionsPermission />;\n  }\n\n  return children;\n};\n\nconst MissingManageEnterpriseConnectionsPermission = () => (\n  <>\n    <ProfileCardHeader />\n\n    <Step.Body>\n      <Step.Section\n        sx={{ flex: 1 }}\n        align='center'\n        justify='center'\n      >\n        <Flex\n          align='center'\n          justify='center'\n          sx={t => ({ flex: 1, padding: t.space.$8 })}\n        >\n          <Col\n            align='center'\n            sx={t => ({ gap: t.space.$2, textAlign: 'center', maxWidth: t.sizes.$94 })}\n          >\n            <Icon\n              icon={ExclamationTriangle}\n              sx={t => ({ width: t.sizes.$8, height: t.sizes.$8, color: t.colors.$neutralAlpha600 })}\n            />\n            <Heading\n              localizationKey={localizationKeys('configureSSO.missingManageEnterpriseConnectionsPermission.title')}\n              textVariant='h1'\n              sx={t => ({ fontSize: t.fontSizes.$lg, textWrap: 'balance' })}\n            />\n            <Text\n              as='p'\n              variant='body'\n              colorScheme='secondary'\n              localizationKey={localizationKeys('configureSSO.missingManageEnterpriseConnectionsPermission.subtitle')}\n              sx={{ textWrap: 'balance' }}\n            />\n          </Col>\n        </Flex>\n      </Step.Section>\n    </Step.Body>\n\n    <ProfileCardFooter />\n  </>\n);\n\nexport const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =\n  withCardStateProvider(ConfigureSSOInternal);\n"],"mappings":"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"}
+{"version":3,"file":"ConfigureSSO.js","names":["ExclamationTriangle","ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps>"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSO.tsx"],"sourcesContent":["import {\n  __internal_useEnterpriseConnectionTestRuns,\n  __internal_useUserEnterpriseConnections,\n  useSession,\n} from '@clerk/shared/react';\nimport type { __experimental_ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useProtect } from '@/common';\nimport { withCoreUserGuard } from '@/contexts';\nimport { Col, descriptors, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';\nimport { useCardState, withCardStateProvider } from '@/elements/contexts';\nimport { ProfileCard } from '@/elements/ProfileCard';\nimport { ExclamationTriangle } from '@/icons';\nimport { Route, Switch } from '@/router';\n\nimport { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext';\nimport { ConfigureSSOHeader } from './ConfigureSSOHeader';\nimport { ConfigureSSONavbar } from './ConfigureSSONavbar';\nimport { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';\nimport { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard';\nimport { Step } from './elements/Step';\nimport { useWizard, Wizard } from './elements/Wizard';\nimport { ConfigureStep, ConfirmationStep, SelectProviderStep, TestConfigurationStep, VerifyDomainStep } from './steps';\n\nconst ConfigureSSOInternal = () => {\n  return (\n    <Flow.Root flow='configureSSO'>\n      <Switch>\n        <Route>\n          <AuthenticatedContent />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedContent = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <ProfileCard.Root\n      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}\n    >\n      <ConfigureSSONavbar contentRef={contentRef}>\n        <Col\n          ref={contentRef}\n          elementDescriptor={descriptors.scrollBox}\n          sx={t => ({\n            backgroundColor: t.colors.$colorBackground,\n            position: 'relative',\n            borderRadius: t.radii.$lg,\n            width: '100%',\n            overflow: 'hidden',\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            flex: 1,\n          })}\n        >\n          <ConfigureSSOCardProtect>\n            <ConfigureSSOCardContent contentRef={contentRef} />\n          </ConfigureSSOCardProtect>\n        </Col>\n      </ConfigureSSONavbar>\n    </ProfileCard.Root>\n  );\n});\n\nconst ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {\n  const {\n    data: enterpriseConnections,\n    isLoading: isLoadingEnterpriseConnections,\n    createEnterpriseConnection,\n    updateEnterpriseConnection,\n    deleteEnterpriseConnection,\n  } = __internal_useUserEnterpriseConnections({ enabled: true });\n  // Currently FAPI only supports one enterprise connection per user\n  const enterpriseConnection = enterpriseConnections?.[0];\n\n  const { hasSuccessfulTestRun, isLoading: isLoadingTestRuns } = useHasSuccessfulTestRun(enterpriseConnection);\n\n  const isLoading = isLoadingEnterpriseConnections || isLoadingTestRuns;\n  if (isLoading) {\n    return <ConfigureSSOSkeleton />;\n  }\n\n  return (\n    <ConfigureSSOProvider\n      hasSuccessfulTestRun={hasSuccessfulTestRun}\n      enterpriseConnection={enterpriseConnection}\n      contentRef={contentRef}\n      createEnterpriseConnection={createEnterpriseConnection}\n      updateEnterpriseConnection={updateEnterpriseConnection}\n      deleteEnterpriseConnection={deleteEnterpriseConnection}\n    >\n      <ConfigureSSOSteps />\n    </ConfigureSSOProvider>\n  );\n};\n\nconst ConfigureSSOSteps = () => {\n  const { initialStepId } = useConfigureSSO();\n\n  return (\n    <Wizard initialStepId={initialStepId}>\n      <ResetCardErrorOnStepChange />\n      <ConfigureSSOHeader />\n\n      <Wizard.Step id='select-provider'>\n        <SelectProviderStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='verify-domain'\n        label='Verify domain'\n      >\n        <VerifyDomainStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='configure'\n        label='Configure'\n      >\n        <ConfigureStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='test'\n        label='Test'\n      >\n        <TestConfigurationStep />\n      </Wizard.Step>\n\n      <Wizard.Step\n        id='confirmation'\n        label='Confirmation'\n      >\n        <ConfirmationStep />\n      </Wizard.Step>\n    </Wizard>\n  );\n};\n\nconst ConfigureSSOCardProtect = ({ children }: { children: React.ReactNode }) => {\n  const { session } = useSession();\n  const isPersonalWorkspace = !session?.lastActiveOrganizationId;\n  const canManageEnterpriseConnections = useProtect(\n    has => isPersonalWorkspace || has({ permission: 'org:sys_enterprise_connections:manage' }),\n  );\n\n  if (!canManageEnterpriseConnections) {\n    return <MissingManageEnterpriseConnectionsPermission />;\n  }\n\n  return children;\n};\n\nconst MissingManageEnterpriseConnectionsPermission = () => (\n  <>\n    <ProfileCardHeader />\n\n    <Step.Body>\n      <Step.Section\n        sx={{ flex: 1 }}\n        align='center'\n        justify='center'\n      >\n        <Flex\n          align='center'\n          justify='center'\n          sx={t => ({ flex: 1, padding: t.space.$8 })}\n        >\n          <Col\n            align='center'\n            sx={t => ({ gap: t.space.$2, textAlign: 'center', maxWidth: t.sizes.$94 })}\n          >\n            <Icon\n              icon={ExclamationTriangle}\n              sx={t => ({ width: t.sizes.$8, height: t.sizes.$8, color: t.colors.$neutralAlpha600 })}\n            />\n            <Heading\n              localizationKey={localizationKeys('configureSSO.missingManageEnterpriseConnectionsPermission.title')}\n              textVariant='h1'\n              sx={t => ({ fontSize: t.fontSizes.$lg, textWrap: 'balance' })}\n            />\n            <Text\n              as='p'\n              variant='body'\n              colorScheme='secondary'\n              localizationKey={localizationKeys('configureSSO.missingManageEnterpriseConnectionsPermission.subtitle')}\n              sx={{ textWrap: 'balance' }}\n            />\n          </Col>\n        </Flex>\n      </Step.Section>\n    </Step.Body>\n\n    <ProfileCardFooter />\n  </>\n);\n\n/**\n * Sentinel component rendered inside `<Wizard>`\n *\n * Clears any card-level error whenever the active step transitions, so a stale failure from one step\n * doesn't leak into the next\n */\nconst ResetCardErrorOnStepChange = (): null => {\n  const { currentStep } = useWizard();\n  const card = useCardState();\n  const previousStepIdRef = React.useRef(currentStep?.id);\n\n  React.useEffect(() => {\n    if (previousStepIdRef.current === currentStep?.id) {\n      return;\n    }\n\n    previousStepIdRef.current = currentStep?.id;\n    card.setError(undefined);\n  }, [currentStep?.id, card]);\n\n  return null;\n};\n\n/**\n * Fetches a single successful test run for the given connection on mount\n */\nconst useHasSuccessfulTestRun = (\n  enterpriseConnection: EnterpriseConnectionResource | undefined,\n): { hasSuccessfulTestRun: boolean; isLoading: boolean } => {\n  const { data: successfulTestRuns, isLoading } = __internal_useEnterpriseConnectionTestRuns({\n    enterpriseConnectionId: enterpriseConnection?.id ?? null,\n    params: { initialPage: 1, pageSize: 1, status: ['success'] },\n  });\n\n  return {\n    hasSuccessfulTestRun: (successfulTestRuns?.length ?? 0) > 0,\n    isLoading,\n  };\n};\n\nexport const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =\n  withCardStateProvider(ConfigureSSOInternal);\n"],"mappings":"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"}

package/dist/components/ConfigureSSO/ConfigureSSOContext.js

@@ -1,24 +1,60 @@
+import { useCardState } from "../../elements/contexts/index.js";
 import { deriveInitialStep } from "./deriveInitialStep.js";
-import React from "react";
+import React, { useCallback } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useSession, useUser } from "@clerk/shared/react/index";
 
 //#region src/components/ConfigureSSO/ConfigureSSOContext.tsx
 const ConfigureSSOContext = React.createContext(null);
 ConfigureSSOContext.displayName = "ConfigureSSOContext";
-const ConfigureSSOProvider = ({ enterpriseConnection, contentRef, children }) => {
+const ConfigureSSOProvider = ({ enterpriseConnection, hasSuccessfulTestRun, contentRef, createEnterpriseConnection: createEnterpriseConnectionApi, updateEnterpriseConnection, deleteEnterpriseConnection, children }) => {
 	const [provider, setProvider] = React.useState(enterpriseConnection?.provider);
-	const initialStepId = deriveInitialStep(enterpriseConnection);
+	const { session } = useSession();
+	const { user } = useUser();
+	const card = useCardState();
+	const isDomainTakenByOtherOrg = checkDomainTakenByOtherOrg(user, session, enterpriseConnection);
+	const initialStepId = deriveInitialStep(enterpriseConnection, {
+		isDomainTakenByOtherOrg,
+		hasSuccessfulTestRun
+	});
+	const createEnterpriseConnection = useCallback(async (provider$1, primaryEmailAddress) => {
+		const emailDomain = primaryEmailAddress?.emailAddress.split("@")[1];
+		const organizationId = session?.lastActiveOrganizationId ?? null;
+		if (!emailDomain) return;
+		card.setLoading();
+		try {
+			await createEnterpriseConnectionApi({
+				provider: provider$1,
+				name: emailDomain,
+				organizationId
+			});
+		} finally {
+			card.setIdle();
+		}
+	}, [
+		card,
+		session,
+		createEnterpriseConnectionApi
+	]);
 	const value = React.useMemo(() => ({
-		initialStepId,
-		enterpriseConnection,
 		provider,
+		contentRef,
 		setProvider,
-		contentRef
-	}), [
 		initialStepId,
 		enterpriseConnection,
+		isDomainTakenByOtherOrg,
+		createEnterpriseConnection,
+		updateEnterpriseConnection,
+		deleteEnterpriseConnection
+	}), [
 		provider,
-		contentRef
+		contentRef,
+		initialStepId,
+		enterpriseConnection,
+		createEnterpriseConnection,
+		updateEnterpriseConnection,
+		deleteEnterpriseConnection,
+		isDomainTakenByOtherOrg
 	]);
 	return /* @__PURE__ */ jsx(ConfigureSSOContext.Provider, {
 		value,
@@ -30,6 +66,15 @@ const useConfigureSSO = () => {
 	if (!ctx) throw new Error("useConfigureSSO called outside <ConfigureSSOProvider>.");
 	return ctx;
 };
+/**
+* Determines if the user's domain is already wired to an enterprise connection that
+* doesn't belong to the org they're currently configuring
+*/
+const checkDomainTakenByOtherOrg = (user, session, enterpriseConnection) => {
+	const isVerified = (user?.primaryEmailAddress ?? user?.emailAddresses?.find((e) => e.verification.status !== "verified"))?.verification.status === "verified";
+	const activeOrganizationId = session?.lastActiveOrganizationId ?? null;
+	return Boolean(isVerified && enterpriseConnection && enterpriseConnection.organizationId !== activeOrganizationId);
+};
 
 //#endregion
 export { ConfigureSSOProvider, useConfigureSSO };

package/dist/components/ConfigureSSO/ConfigureSSOContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureSSOContext.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOContext.tsx"],"sourcesContent":["import type { EnterpriseConnectionResource } from '@clerk/shared/types';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { deriveInitialStep } from './deriveInitialStep';\nimport type { ProviderType, WizardStepId } from './types';\n\n/**\n * Shared form state for the ConfigureSSO wizard, persisted across steps\n */\nexport interface ConfigureSSOData {\n  initialStepId: WizardStepId;\n  /**\n   * The enterprise connection from the user's primary email address domain\n   */\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n  /**\n   * The provider selected for this configuration. Reads from the existing\n   * enterprise connection when present, falling back to the local selection\n   * made on the Select Provider step.\n   */\n  provider: ProviderType | undefined;\n  /**\n   * Sets the local provider selection used by Select Provider before a\n   * connection has been created.\n   */\n  setProvider: (provider: ProviderType) => void;\n  /**\n   * Ref to the scrollable content container of the wizard.\n   */\n  contentRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface ConfigureSSOProviderProps {\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n  contentRef: React.RefObject<HTMLDivElement>;\n}\n\nconst ConfigureSSOContext = React.createContext<ConfigureSSOData | null>(null);\nConfigureSSOContext.displayName = 'ConfigureSSOContext';\n\nexport const ConfigureSSOProvider = ({\n  enterpriseConnection,\n  contentRef,\n  children,\n}: PropsWithChildren<ConfigureSSOProviderProps>): JSX.Element => {\n  const [provider, setProvider] = React.useState<ProviderType | undefined>(\n    enterpriseConnection?.provider as ProviderType,\n  );\n\n  const initialStepId = deriveInitialStep(enterpriseConnection);\n\n  const value = React.useMemo<ConfigureSSOData>(\n    () => ({\n      initialStepId,\n      enterpriseConnection,\n      provider,\n      setProvider,\n      contentRef,\n    }),\n    [initialStepId, enterpriseConnection, provider, contentRef],\n  );\n\n  return <ConfigureSSOContext.Provider value={value}>{children}</ConfigureSSOContext.Provider>;\n};\n\nexport const useConfigureSSO = (): ConfigureSSOData => {\n  const ctx = React.useContext(ConfigureSSOContext);\n  if (!ctx) {\n    throw new Error('useConfigureSSO called outside <ConfigureSSOProvider>.');\n  }\n  return ctx;\n};\n"],"mappings":";;;;;AAqCA,MAAM,sBAAsB,MAAM,cAAuC,KAAK;AAC9E,oBAAoB,cAAc;AAElC,MAAa,wBAAwB,EACnC,sBACA,YACA,eAC+D;CAC/D,MAAM,CAAC,UAAU,eAAe,MAAM,SACpC,sBAAsB,SACvB;CAED,MAAM,gBAAgB,kBAAkB,qBAAqB;CAE7D,MAAM,QAAQ,MAAM,eACX;EACL;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAe;EAAsB;EAAU;EAAW,CAC5D;AAED,QAAO,oBAAC,oBAAoB;EAAgB;EAAQ;GAAwC;;AAG9F,MAAa,wBAA0C;CACrD,MAAM,MAAM,MAAM,WAAW,oBAAoB;AACjD,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,yDAAyD;AAE3E,QAAO"}
+{"version":3,"file":"ConfigureSSOContext.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOContext.tsx"],"sourcesContent":["import type { UseUserEnterpriseConnectionsReturn } from '@clerk/shared/react/index';\nimport { useSession, useUser } from '@clerk/shared/react/index';\nimport type {\n  EmailAddressResource,\n  EnterpriseConnectionResource,\n  SignedInSessionResource,\n  UserResource,\n} from '@clerk/shared/types';\nimport React, { type PropsWithChildren, useCallback } from 'react';\n\nimport { useCardState } from '@/elements/contexts';\n\nimport { deriveInitialStep } from './deriveInitialStep';\nimport type { ProviderType, WizardStepId } from './types';\n\n/**\n * Shared form state for the ConfigureSSO wizard, persisted across steps\n */\nexport interface ConfigureSSOData {\n  initialStepId: WizardStepId;\n  /**\n   * The enterprise connection from the user's primary email address domain\n   */\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n  /**\n   * The provider selected for this configuration. Reads from the existing\n   * enterprise connection when present, falling back to the local selection\n   * made on the Select Provider step.\n   */\n  provider: ProviderType | undefined;\n  /**\n   * Sets the local provider selection used by Select Provider before a\n   * connection has been created.\n   */\n  setProvider: (provider: ProviderType) => void;\n  /**\n   * Ref to the scrollable content container of the wizard.\n   */\n  contentRef: React.RefObject<HTMLDivElement>;\n  /**\n   * Creates a new enterprise connection\n   */\n  createEnterpriseConnection: (provider: ProviderType, primaryEmailAddress?: EmailAddressResource) => Promise<void>;\n  /**\n   * Updates an existing enterprise connection\n   */\n  updateEnterpriseConnection: UseUserEnterpriseConnectionsReturn['updateEnterpriseConnection'];\n  /**\n   * Deletes an enterprise connection\n   */\n  deleteEnterpriseConnection: UseUserEnterpriseConnectionsReturn['deleteEnterpriseConnection'];\n  /**\n   * Determines if the user's domain is already wired to an enterprise connection that\n   * doesn't belong to the org they're currently configuring\n   */\n  isDomainTakenByOtherOrg: boolean;\n}\n\ninterface ConfigureSSOProviderProps {\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n  hasSuccessfulTestRun: boolean;\n  contentRef: React.RefObject<HTMLDivElement>;\n  createEnterpriseConnection: UseUserEnterpriseConnectionsReturn['createEnterpriseConnection'];\n  updateEnterpriseConnection: UseUserEnterpriseConnectionsReturn['updateEnterpriseConnection'];\n  deleteEnterpriseConnection: UseUserEnterpriseConnectionsReturn['deleteEnterpriseConnection'];\n}\n\nconst ConfigureSSOContext = React.createContext<ConfigureSSOData | null>(null);\nConfigureSSOContext.displayName = 'ConfigureSSOContext';\n\nexport const ConfigureSSOProvider = ({\n  enterpriseConnection,\n  hasSuccessfulTestRun,\n  contentRef,\n  createEnterpriseConnection: createEnterpriseConnectionApi,\n  updateEnterpriseConnection,\n  deleteEnterpriseConnection,\n  children,\n}: PropsWithChildren<ConfigureSSOProviderProps>): JSX.Element => {\n  const [provider, setProvider] = React.useState<ProviderType | undefined>(\n    enterpriseConnection?.provider as ProviderType,\n  );\n  const { session } = useSession();\n  const { user } = useUser();\n  const card = useCardState();\n\n  const isDomainTakenByOtherOrg = checkDomainTakenByOtherOrg(user, session, enterpriseConnection);\n  const initialStepId = deriveInitialStep(enterpriseConnection, { isDomainTakenByOtherOrg, hasSuccessfulTestRun });\n\n  const createEnterpriseConnection = useCallback(\n    async (provider: ProviderType, primaryEmailAddress?: EmailAddressResource): Promise<void> => {\n      const emailDomain = primaryEmailAddress?.emailAddress.split('@')[1];\n      const organizationId = session?.lastActiveOrganizationId ?? null;\n\n      if (!emailDomain) {\n        return;\n      }\n\n      card.setLoading();\n\n      try {\n        await createEnterpriseConnectionApi({\n          provider,\n          name: emailDomain,\n          organizationId,\n        });\n      } finally {\n        card.setIdle();\n      }\n    },\n    [card, session, createEnterpriseConnectionApi],\n  );\n\n  const value = React.useMemo<ConfigureSSOData>(\n    () => ({\n      provider,\n      contentRef,\n      setProvider,\n      initialStepId,\n      enterpriseConnection,\n      isDomainTakenByOtherOrg,\n      createEnterpriseConnection,\n      updateEnterpriseConnection,\n      deleteEnterpriseConnection,\n    }),\n    [\n      provider,\n      contentRef,\n      initialStepId,\n      enterpriseConnection,\n      createEnterpriseConnection,\n      updateEnterpriseConnection,\n      deleteEnterpriseConnection,\n      isDomainTakenByOtherOrg,\n    ],\n  );\n\n  return <ConfigureSSOContext.Provider value={value}>{children}</ConfigureSSOContext.Provider>;\n};\n\nexport const useConfigureSSO = (): ConfigureSSOData => {\n  const ctx = React.useContext(ConfigureSSOContext);\n  if (!ctx) {\n    throw new Error('useConfigureSSO called outside <ConfigureSSOProvider>.');\n  }\n  return ctx;\n};\n\n/**\n * Determines if the user's domain is already wired to an enterprise connection that\n * doesn't belong to the org they're currently configuring\n */\nconst checkDomainTakenByOtherOrg = (\n  user: UserResource | null | undefined,\n  session: SignedInSessionResource | null | undefined,\n  enterpriseConnection: EnterpriseConnectionResource | undefined,\n): boolean => {\n  const emailToVerify =\n    user?.primaryEmailAddress ?? user?.emailAddresses?.find(e => e.verification.status !== 'verified');\n  const isVerified = emailToVerify?.verification.status === 'verified';\n  const activeOrganizationId = session?.lastActiveOrganizationId ?? null;\n\n  return Boolean(isVerified && enterpriseConnection && enterpriseConnection.organizationId !== activeOrganizationId);\n};\n"],"mappings":";;;;;;;AAmEA,MAAM,sBAAsB,MAAM,cAAuC,KAAK;AAC9E,oBAAoB,cAAc;AAElC,MAAa,wBAAwB,EACnC,sBACA,sBACA,YACA,4BAA4B,+BAC5B,4BACA,4BACA,eAC+D;CAC/D,MAAM,CAAC,UAAU,eAAe,MAAM,SACpC,sBAAsB,SACvB;CACD,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,OAAO,cAAc;CAE3B,MAAM,0BAA0B,2BAA2B,MAAM,SAAS,qBAAqB;CAC/F,MAAM,gBAAgB,kBAAkB,sBAAsB;EAAE;EAAyB;EAAsB,CAAC;CAEhH,MAAM,6BAA6B,YACjC,OAAO,YAAwB,wBAA8D;EAC3F,MAAM,cAAc,qBAAqB,aAAa,MAAM,IAAI,CAAC;EACjE,MAAM,iBAAiB,SAAS,4BAA4B;AAE5D,MAAI,CAAC,YACH;AAGF,OAAK,YAAY;AAEjB,MAAI;AACF,SAAM,8BAA8B;IAClC;IACA,MAAM;IACN;IACD,CAAC;YACM;AACR,QAAK,SAAS;;IAGlB;EAAC;EAAM;EAAS;EAA8B,CAC/C;CAED,MAAM,QAAQ,MAAM,eACX;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QAAO,oBAAC,oBAAoB;EAAgB;EAAQ;GAAwC;;AAG9F,MAAa,wBAA0C;CACrD,MAAM,MAAM,MAAM,WAAW,oBAAoB;AACjD,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,yDAAyD;AAE3E,QAAO;;;;;;AAOT,MAAM,8BACJ,MACA,SACA,yBACY;CAGZ,MAAM,cADJ,MAAM,uBAAuB,MAAM,gBAAgB,MAAK,MAAK,EAAE,aAAa,WAAW,WAAW,GAClE,aAAa,WAAW;CAC1D,MAAM,uBAAuB,SAAS,4BAA4B;AAElE,QAAO,QAAQ,cAAc,wBAAwB,qBAAqB,mBAAmB,qBAAqB"}

package/dist/components/ConfigureSSO/ConfigureSSONavbar.js

@@ -58,6 +58,10 @@ const ConfigureSSONavbar = ({ children, contentRef }) => {
 				})]
 			}),
 			titleSx: (t) => ({ fontSize: t.fontSizes.$lg }),
+			containerSx: {
+				flexDirection: "column-reverse",
+				flex: 0
+			},
 			title: localizationKeys("configureSSO.navbar.title"),
 			routes: [],
 			contentRef

package/dist/components/ConfigureSSO/ConfigureSSONavbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureSSONavbar.js","names":["BoxIcon"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSONavbar.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react/index';\nimport React from 'react';\n\nimport { useEnvironment } from '@/contexts';\nimport { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';\nimport { ApplicationLogo } from '@/elements/ApplicationLogo';\nimport { NavBar, NavbarContextProvider } from '@/elements/Navbar';\nimport { BoxIcon } from '@/icons';\n\ntype ConfigureSSONavbarProps = React.PropsWithChildren<{\n  contentRef: React.RefObject<HTMLDivElement>;\n}>;\n\nexport const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarProps) => {\n  const { parsedOptions } = useAppearance();\n  const {\n    organizationSettings,\n    displayConfig: { applicationName, logoImageUrl },\n  } = useEnvironment();\n\n  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);\n\n  return (\n    <NavbarContextProvider contentRef={contentRef}>\n      <NavBar\n        header={\n          <Flex\n            align='center'\n            sx={t => ({\n              gap: t.space.$2,\n              padding: `${t.space.$none} ${t.space.$3}`,\n              maxWidth: '100%',\n            })}\n          >\n            {hasLogo ? (\n              <ApplicationLogo\n                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}\n              />\n            ) : (\n              <Box\n                sx={t => ({\n                  width: t.space.$9,\n                  height: t.space.$9,\n                  flexShrink: 0,\n                  borderRadius: t.radii.$md,\n                  backgroundColor: t.colors.$primary500,\n                  color: t.colors.$colorPrimaryForeground,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                })}\n                aria-hidden\n              >\n                <Icon\n                  icon={BoxIcon}\n                  sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}\n                />\n              </Box>\n            )}\n\n            <Col sx={{ minWidth: 0 }}>\n              <Text\n                as='p'\n                truncate\n              >\n                {applicationName}\n              </Text>\n              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}\n            </Col>\n          </Flex>\n        }\n        titleSx={t => ({ fontSize: t.fontSizes.$lg })}\n        title={localizationKeys('configureSSO.navbar.title')}\n        routes={[]}\n        contentRef={contentRef}\n      />\n      {children}\n    </NavbarContextProvider>\n  );\n};\n\nconst OrganizationSidebarSubtitle = (): JSX.Element | null => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Text\n      as='span'\n      truncate\n      sx={t => ({ color: t.colors.$colorMutedForeground })}\n    >\n      {organization?.name}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,sBAAsB,EAAE,UAAU,iBAA0C;CACvF,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,EACJ,sBACA,eAAe,EAAE,iBAAiB,mBAChC,gBAAgB;AAIpB,QACE,qBAAC;EAAkC;aACjC,oBAAC;GACC,QACE,qBAAC;IACC,OAAM;IACN,KAAI,OAAM;KACR,KAAK,EAAE,MAAM;KACb,SAAS,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM;KACrC,UAAU;KACX;eAZK,QAAQ,cAAc,gBAAgB,aAAa,GAevD,oBAAC,mBACC,KAAI,OAAM;KAAE,OAAO,EAAE,MAAM;KAAI,QAAQ,EAAE,MAAM;KAAI,cAAc,EAAE,MAAM;KAAK,UAAU;KAAU,IAClG,GAEF,oBAAC;KACC,KAAI,OAAM;MACR,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,MAAM;MAChB,YAAY;MACZ,cAAc,EAAE,MAAM;MACtB,iBAAiB,EAAE,OAAO;MAC1B,OAAO,EAAE,OAAO;MAChB,SAAS;MACT,YAAY;MACZ,gBAAgB;MACjB;KACD;eAEA,oBAAC;MACC,MAAMA;MACN,KAAI,OAAM;OAAE,OAAO,EAAE,MAAM;OAAI,QAAQ,EAAE,MAAM;OAAI;OACnD;MACE,EAGR,qBAAC;KAAI,IAAI,EAAE,UAAU,GAAG;gBACtB,oBAAC;MACC,IAAG;MACH;gBAEC;OACI,EACN,qBAAqB,WAAW,oBAAC,gCAA8B;MAC5D;KACD;GAET,UAAS,OAAM,EAAE,UAAU,EAAE,UAAU,KAAK;GAC5C,OAAO,iBAAiB,4BAA4B;GACpD,QAAQ,EAAE;GACE;IACZ,EACD;GACqB;;AAI5B,MAAM,oCAAwD;CAC5D,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,oBAAC;EACC,IAAG;EACH;EACA,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,uBAAuB;YAElD,cAAc;GACV"}
+{"version":3,"file":"ConfigureSSONavbar.js","names":["BoxIcon"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSONavbar.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react/index';\nimport React from 'react';\n\nimport { useEnvironment } from '@/contexts';\nimport { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';\nimport { ApplicationLogo } from '@/elements/ApplicationLogo';\nimport { NavBar, NavbarContextProvider } from '@/elements/Navbar';\nimport { BoxIcon } from '@/icons';\n\ntype ConfigureSSONavbarProps = React.PropsWithChildren<{\n  contentRef: React.RefObject<HTMLDivElement>;\n}>;\n\nexport const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarProps) => {\n  const { parsedOptions } = useAppearance();\n  const {\n    organizationSettings,\n    displayConfig: { applicationName, logoImageUrl },\n  } = useEnvironment();\n\n  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);\n\n  return (\n    <NavbarContextProvider contentRef={contentRef}>\n      <NavBar\n        header={\n          <Flex\n            align='center'\n            sx={t => ({\n              gap: t.space.$2,\n              padding: `${t.space.$none} ${t.space.$3}`,\n              maxWidth: '100%',\n            })}\n          >\n            {hasLogo ? (\n              <ApplicationLogo\n                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}\n              />\n            ) : (\n              <Box\n                sx={t => ({\n                  width: t.space.$9,\n                  height: t.space.$9,\n                  flexShrink: 0,\n                  borderRadius: t.radii.$md,\n                  backgroundColor: t.colors.$primary500,\n                  color: t.colors.$colorPrimaryForeground,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                })}\n                aria-hidden\n              >\n                <Icon\n                  icon={BoxIcon}\n                  sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}\n                />\n              </Box>\n            )}\n\n            <Col sx={{ minWidth: 0 }}>\n              <Text\n                as='p'\n                truncate\n              >\n                {applicationName}\n              </Text>\n              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}\n            </Col>\n          </Flex>\n        }\n        titleSx={t => ({ fontSize: t.fontSizes.$lg })}\n        containerSx={{\n          flexDirection: 'column-reverse',\n          flex: 0,\n        }}\n        title={localizationKeys('configureSSO.navbar.title')}\n        routes={[]}\n        contentRef={contentRef}\n      />\n      {children}\n    </NavbarContextProvider>\n  );\n};\n\nconst OrganizationSidebarSubtitle = (): JSX.Element | null => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Text\n      as='span'\n      truncate\n      sx={t => ({ color: t.colors.$colorMutedForeground })}\n    >\n      {organization?.name}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,sBAAsB,EAAE,UAAU,iBAA0C;CACvF,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,EACJ,sBACA,eAAe,EAAE,iBAAiB,mBAChC,gBAAgB;AAIpB,QACE,qBAAC;EAAkC;aACjC,oBAAC;GACC,QACE,qBAAC;IACC,OAAM;IACN,KAAI,OAAM;KACR,KAAK,EAAE,MAAM;KACb,SAAS,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM;KACrC,UAAU;KACX;eAZK,QAAQ,cAAc,gBAAgB,aAAa,GAevD,oBAAC,mBACC,KAAI,OAAM;KAAE,OAAO,EAAE,MAAM;KAAI,QAAQ,EAAE,MAAM;KAAI,cAAc,EAAE,MAAM;KAAK,UAAU;KAAU,IAClG,GAEF,oBAAC;KACC,KAAI,OAAM;MACR,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,MAAM;MAChB,YAAY;MACZ,cAAc,EAAE,MAAM;MACtB,iBAAiB,EAAE,OAAO;MAC1B,OAAO,EAAE,OAAO;MAChB,SAAS;MACT,YAAY;MACZ,gBAAgB;MACjB;KACD;eAEA,oBAAC;MACC,MAAMA;MACN,KAAI,OAAM;OAAE,OAAO,EAAE,MAAM;OAAI,QAAQ,EAAE,MAAM;OAAI;OACnD;MACE,EAGR,qBAAC;KAAI,IAAI,EAAE,UAAU,GAAG;gBACtB,oBAAC;MACC,IAAG;MACH;gBAEC;OACI,EACN,qBAAqB,WAAW,oBAAC,gCAA8B;MAC5D;KACD;GAET,UAAS,OAAM,EAAE,UAAU,EAAE,UAAU,KAAK;GAC5C,aAAa;IACX,eAAe;IACf,MAAM;IACP;GACD,OAAO,iBAAiB,4BAA4B;GACpD,QAAQ,EAAE;GACE;IACZ,EACD;GACqB;;AAI5B,MAAM,oCAAwD;CAC5D,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,oBAAC;EACC,IAAG;EACH;EACA,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,uBAAuB;YAElD,cAAc;GACV"}

package/dist/components/ConfigureSSO/deriveInitialStep.js

@@ -2,20 +2,19 @@
 /**
 * Decides where the ConfigureSSO wizard should mount on (re)load based on
 * the current state of the user's enterprise connection.
-*
-* No connection → `select-provider`
-* Connection without SAML IdP metadata → `configure`
-* Connection with SAML IdP metadata → `confirmation`
-*
-* The `test` step is intentionally absent — we can't derive a "last test
-* passed" signal synchronously from the resource. Users can re-test from
-* Confirmation.
 */
-const deriveInitialStep = (connection) => {
-	if (!connection) return "select-provider";
-	if (!connection.samlConnection?.idpSsoUrl) return "configure";
+const deriveInitialStep = (enterpriseConnection, options) => {
+	const { isDomainTakenByOtherOrg, hasSuccessfulTestRun } = options;
+	if (isDomainTakenByOtherOrg) return "verify-domain";
+	if (!enterpriseConnection) return "select-provider";
+	if (enterpriseConnection?.active) return "confirmation";
+	if (!checkHasMinimumIdPConfiguration(enterpriseConnection)) return "configure";
+	if (!hasSuccessfulTestRun) return "test";
 	return "confirmation";
 };
+const checkHasMinimumIdPConfiguration = (connection) => {
+	return Boolean(connection.samlConnection?.idpSsoUrl && connection.samlConnection?.idpEntityId);
+};
 
 //#endregion
 export { deriveInitialStep };

package/dist/components/ConfigureSSO/deriveInitialStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"deriveInitialStep.js","names":[],"sources":["../../../src/components/ConfigureSSO/deriveInitialStep.ts"],"sourcesContent":["import type { EnterpriseConnectionResource } from '@clerk/shared/types';\n\nimport type { WizardStepId } from './types';\n\n/**\n * Decides where the ConfigureSSO wizard should mount on (re)load based on\n * the current state of the user's enterprise connection.\n *\n * No connection → `select-provider`\n * Connection without SAML IdP metadata → `configure`\n * Connection with SAML IdP metadata → `confirmation`\n *\n * The `test` step is intentionally absent — we can't derive a \"last test\n * passed\" signal synchronously from the resource. Users can re-test from\n * Confirmation.\n */\nexport const deriveInitialStep = (connection: EnterpriseConnectionResource | undefined): WizardStepId => {\n  if (!connection) {\n    return 'select-provider';\n  }\n  if (!connection.samlConnection?.idpSsoUrl) {\n    return 'configure';\n  }\n  return 'confirmation';\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,qBAAqB,eAAuE;AACvG,KAAI,CAAC,WACH,QAAO;AAET,KAAI,CAAC,WAAW,gBAAgB,UAC9B,QAAO;AAET,QAAO"}
+{"version":3,"file":"deriveInitialStep.js","names":[],"sources":["../../../src/components/ConfigureSSO/deriveInitialStep.ts"],"sourcesContent":["import type { EnterpriseConnectionResource } from '@clerk/shared/types';\n\nimport type { WizardStepId } from './types';\n\n/**\n * Decides where the ConfigureSSO wizard should mount on (re)load based on\n * the current state of the user's enterprise connection.\n */\nexport const deriveInitialStep = (\n  enterpriseConnection: EnterpriseConnectionResource | undefined,\n  options: { isDomainTakenByOtherOrg: boolean; hasSuccessfulTestRun: boolean },\n): WizardStepId => {\n  const { isDomainTakenByOtherOrg, hasSuccessfulTestRun } = options;\n\n  // Go to the verify domain step in order to display warning\n  if (isDomainTakenByOtherOrg) {\n    return 'verify-domain';\n  }\n\n  // If no initial connection, go to the select provider step\n  if (!enterpriseConnection) {\n    return 'select-provider';\n  }\n\n  // Connection is enabled, go to the confirmation step\n  const isEnabled = enterpriseConnection?.active;\n  if (isEnabled) {\n    return 'confirmation';\n  }\n\n  const hasMinimumIdPConfiguration = checkHasMinimumIdPConfiguration(enterpriseConnection);\n\n  // If the connection hasn't finished configuring it, go to the configure step\n  // Connection exists, but is not enabled and hasn't finished configuring it\n  if (!hasMinimumIdPConfiguration) {\n    return 'configure';\n  }\n\n  // If the connection hasn't been tested, go to the test step\n  if (!hasSuccessfulTestRun) {\n    return 'test';\n  }\n\n  // Connection is disabled but has been tested and configured\n  return 'confirmation';\n};\n\n// TODO - Update to support OpenID Connect\nconst checkHasMinimumIdPConfiguration = (connection: EnterpriseConnectionResource): boolean => {\n  return Boolean(connection.samlConnection?.idpSsoUrl && connection.samlConnection?.idpEntityId);\n};\n"],"mappings":";;;;;AAQA,MAAa,qBACX,sBACA,YACiB;CACjB,MAAM,EAAE,yBAAyB,yBAAyB;AAG1D,KAAI,wBACF,QAAO;AAIT,KAAI,CAAC,qBACH,QAAO;AAKT,KADkB,sBAAsB,OAEtC,QAAO;AAOT,KAAI,CAJ+B,gCAAgC,qBAAqB,CAKtF,QAAO;AAIT,KAAI,CAAC,qBACH,QAAO;AAIT,QAAO;;AAIT,MAAM,mCAAmC,eAAsD;AAC7F,QAAO,QAAQ,WAAW,gBAAgB,aAAa,WAAW,gBAAgB,YAAY"}