Add changeset

Author: LauraBeatris

.changeset/upset-results-win.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduce experimental step to choose enterprise connection on sign-in/sign-up

packages/clerk-js/src/core/resources/SignIn.ts

@@ -222,6 +222,7 @@ export class SignIn extends BaseResource implements SignInResource {
           redirectUrl: params.redirectUrl,
           actionCompleteRedirectUrl: params.actionCompleteRedirectUrl,
           oidcPrompt: params.oidcPrompt,
+          enterpriseConnectionId: params.enterpriseConnectionId,
         } as EnterpriseSSOConfig;
         break;
       default:
@@ -308,7 +309,8 @@ export class SignIn extends BaseResource implements SignInResource {
     params: AuthenticateWithRedirectParams,
     navigateCallback: (url: URL | string) => void,
   ): Promise<void> => {
-    const { strategy, redirectUrlComplete, identifier, oidcPrompt, continueSignIn } = params || {};
+    const { strategy, redirectUrlComplete, identifier, oidcPrompt, continueSignIn, enterpriseConnectionId } =
+      params || {};
     const actionCompleteRedirectUrl = redirectUrlComplete;
 
     const redirectUrl = SignIn.clerk.buildUrlWithAuth(params.redirectUrl);
@@ -328,6 +330,7 @@ export class SignIn extends BaseResource implements SignInResource {
         redirectUrl,
         actionCompleteRedirectUrl,
         oidcPrompt,
+        enterpriseConnectionId,
       });
     }
 

packages/clerk-js/src/core/resources/SignUp.ts

@@ -387,6 +387,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       emailAddress,
       legalAccepted,
       oidcPrompt,
+      enterpriseConnectionId,
     } = params;
 
     const redirectUrlWithAuthToken = SignUp.clerk.buildUrlWithAuth(redirectUrl);
@@ -400,6 +401,7 @@ export class SignUp extends BaseResource implements SignUpResource {
         emailAddress,
         legalAccepted,
         oidcPrompt,
+        enterpriseConnectionId,
       };
       return continueSignUp && this.id ? this.update(authParams) : this.create(authParams);
     };
@@ -554,7 +556,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     return false;
   }
 
-  public __experimental_getEnterpriseConnections(): Promise<SignUpEnterpriseConnectionResource[]> {
+  __experimental_getEnterpriseConnections = (): Promise<SignUpEnterpriseConnectionResource[]> => {
     return BaseResource._fetch({
       path: `/client/sign_ups/${this.id}/enterprise_connections`,
       method: 'GET',
@@ -563,7 +565,7 @@ export class SignUp extends BaseResource implements SignUpResource {
 
       return enterpriseConnections.map(enterpriseConnection => new SignUpEnterpriseConnection(enterpriseConnection));
     });
-  }
+  };
 }
 
 class SignUpFuture implements SignUpFutureResource {

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

@@ -1,3 +1,4 @@
+import { useClerk } from '@clerk/shared/react/index';
 import type { ComponentType } from 'react';
 
 import { buildSSOCallbackURL, withRedirect } from '@/ui/common';
@@ -12,10 +13,12 @@ import { hasMultipleEnterpriseConnections } from './shared';
  * @experimental
  */
 const SignInChooseEnterpriseConnectionInternal = () => {
-  const signIn = useCoreSignIn();
   const ctx = useSignInContext();
   const { displayConfig } = useEnvironment();
 
+  const clerk = useClerk();
+  const signIn = clerk.client.signIn;
+
   if (!hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {
     // This should not happen due to the HOC guard, but provides type safety
     return null;

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

@@ -1,30 +1,28 @@
+import { useClerk } from '@clerk/shared/react/index';
+
+import { withRedirectToAfterSignUp } from '@/ui/common';
 import { ChooseEnterpriseConnectionCard } from '@/ui/common/ChooseEnterpriseConnectionCard';
-import { useCoreSignUp, useSignUpContext } from '@/ui/contexts';
+import { useSignUpContext } from '@/ui/contexts';
 import { Flow, localizationKeys } from '@/ui/customizables';
+import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 import { useFetch } from '@/ui/hooks';
 
-/**
- * @experimental
- */
-export const SignUpChooseEnterpriseConnection = () => {
-  const signUp = useCoreSignUp();
+const SignUpChooseEnterpriseConnectionInternal = () => {
+  const clerk = useClerk();
   const ctx = useSignUpContext();
+
+  const signUp = clerk.client.signUp;
   const { data: enterpriseConnections, isLoading } = useFetch(signUp?.__experimental_getEnterpriseConnections, {
     signUpId: signUp.id,
   });
 
   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,
@@ -51,3 +49,10 @@ export const SignUpChooseEnterpriseConnection = () => {
     </Flow.Part>
   );
 };
+
+/**
+ * @experimental
+ */
+export const SignUpChooseEnterpriseConnection = withRedirectToAfterSignUp(
+  withCardStateProvider(SignUpChooseEnterpriseConnectionInternal),
+);

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

@@ -364,7 +364,7 @@ function SignUpStartInternal(): JSX.Element {
           isClerkAPIResponseError(err) &&
           err.errors?.[0]?.code === 'enterprise_connection_id_is_required_with_multiple_connections'
         ) {
-          return navigate('../choose-enterprise-connection');
+          return navigate('./choose-enterprise-connection');
         }
 
         return handleError(err, fieldsToSubmit, card.setError);

packages/types/src/factors.ts

@@ -124,6 +124,10 @@ export type EnterpriseSSOConfig = EnterpriseSSOFactor & {
   redirectUrl: string;
   actionCompleteRedirectUrl: string;
   oidcPrompt?: string;
+  /**
+   * @experimental
+   */
+  enterpriseConnectionId?: string;
 };
 
 export type PhoneCodeSecondFactorConfig = {

packages/types/src/signIn.ts

@@ -79,6 +79,12 @@ export interface SignInResource extends ClerkResource {
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<SignInStartEmailLinkFlowParams, SignInResource>;
 
   validatePassword: (password: string, callbacks?: ValidatePasswordCallbacks) => void;
+
+  /**
+   * @experimental
+   */
+  __experimental_getEnterpriseConnections: () => Promise<SignInEnterpriseConnectionResource[]>;
+
   /**
    * @internal
    */
@@ -106,3 +112,8 @@ export interface SignInJSON extends ClerkResourceJSON {
   second_factor_verification: VerificationJSON | null;
   created_session_id: string | null;
 }
+
+export interface SignInEnterpriseConnectionResource {
+  id: string;
+  name: string;
+}