Send enterprise connection ID on sign-in/sign-up

Author: LauraBeatris

packages/clerk-js/src/ui/common/ChooseEnterpriseConnectionCard.tsx

@@ -8,7 +8,7 @@ import type { InternalTheme, PropsOfComponent } from '@/ui/styledSystem';
 type ChooseEnterpriseConnectionCardProps = {
   title: LocalizationKey;
   subtitle: LocalizationKey;
-  onClick: (id: string) => Promise<void>;
+  onClick: (id: string) => void;
   enterpriseConnections: Array<{ id: string; name: string }>;
 };
 
@@ -33,15 +33,15 @@ export const ChooseEnterpriseConnectionCard = ({
         <Card.Alert>{card.error}</Card.Alert>
 
         <Grid
-          elementDescriptor={descriptors.chooseEnterpriseConnectionRoot}
+          elementDescriptor={descriptors.chooseEnterpriseConnectionsRoot}
           gap={2}
         >
           {enterpriseConnections?.map(({ id, name }) => (
             <ChooseEnterpriseConnectionButton
               key={id}
               id={id}
               label={name}
-              onClick={onClick}
+              onClick={() => onClick(id)}
               isLoading={card.isLoading}
             />
           ))}

packages/clerk-js/src/ui/components/SignIn/SignInChooseEnterpriseConnection.tsx

@@ -1,7 +1,8 @@
 import type { ComponentType } from 'react';
 
-import { withRedirect } from '@/ui/common';
-import { useCoreSignIn, useSignInContext } from '@/ui/contexts';
+import { buildSSOCallbackURL, withRedirect } from '@/ui/common';
+import { ChooseEnterpriseConnectionCard } from '@/ui/common/ChooseEnterpriseConnectionCard';
+import { useCoreSignIn, useEnvironment, useSignInContext } from '@/ui/contexts';
 import { Flow, localizationKeys } from '@/ui/customizables';
 import type { AvailableComponentProps } from '@/ui/types';
 
@@ -12,6 +13,8 @@ import { hasMultipleEnterpriseConnections } from './shared';
  */
 const SignInChooseEnterpriseConnectionInternal = () => {
   const signIn = useCoreSignIn();
+  const ctx = useSignInContext();
+  const { displayConfig } = useEnvironment();
 
   if (!hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {
     // This should not happen due to the HOC guard, but provides type safety
@@ -23,9 +26,18 @@ const SignInChooseEnterpriseConnectionInternal = () => {
     name: ff.enterpriseConnectionName,
   }));
 
-  const handleEnterpriseSSO = (connectionId: string) => {
-    // TODO - Post sign-in with enterprise connection ID
-    console.log('Signing in with enterprise connection:', connectionId);
+  const handleEnterpriseSSO = (enterpriseConnectionId: string) => {
+    const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
+    const redirectUrlComplete = ctx.afterSignInUrl || '/';
+
+    return signIn.authenticateWithRedirect({
+      strategy: 'enterprise_sso',
+      redirectUrl,
+      redirectUrlComplete,
+      oidcPrompt: ctx.oidcPrompt,
+      continueSignIn: true,
+      enterpriseConnectionId,
+    });
   };
 
   return (

packages/clerk-js/src/ui/components/SignUp/SignUpChooseEnterpriseConnection.tsx

@@ -1,5 +1,5 @@
 import { ChooseEnterpriseConnectionCard } from '@/ui/common/ChooseEnterpriseConnectionCard';
-import { useCoreSignUp } from '@/ui/contexts';
+import { useCoreSignUp, useSignUpContext } from '@/ui/contexts';
 import { Flow, localizationKeys } from '@/ui/customizables';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 import { useFetch } from '@/ui/hooks';
@@ -9,28 +9,45 @@ import { useFetch } from '@/ui/hooks';
  */
 export const SignUpChooseEnterpriseConnection = () => {
   const signUp = useCoreSignUp();
+  const ctx = useSignUpContext();
   const { data: enterpriseConnections, isLoading } = useFetch(signUp?.__experimental_getEnterpriseConnections, {
     signUpId: signUp.id,
   });
 
-  const handleEnterpriseSSO = (connectionId: string) => {
-    // TODO - Post sign-up with enterprise connection ID
-    console.log('Signing up with enterprise connection:', connectionId);
+  const handleEnterpriseSSO = (enterpriseConnectionId: string) => {
+    if (!signUp.emailAddress) {
+      return;
+    }
+
+    const redirectUrl = ctx.ssoCallbackUrl;
+    const redirectUrlComplete = ctx.afterSignUpUrl || '/';
+
+    void signUp.authenticateWithRedirect({
+      strategy: 'enterprise_sso',
+      identifier: signUp.emailAddress,
+      redirectUrl,
+      redirectUrlComplete,
+      continueSignUp: true,
+      enterpriseConnectionId,
+    });
   };
 
+  if (!isLoading && !enterpriseConnections?.length) {
+    return null;
+  }
+
   return (
-    /* TODO - Add as a shared component to reuse between sign-in/sign-up */
     <Flow.Part part='chooseEnterpriseConnection'>
-      {isLoading ? (
-        <LoadingCard />
-      ) : (
+      {enterpriseConnections?.length ? (
         <ChooseEnterpriseConnectionCard
           title={localizationKeys('signUp.chooseEnterpriseConnection.title')}
           subtitle={localizationKeys('signUp.chooseEnterpriseConnection.subtitle')}
           onClick={handleEnterpriseSSO}
           enterpriseConnections={enterpriseConnections}
         />
-      )}
+      ) : isLoading ? (
+        <LoadingCard />
+      ) : null}
     </Flow.Part>
   );
 };

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -506,6 +506,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'subscriptionDetailsDetailRowLabel',
   'subscriptionDetailsDetailRowValue',
 
+  'chooseEnterpriseConnectionsRoot',
   'chooseEnterpriseConnectionButton',
   'chooseEnterpriseConnectionButtonText',
 ] as const).map(camelize) as (keyof ElementsConfig)[];

packages/localizations/src/en-US.ts

@@ -806,6 +806,10 @@ export const enUS: LocalizationResource = {
       title: 'Create your account',
       titleCombined: 'Create your account',
     },
+    chooseEnterpriseConnection: {
+      subtitle: 'Select the enterprise account with which you wish to continue.',
+      title: 'Choose your enterprise account',
+    },
   },
   socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
   socialButtonsBlockButtonManyInView: '{{provider|titleize}}',

packages/types/src/appearance.ts

@@ -641,6 +641,7 @@ export type ElementsConfig = {
   subscriptionDetailsDetailRowLabel: WithOptions;
   subscriptionDetailsDetailRowValue: WithOptions;
 
+  chooseEnterpriseConnectionsRoot: WithOptions;
   chooseEnterpriseConnectionButton: WithOptions;
   chooseEnterpriseConnectionButtonText: WithOptions;
 };

packages/types/src/redirects.ts

@@ -91,6 +91,11 @@ export type AuthenticateWithRedirectParams = {
    * Optional for `oauth_<provider>` or `enterprise_sso` strategies. The value to pass to the [OIDC prompt parameter](https://openid.net/specs/openid-connect-core-1_0.html#:~:text=prompt,reauthentication%20and%20consent.) in the generated OAuth redirect URL.
    */
   oidcPrompt?: string;
+
+  /**
+   * @experimental
+   */
+  enterpriseConnectionId?: string;
 };
 
 export type AuthenticateWithPopupParams = AuthenticateWithRedirectParams & { popup: Window | null };