Create connection for organization

Author: LauraBeatris

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

@@ -1,4 +1,4 @@
-import { __internal_useUserEnterpriseConnections, useOrganization, useUser } from '@clerk/shared/react';
+import { __internal_useUserEnterpriseConnections, useSession, useUser } from '@clerk/shared/react';
 import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
 import React from 'react';
 
@@ -53,13 +53,16 @@ const AuthenticatedContent = withCoreUserGuard(() => {
   const { parsedOptions } = useAppearance();
   const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
 
-  // Gate the entire wizard behind the org-level permission. When the
-  // user can't manage enterprise connections, we still render the
-  // outer sidebar/title chrome but replace the wizard with a
-  // permissions-error message so the layout stays consistent
-  const canManageEnterpriseConnections = useProtect({
+  const { session } = useSession();
+  const hasActiveOrganization = Boolean(session?.lastActiveOrganizationId);
+
+  // Gate the entire wizard behind the org-level permission. `useProtect`
+  // must be called unconditionally to satisfy the rules of hooks; we
+  // combine its result with `hasActiveOrganization` afterwards
+  const hasManagePermission = useProtect({
     permission: 'org:sys_enterprise_connections:manage',
   });
+  const canManageEnterpriseConnections = hasActiveOrganization && hasManagePermission;
 
   const {
     data: enterpriseConnections,
@@ -69,7 +72,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
     deleteEnterpriseConnection,
     revalidate: revalidateEnterpriseConnections,
   } = __internal_useUserEnterpriseConnections({
-    enabled: canManageEnterpriseConnections,
+    enabled: true,
   });
   // Currently FAPI only supports one enterprise connection per user
   const enterpriseConnection = enterpriseConnections?.[0];
@@ -148,7 +151,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
             flex: 1,
           })}
         >
-          {canManageEnterpriseConnections ? (
+          {canManageEnterpriseConnections || !hasActiveOrganization ? (
             <ConfigureSSOFlowProvider
               enterpriseConnection={enterpriseConnection}
               isLoading={isLoadingEnterpriseConnections}
@@ -185,6 +188,7 @@ const ConfigureSSOSteps = () => {
           id='select-provider'
           path='select-provider'
           label='Select provider'
+          hideFromBreadcrumb
         >
           <SelectProviderStep />
         </ConfigureSSOWizard.Step>
@@ -237,9 +241,18 @@ const ConfigureSSOSteps = () => {
 };
 
 const OrganizationSidebarSubtitle = () => {
-  const { organization } = useOrganization();
+  // Resolve the active org's name without `useOrganization()` (which
+  // would subscribe to the organization resource). The active id lives
+  // on the session, and the user already carries the matching
+  // membership eagerly, so we can join the two without an extra fetch
+  const { user } = useUser();
+  const { session } = useSession();
+  const activeOrganizationId = session?.lastActiveOrganizationId ?? null;
+  const activeOrganization = activeOrganizationId
+    ? user?.organizationMemberships.find(m => m.organization.id === activeOrganizationId)?.organization
+    : undefined;
 
-  if (!organization) {
+  if (!activeOrganization) {
     return null;
   }
 
@@ -249,7 +262,7 @@ const OrganizationSidebarSubtitle = () => {
       truncate
       sx={t => ({ color: t.colors.$colorMutedForeground })}
     >
-      {organization?.name}
+      {activeOrganization.name}
     </Text>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useUser } from '@clerk/shared/react';
+import { useSession, useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { Box, Button, Col, descriptors, Flex, Flow, Icon, Input, Spinner, Text } from '@/customizables';
@@ -19,6 +19,10 @@ export const ConfigureCreateApp = (): JSX.Element => {
     useConfigureSSOFlow();
   const { user } = useUser();
   const card = useCardState();
+  // Active org id straight off the session — `useOrganization()` would
+  // subscribe to the organization resource and we only need the id
+  const { session } = useSession();
+  const activeOrganizationId = session?.lastActiveOrganizationId ?? undefined;
 
   const primaryEmail = user?.primaryEmailAddress?.emailAddress ?? '';
   const emailDomain = getEmailDomain(primaryEmail);
@@ -51,6 +55,7 @@ export const ConfigureCreateApp = (): JSX.Element => {
     createEnterpriseConnection({
       provider: selectedProvider,
       name: emailDomain,
+      organizationId: activeOrganizationId,
     })
       .catch(err => handleError(err as Error, [], card.setError))
       .finally(() => setIsCreating(false));

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

@@ -1,4 +1,4 @@
-import { useOrganization, useReverification, useUser } from '@clerk/shared/react';
+import { useReverification, useSession, useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { Col, Flow, Heading, Icon, Input, localizationKeys, Text, useLocalizations } from '@/customizables';
@@ -18,19 +18,23 @@ export const VerifyDomainStep = (): JSX.Element | null => {
   const card = useCardState();
   const { t } = useLocalizations();
   const { user } = useUser();
-  const { organization } = useOrganization();
+  const { session } = useSession();
+  const activeOrganizationId = session?.lastActiveOrganizationId ?? null;
 
   const emailToVerify =
     user?.primaryEmailAddress ?? user?.emailAddresses?.find(e => e.verification.status !== 'verified');
   const isVerified = emailToVerify?.verification.status === 'verified';
   const isAlreadyPrimary = Boolean(emailToVerify && emailToVerify.id === user?.primaryEmailAddressId);
 
+  // Domain that the existing connection is registered for.
+  const conflictingDomain = enterpriseConnection?.domains?.[0] ?? getEmailDomain(emailToVerify?.emailAddress ?? '');
+
   // The user's domain is already wired to an enterprise connection that
   // doesn't belong to the org they're currently configuring. They can't
   // take it over from here — they need the existing app's owner to
   // re-configure (or share) the connection
   const isDomainTakenByOtherOrg = Boolean(
-    isVerified && enterpriseConnection && enterpriseConnection.organizationId !== (organization?.id ?? null),
+    isVerified && enterpriseConnection && enterpriseConnection.organizationId !== activeOrganizationId,
   );
 
   const prepareEmailVerification = useReverification(() =>
@@ -147,14 +151,16 @@ export const VerifyDomainStep = (): JSX.Element | null => {
                   textVariant='h1'
                   sx={t => ({ color: t.colors.$colorForeground, fontSize: t.fontSizes.$md })}
                 >
-                  That domain already has an SSO connection
+                  {conflictingDomain
+                    ? `This domain (${conflictingDomain}) already has an SSO connection`
+                    : 'This domain already has an SSO connection'}
                 </Heading>
                 <Text
                   as='p'
                   variant='body'
                   sx={t => ({ color: t.colors.$colorMutedForeground })}
                 >
-                  Contact the application's administrator to get access through the existing connection.
+                  Contact the application&apos;s administrator to get access through the existing connection.
                 </Text>
               </Col>
             </>
@@ -217,3 +223,11 @@ export const VerifyDomainStep = (): JSX.Element | null => {
     </Flow.Part>
   );
 };
+
+function getEmailDomain(emailAddress: string): string {
+  const at = emailAddress.lastIndexOf('@');
+  if (at === -1) {
+    return '';
+  }
+  return emailAddress.slice(at + 1).toLowerCase();
+}

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

@@ -55,6 +55,7 @@ function extractSteps(children: React.ReactNode): ConfigureSSOWizardActiveStep[]
       path: props.path,
       label: props.label,
       isCompleted: props.isCompleted,
+      hideFromBreadcrumb: props.hideFromBreadcrumb,
       children: props.children,
     });
   });
@@ -265,12 +266,16 @@ const StepBody = ({ step }: { step: ConfigureSSOWizardActiveStep }): JSX.Element
 /**
  * Numbered breadcrumb of the outermost wizard's active steps.
  * Completed and current steps are clickable for backwards navigation,
- * future steps are disabled
+ * future steps are disabled. Steps marked with `hideFromBreadcrumb`
+ * are silently skipped over and the visible steps are renumbered, so
+ * dropping a hidden step from the wizard later doesn't shift numbers
  */
 const Header = (): JSX.Element => {
   const { activeSteps, currentIndex, isLoading, goToStep } = useConfigureSSOWizard();
   const { t } = useLocalizations();
 
+  const visibleSteps = React.useMemo(() => activeSteps.filter(s => !s.hideFromBreadcrumb), [activeSteps]);
+
   return (
     <Flex
       elementDescriptor={descriptors.configureSSOWizardHeader}
@@ -284,10 +289,15 @@ const Header = (): JSX.Element => {
         flexWrap: 'wrap',
       })}
     >
-      {activeSteps.map((step, index) => {
-        const isCurrent = index === currentIndex;
-        const isCompleted = step.isCompleted ?? index < currentIndex;
-        const isReachable = isCompleted || index <= currentIndex;
+      {visibleSteps.map((step, visibleIndex) => {
+        // `currentIndex` is computed against the full `activeSteps`
+        // list, so look the visible step back up there to keep
+        // current/completed/reachable consistent with the wizard's
+        // own routing state
+        const actualIndex = activeSteps.findIndex(s => s.id === step.id);
+        const isCurrent = actualIndex === currentIndex;
+        const isCompleted = step.isCompleted ?? actualIndex < currentIndex;
+        const isReachable = isCompleted || actualIndex <= currentIndex;
         const labelText = step.label ? (typeof step.label === 'string' ? step.label : t(step.label)) : '';
 
         return (
@@ -342,7 +352,7 @@ const Header = (): JSX.Element => {
                       size='xs'
                     />
                   ) : (
-                    index + 1
+                    visibleIndex + 1
                   )}
                 </Flex>
                 <Text
@@ -356,7 +366,7 @@ const Header = (): JSX.Element => {
                 </Text>
               </Button>
             )}
-            {index < activeSteps.length - 1 && (
+            {visibleIndex < visibleSteps.length - 1 && (
               <Icon
                 elementDescriptor={descriptors.configureSSOWizardHeaderSeparator}
                 icon={CaretRight}

packages/ui/src/components/ConfigureSSO/wizard/types.ts

@@ -31,6 +31,14 @@ export interface ConfigureSSOWizardStepProps {
    * to the current step
    */
   isCompleted?: boolean;
+  /**
+   * Hides this step from the wizard breadcrumb/header while keeping
+   * it routable. Useful for "pre-flight" steps like provider
+   * selection that shouldn't be visible (or clickable) once the user
+   * has moved past them — and to avoid the visible step count
+   * shifting when the step is later dropped from the wizard
+   */
+  hideFromBreadcrumb?: boolean;
   /**
    * The step body. Anything React, including a nested
    * `<ConfigureSSOWizard>` for inner sub-steps
@@ -74,6 +82,7 @@ export interface ConfigureSSOWizardActiveStep {
   path: string;
   label?: LocalizationKey | string;
   isCompleted?: boolean;
+  hideFromBreadcrumb?: boolean;
   children: React.ReactNode;
 }