Update initial step initialization

Author: LauraBeatris

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

@@ -1,5 +1,9 @@
-import { __internal_useUserEnterpriseConnections, useSession } from '@clerk/shared/react';
-import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
+import {
+  __internal_useEnterpriseConnectionTestRuns,
+  __internal_useUserEnterpriseConnections,
+  useSession,
+} from '@clerk/shared/react';
+import type { __experimental_ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types';
 import React from 'react';
 
 import { useProtect } from '@/common';
@@ -64,17 +68,21 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 });
 
 const ConfigureSSOCardContent = ({ contentRef }: { contentRef: React.RefObject<HTMLDivElement> }) => {
-  const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
-
+  const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections } =
+    __internal_useUserEnterpriseConnections({ enabled: true });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
 
+  const { hasSuccessfulTestRun, isLoading: isLoadingTestRuns } = useHasSuccessfulTestRun(enterpriseConnection);
+
+  const isLoading = isLoadingEnterpriseConnections || isLoadingTestRuns;
   if (isLoading && !enterpriseConnection) {
     return <ConfigureSSOSkeleton />;
   }
 
   return (
     <ConfigureSSOProvider
+      hasSuccessfulTestRun={hasSuccessfulTestRun}
       enterpriseConnection={enterpriseConnection}
       contentRef={contentRef}
     >
@@ -183,5 +191,22 @@ const MissingManageEnterpriseConnectionsPermission = () => (
   </>
 );
 
+/**
+ * Fetches a single successful test run for the given connection on mount
+ */
+const useHasSuccessfulTestRun = (
+  enterpriseConnection: EnterpriseConnectionResource | undefined,
+): { hasSuccessfulTestRun: boolean; isLoading: boolean } => {
+  const { data: successfulTestRuns, isLoading } = __internal_useEnterpriseConnectionTestRuns({
+    enterpriseConnectionId: enterpriseConnection?.id ?? null,
+    params: { initialPage: 1, pageSize: 1, status: ['success'] },
+  });
+
+  return {
+    hasSuccessfulTestRun: (successfulTestRuns?.length ?? 0) > 0,
+    isLoading,
+  };
+};
+
 export const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =
   withCardStateProvider(ConfigureSSOInternal);

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

@@ -1,5 +1,5 @@
 import { __internal_useUserEnterpriseConnections, useSession, useUser } from '@clerk/shared/react/index';
-import type { EnterpriseConnectionResource } from '@clerk/shared/types';
+import type { EnterpriseConnectionResource, SignedInSessionResource, UserResource } from '@clerk/shared/types';
 import React, { type PropsWithChildren, useCallback } from 'react';
 
 import { useCardState } from '@/elements/contexts';
@@ -35,10 +35,16 @@ export interface ConfigureSSOData {
    * Creates a new enterprise connection.
    */
   createEnterpriseConnection: (provider: ProviderType) => Promise<void>;
+  /**
+   * Determines if the user's domain is already wired to an enterprise connection that
+   * doesn't belong to the org they're currently configuring
+   */
+  isDomainTakenByOtherOrg: boolean;
 }
 
 interface ConfigureSSOProviderProps {
   enterpriseConnection: EnterpriseConnectionResource | undefined;
+  hasSuccessfulTestRun: boolean;
   contentRef: React.RefObject<HTMLDivElement>;
 }
 
@@ -47,6 +53,7 @@ ConfigureSSOContext.displayName = 'ConfigureSSOContext';
 
 export const ConfigureSSOProvider = ({
   enterpriseConnection,
+  hasSuccessfulTestRun,
   contentRef,
   children,
 }: PropsWithChildren<ConfigureSSOProviderProps>): JSX.Element => {
@@ -57,7 +64,9 @@ export const ConfigureSSOProvider = ({
   const { user } = useUser();
   const { session } = useSession();
   const card = useCardState();
-  const initialStepId = deriveInitialStep(enterpriseConnection);
+
+  const isDomainTakenByOtherOrg = checkDomainTakenByOtherOrg(user, session, enterpriseConnection);
+  const initialStepId = deriveInitialStep(enterpriseConnection, { isDomainTakenByOtherOrg, hasSuccessfulTestRun });
 
   const createEnterpriseConnection = useCallback(
     async (provider: ProviderType): Promise<void> => {
@@ -85,14 +94,15 @@ export const ConfigureSSOProvider = ({
 
   const value = React.useMemo<ConfigureSSOData>(
     () => ({
+      provider,
+      contentRef,
+      setProvider,
       initialStepId,
       enterpriseConnection,
-      provider,
+      isDomainTakenByOtherOrg,
       createEnterpriseConnection,
-      setProvider,
-      contentRef,
     }),
-    [initialStepId, enterpriseConnection, createEnterpriseConnection, provider, contentRef],
+    [provider, contentRef, initialStepId, enterpriseConnection, createEnterpriseConnection, isDomainTakenByOtherOrg],
   );
 
   return <ConfigureSSOContext.Provider value={value}>{children}</ConfigureSSOContext.Provider>;
@@ -105,3 +115,20 @@ export const useConfigureSSO = (): ConfigureSSOData => {
   }
   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: UserResource | null | undefined,
+  session: SignedInSessionResource | null | undefined,
+  enterpriseConnection: EnterpriseConnectionResource | undefined,
+): boolean => {
+  const emailToVerify =
+    user?.primaryEmailAddress ?? user?.emailAddresses?.find(e => e.verification.status !== 'verified');
+  const isVerified = emailToVerify?.verification.status === 'verified';
+  const activeOrganizationId = session?.lastActiveOrganizationId ?? null;
+
+  return Boolean(isVerified && enterpriseConnection && enterpriseConnection.organizationId !== activeOrganizationId);
+};

packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts

@@ -5,21 +5,47 @@ import type { WizardStepId } from './types';
 /**
  * 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.
  */
-export const deriveInitialStep = (connection: EnterpriseConnectionResource | undefined): WizardStepId => {
-  if (!connection) {
+export const deriveInitialStep = (
+  enterpriseConnection: EnterpriseConnectionResource | undefined,
+  options: { isDomainTakenByOtherOrg: boolean; hasSuccessfulTestRun: boolean },
+): WizardStepId => {
+  const { isDomainTakenByOtherOrg, hasSuccessfulTestRun } = options;
+
+  // Go to the verify domain step in order to display warning
+  if (isDomainTakenByOtherOrg) {
+    return 'verify-domain';
+  }
+
+  // If no initial connection, go to the select provider step
+  if (!enterpriseConnection) {
     return 'select-provider';
   }
-  if (!connection.samlConnection?.idpSsoUrl) {
+
+  // Connection is enabled, go to the confirmation step
+  const isEnabled = enterpriseConnection?.active;
+  if (isEnabled) {
+    return 'confirmation';
+  }
+
+  const hasMinimumIdPConfiguration = checkHasMinimumIdPConfiguration(enterpriseConnection);
+
+  // If the connection hasn't finished configuring it, go to the configure step
+  // Connection exists, but is not enabled and hasn't finished configuring it
+  if (!hasMinimumIdPConfiguration) {
     return 'configure';
   }
+
+  // If the connection hasn't been tested, go to the test step
+  if (!hasSuccessfulTestRun) {
+    return 'test';
+  }
+
+  // Connection is disabled but has been tested and configured
   return 'confirmation';
 };
+
+// TODO - Update to support OpenID Connect
+const checkHasMinimumIdPConfiguration = (connection: EnterpriseConnectionResource): boolean => {
+  return Boolean(connection.samlConnection?.idpSsoUrl && connection.samlConnection?.idpEntityId);
+};