feat(types,clerk-js): Add oidcPrompt prop to SignIn/SignUp components (#5925)

Author: LauraBeatris

.changeset/dirty-keys-heal.md

@@ -0,0 +1,15 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add `oidcPrompt` prop to `SignIn` and `SignUp` components and `authenticateWithRedirect` method to control the OIDC authentication prompt behavior during Enterprise SSO flows
+
+```tsx
+<SignUp oidcPrompt='select_account' />
+<SignIn oidcPrompt='select_account' />
+```
+
+```ts
+signUp.authenticateWithRedirect({ redirectUrl: '/sso-callback', oidcPrompt: 'select_account' })
+```

packages/clerk-js/bundlewatch.config.json

@@ -1,8 +1,8 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "595.7kB" },
+    { "path": "./dist/clerk.js", "maxSize": "598KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "68.5KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "105.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
@@ -13,7 +13,7 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "14KB" },
-    { "path": "./dist/signup*.js", "maxSize": "7.4KB" },
+    { "path": "./dist/signup*.js", "maxSize": "7.7KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "16.5KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },

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

@@ -148,6 +148,7 @@ export class SignIn extends BaseResource implements SignInResource {
         config = {
           redirectUrl: factor.redirectUrl,
           actionCompleteRedirectUrl: factor.actionCompleteRedirectUrl,
+          oidcPrompt: factor.oidcPrompt,
         } as EnterpriseSSOConfig;
         break;
       default:
@@ -231,20 +232,22 @@ export class SignIn extends BaseResource implements SignInResource {
     params: AuthenticateWithRedirectParams,
     navigateCallback: (url: URL | string) => void,
   ): Promise<void> => {
-    const { strategy, redirectUrl, redirectUrlComplete, identifier } = params || {};
+    const { strategy, redirectUrl, redirectUrlComplete, identifier, oidcPrompt } = params || {};
 
     const { firstFactorVerification } =
       (strategy === 'saml' || strategy === 'enterprise_sso') && this.id
         ? await this.prepareFirstFactor({
             strategy,
             redirectUrl: SignIn.clerk.buildUrlWithAuth(redirectUrl),
             actionCompleteRedirectUrl: redirectUrlComplete,
+            oidcPrompt,
           })
         : await this.create({
             strategy,
             identifier,
             redirectUrl: SignIn.clerk.buildUrlWithAuth(redirectUrl),
             actionCompleteRedirectUrl: redirectUrlComplete,
+            oidcPrompt,
           });
 
     const { status, externalVerificationRedirectURL } = firstFactorVerification;

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

@@ -306,6 +306,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       unsafeMetadata,
       emailAddress,
       legalAccepted,
+      oidcPrompt,
     } = params;
 
     const authenticateFn = () => {
@@ -316,6 +317,7 @@ export class SignUp extends BaseResource implements SignUpResource {
         unsafeMetadata,
         emailAddress,
         legalAccepted,
+        oidcPrompt,
       };
       return continueSignUp && this.id ? this.update(authParams) : this.create(authParams);
     };

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

@@ -45,12 +45,12 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps)
           }, 500);
 
           return signIn
-            .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup })
+            .authenticateWithPopup({ strategy, redirectUrl, redirectUrlComplete, popup, oidcPrompt: ctx.oidcPrompt })
             .catch(err => handleError(err, [], card.setError));
         }
 
         return signIn
-          .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete })
+          .authenticateWithRedirect({ strategy, redirectUrl, redirectUrlComplete, oidcPrompt: ctx.oidcPrompt })
           .catch(err => handleError(err, [], card.setError));
       }}
       web3Callback={strategy => {

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

@@ -387,6 +387,7 @@ function SignInStartInternal(): JSX.Element {
       strategy: 'enterprise_sso',
       redirectUrl,
       redirectUrlComplete,
+      oidcPrompt: ctx.oidcPrompt,
     });
   };
 

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

@@ -46,6 +46,7 @@ function SignUpContinueInternal() {
   const [activeCommIdentifierType, setActiveCommIdentifierType] = React.useState<ActiveIdentifier>(
     getInitialActiveIdentifier(attributes, userSettings.signUp.progressive),
   );
+  const ctx = useSignUpContext();
 
   // TODO: This form should be shared between SignUpStart and SignUpContinue
   const formState = {
@@ -179,6 +180,7 @@ function SignUpContinueInternal() {
           verifyPhonePath: './verify-phone-number',
           handleComplete: () => clerk.setActive({ session: res.createdSessionId, redirectUrl: afterSignUpUrl }),
           navigate,
+          oidcPrompt: ctx.oidcPrompt,
         }),
       )
       .catch(err => handleError(err, fieldsToSubmit, card.setError))

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

@@ -52,6 +52,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
               continueSignUp,
               unsafeMetadata: ctx.unsafeMetadata,
               legalAccepted: props.legalAccepted,
+              oidcPrompt: ctx.oidcPrompt,
             })
             .catch(err => handleError(err, [], card.setError));
         }
@@ -64,6 +65,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
             strategy,
             unsafeMetadata: ctx.unsafeMetadata,
             legalAccepted: props.legalAccepted,
+            oidcPrompt: ctx.oidcPrompt,
           })
           .catch(err => handleError(err, [], card.setError));
       }}

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

@@ -273,6 +273,7 @@ function SignUpStartInternal(): JSX.Element {
           navigate,
           redirectUrl,
           redirectUrlComplete,
+          oidcPrompt: ctx.oidcPrompt,
         }),
       )
       .catch(err => handleError(err, fieldsToSubmit, card.setError))

packages/clerk-js/src/utils/completeSignUpFlow.ts

@@ -9,6 +9,7 @@ type CompleteSignUpFlowProps = {
   handleComplete?: () => Promise<void>;
   redirectUrl?: string;
   redirectUrlComplete?: string;
+  oidcPrompt?: string;
 };
 
 export const completeSignUpFlow = ({
@@ -20,6 +21,7 @@ export const completeSignUpFlow = ({
   handleComplete,
   redirectUrl = '',
   redirectUrlComplete = '',
+  oidcPrompt,
 }: CompleteSignUpFlowProps): Promise<unknown> | undefined => {
   if (signUp.status === 'complete') {
     return handleComplete && handleComplete();
@@ -30,6 +32,7 @@ export const completeSignUpFlow = ({
         redirectUrl,
         redirectUrlComplete,
         continueSignUp: true,
+        oidcPrompt,
       });
     }