Create connection for organization

Author: LauraBeatris

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

@@ -52,14 +52,17 @@ const AuthenticatedContent = withCoreUserGuard(() => {
   const { organizationSettings } = useEnvironment();
   const { parsedOptions } = useAppearance();
   const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
+  const { organization } = useOrganization();
 
   // 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({
-    permission: 'org:sys_enterprise_connections:manage',
-  });
+  const canManageEnterpriseConnections =
+    !!organization &&
+    useProtect({
+      permission: 'org:sys_enterprise_connections:manage',
+    });
 
   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 || !organization ? (
             <ConfigureSSOFlowProvider
               enterpriseConnection={enterpriseConnection}
               isLoading={isLoadingEnterpriseConnections}

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

@@ -1,4 +1,4 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, 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,7 @@ export const ConfigureCreateApp = (): JSX.Element => {
     useConfigureSSOFlow();
   const { user } = useUser();
   const card = useCardState();
+  const { organization } = useOrganization();
 
   const primaryEmail = user?.primaryEmailAddress?.emailAddress ?? '';
   const emailDomain = getEmailDomain(primaryEmail);
@@ -51,6 +52,7 @@ export const ConfigureCreateApp = (): JSX.Element => {
     createEnterpriseConnection({
       provider: selectedProvider,
       name: emailDomain,
+      organizationId: organization?.id,
     })
       .catch(err => handleError(err as Error, [], card.setError))
       .finally(() => setIsCreating(false));