Add enterprise_sso for session reverification

Author: LauraBeatris

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

@@ -6,6 +6,7 @@ import type {
   ActClaim,
   CheckAuthorization,
   EmailCodeConfig,
+  EnterpriseSSOConfig,
   GetToken,
   GetTokenOptions,
   PhoneCodeConfig,
@@ -179,6 +180,12 @@ export class Session extends BaseResource implements SessionResource {
       case 'passkey':
         config = {};
         break;
+      case 'enterprise_sso':
+        config = {
+          emailAddressId: factor.emailAddressId,
+          enterpriseConnectionId: factor.enterpriseConnectionId,
+        } as EnterpriseSSOConfig;
+        break;
       default:
         clerkInvalidStrategy('Session.prepareFirstFactorVerification', (factor as any).strategy);
     }

packages/clerk-js/src/ui/components/UserVerification/UVFactorOneEnterpriseSSOCard.tsx

@@ -0,0 +1,29 @@
+import type { EnterpriseSSOFactor, SessionVerificationFirstFactor } from '@clerk/types';
+
+import { Card, Card } from '@/ui/elements/Card';
+import { Header } from '@/ui/elements/Header';
+
+import { localizationKeys } from '../../customizables';
+
+type UVFactorOneEnterpriseSSOCardProps = {
+  currentFactor: EnterpriseSSOFactor;
+  availableFactors: SessionVerificationFirstFactor[] | null;
+};
+
+export const UVFactorOneEnterpriseSSOCard = (_props: UVFactorOneEnterpriseSSOCardProps) => {
+  return (
+    <Card.Root>
+      <Card.Content>
+        <Header.Root showLogo>
+          {/* TODO - Display headers depending on whether there's a single or multiple connections */}
+          <Header.Title localizationKey={localizationKeys('reverification.enterprise_sso.title')} />
+          <Header.Subtitle localizationKey={localizationKeys('reverification.enterprise_sso.subtitle')} />
+        </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
+        {/* TODO -> Display option to choose enterprise SSO */}
+      </Card.Content>
+
+      <Card.Footer />
+    </Card.Root>
+  );
+};

packages/clerk-js/src/ui/components/UserVerification/UserVerificationFactorOne.tsx

@@ -15,6 +15,7 @@ import { UserVerificationFactorOnePasswordCard } from './UserVerificationFactorO
 import { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';
 import { sortByPrimaryFactor } from './utils';
 import { UVFactorOneEmailCodeCard } from './UVFactorOneEmailCodeCard';
+import { UVFactorOneEnterpriseSSOCard } from './UVFactorOneEnterpriseSSOCard';
 import { UVFactorOnePasskeysCard } from './UVFactorOnePasskeysCard';
 import { UVFactorOnePhoneCodeCard } from './UVFactorOnePhoneCodeCard';
 
@@ -37,6 +38,7 @@ const SUPPORTED_STRATEGIES: SessionVerificationFirstFactor['strategy'][] = [
   'email_code',
   'phone_code',
   'passkey',
+  'enterprise_sso',
 ] as const;
 
 export function UserVerificationFactorOneInternal(): JSX.Element | null {
@@ -155,6 +157,13 @@ export function UserVerificationFactorOneInternal(): JSX.Element | null {
       );
     case 'passkey':
       return <UVFactorOnePasskeysCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;
+    case 'enterprise_sso':
+      return (
+        <UVFactorOneEnterpriseSSOCard
+          currentFactor={currentFactor}
+          availableFactors={availableFactors}
+        />
+      );
     default:
       return <LoadingCard />;
   }

packages/types/src/factors.ts

@@ -63,6 +63,14 @@ export type SamlFactor = {
 
 export type EnterpriseSSOFactor = {
   strategy: EnterpriseSSOStrategy;
+  /**
+   * @experimental
+   */
+  enterpriseConnectionId?: string;
+  /**
+   * @experimental
+   */
+  enterpriseConnectionName?: string;
 };
 
 export type TOTPFactor = {
@@ -116,6 +124,14 @@ export type EnterpriseSSOConfig = EnterpriseSSOFactor & {
   redirectUrl: string;
   actionCompleteRedirectUrl: string;
   oidcPrompt?: string;
+  /**
+   * @experimental
+   */
+  emailAddressId?: string;
+  /**
+   * @experimental
+   */
+  enterpriseConnectionId?: string;
 };
 
 export type PhoneCodeSecondFactorConfig = {

packages/types/src/session.ts

@@ -2,6 +2,7 @@ import type {
   BackupCodeAttempt,
   EmailCodeAttempt,
   EmailCodeConfig,
+  EnterpriseSSOConfig,
   PasskeyAttempt,
   PassKeyConfig,
   PasswordAttempt,
@@ -351,7 +352,11 @@ export type SessionVerifyCreateParams = {
   level: SessionVerificationLevel;
 };
 
-export type SessionVerifyPrepareFirstFactorParams = EmailCodeConfig | PhoneCodeConfig | PassKeyConfig;
+export type SessionVerifyPrepareFirstFactorParams =
+  | EmailCodeConfig
+  | PhoneCodeConfig
+  | PassKeyConfig
+  | EnterpriseSSOConfig;
 export type SessionVerifyAttemptFirstFactorParams =
   | EmailCodeAttempt
   | PhoneCodeAttempt

packages/types/src/sessionVerification.ts

@@ -1,6 +1,7 @@
 import type {
   BackupCodeFactor,
   EmailCodeFactor,
+  EnterpriseSSOFactor,
   PasskeyFactor,
   PasswordFactor,
   PhoneCodeFactor,
@@ -49,5 +50,10 @@ export type ReverificationConfig =
 export type SessionVerificationLevel = 'first_factor' | 'second_factor' | 'multi_factor';
 export type SessionVerificationAfterMinutes = number;
 
-export type SessionVerificationFirstFactor = EmailCodeFactor | PhoneCodeFactor | PasswordFactor | PasskeyFactor;
+export type SessionVerificationFirstFactor =
+  | EmailCodeFactor
+  | PhoneCodeFactor
+  | PasswordFactor
+  | PasskeyFactor
+  | EnterpriseSSOFactor;
 export type SessionVerificationSecondFactor = PhoneCodeFactor | TOTPFactor | BackupCodeFactor;