diff --git a/.changeset/configure-sso-select-provider-step.md b/.changeset/configure-sso-select-provider-step.md
new file mode 100644
index 00000000000..d974b9f1169
--- /dev/null
+++ b/.changeset/configure-sso-select-provider-step.md
@@ -0,0 +1,10 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Implement the provider selection step of `<__experimental_ConfigureSSO />`. Renders the two SAML provider tiles (Okta Workforce and Custom SAML Provider) with real icons sourced from `img.clerk.com`, tracks the picked provider in local state, and gates `Step.Footer.Continue` on a selection. Includes a warning callout about provider lock-in and a minor `Step.Header` alignment tweak. All user-visible strings are wired through `@clerk/localizations`, with translations for every supported locale.
+
+Also extends the flow context with `provider` and `setProvider`, adds the `deriveInitialStep` helper, and wires the wizard's `initialStepId` so the configure flow remounts on the right step after a reload. Continue on Select Provider stages the chosen provider and advances to the next step; the enterprise connection is created on Verify Domain once the user's email is verified and primary.
diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
index 85082a9c074..6dcec6e4f13 100644
--- a/packages/localizations/src/ar-SA.ts
+++ b/packages/localizations/src/ar-SA.ts
@@ -186,6 +186,20 @@ export const arSA: LocalizationResource = {
navbar: {
title: 'تكوين تسجيل الدخول الموحد (SSO)',
},
+ selectProviderStep: {
+ title: 'اختر المزود',
+ subtitle: 'اختر المزود الذي ستقوم بإعداد تسجيل الدخول الموحد (SSO) له.',
+ body: {
+ title: 'اختر مزود الهوية الخاص بك',
+ description: 'سنرشدك خلال عملية الإعداد التفصيلية بعد ذلك.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'مزود SAML مخصص',
+ },
+ warning: 'بمجرد اختيار المزود لا يمكنك التغيير مرة أخرى حتى انتهاء التكوين',
+ },
verifyEmailDomainStep: {
title: 'التحقق من البريد الإلكتروني',
subtitle: 'تحقق من عنوان البريد الإلكتروني الذي تريد تفعيل اتصال المؤسسة عليه.',
diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
index 653162b600e..efb52b8899b 100644
--- a/packages/localizations/src/be-BY.ts
+++ b/packages/localizations/src/be-BY.ts
@@ -187,6 +187,20 @@ export const beBY: LocalizationResource = {
navbar: {
title: 'Налада адзінага ўваходу (SSO)',
},
+ selectProviderStep: {
+ title: 'Выберыце правайдэра',
+ subtitle: 'Выберыце правайдэра, для якога вы будзеце наладжваць SSO.',
+ body: {
+ title: 'Выберыце вашага правайдэра ідэнтыфікацыі',
+ description: 'Мы правядзём вас праз падрабязны працэс налады далей.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Карыстальніцкі правайдэр SAML',
+ },
+ warning: 'Пасля выбару правайдэра вы не зможаце змяніць яго, пакуль не скончыце канфігурацыю',
+ },
verifyEmailDomainStep: {
title: 'Пацвердзіць адрас электроннай пошты',
subtitle: 'Пацвердзіце адрас электроннай пошты, на якім вы хочаце ўключыць карпаратыўнае падключэнне.',
diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
index d03b0b6a317..1527387fc41 100644
--- a/packages/localizations/src/bg-BG.ts
+++ b/packages/localizations/src/bg-BG.ts
@@ -188,6 +188,20 @@ export const bgBG: LocalizationResource = {
navbar: {
title: 'Конфигуриране на единен вход (SSO)',
},
+ selectProviderStep: {
+ title: 'Изберете доставчик',
+ subtitle: 'Изберете доставчика, за който ще конфигурирате SSO.',
+ body: {
+ title: 'Изберете вашия доставчик на идентичност',
+ description: 'Ще ви преведем през подробния процес на настройка след това.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Персонализиран SAML доставчик',
+ },
+ warning: 'След като изберете доставчик, не можете да го промените, докато конфигурацията не приключи',
+ },
verifyEmailDomainStep: {
title: 'Потвърди имейл адреса',
subtitle: 'Потвърдете имейл адреса, на който искате да активирате корпоративната връзка.',
diff --git a/packages/localizations/src/bn-IN.ts b/packages/localizations/src/bn-IN.ts
index 2993b385f7c..b9edf8bda47 100644
--- a/packages/localizations/src/bn-IN.ts
+++ b/packages/localizations/src/bn-IN.ts
@@ -186,6 +186,20 @@ export const bnIN: LocalizationResource = {
navbar: {
title: 'একক সাইন-অন (SSO) কনফিগার করুন',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'ইমেইল ঠিকানা যাচাই করুন',
subtitle: 'যে ইমেইল ঠিকানায় আপনি এন্টারপ্রাইজ সংযোগ সক্রিয় করতে চান তা যাচাই করুন।',
diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
index b6808394db8..b23d8afccf0 100644
--- a/packages/localizations/src/ca-ES.ts
+++ b/packages/localizations/src/ca-ES.ts
@@ -194,6 +194,20 @@ export const caES: LocalizationResource = {
navbar: {
title: "Configura l'inici de sessió únic (SSO)",
},
+ selectProviderStep: {
+ title: 'Seleccioneu un proveïdor',
+ subtitle: 'Seleccioneu el proveïdor per al qual configurareu SSO.',
+ body: {
+ title: "Seleccioneu el vostre proveïdor d'identitat",
+ description: 'Us guiarem pel procés de configuració detallat a continuació.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Proveïdor SAML personalitzat',
+ },
+ warning: 'Un cop seleccionat un proveïdor no podreu canviar-lo fins que la configuració hagi finalitzat',
+ },
verifyEmailDomainStep: {
title: 'Verifica el correu electrònic',
subtitle: "Verifica l'adreça de correu electrònic on vols habilitar la connexió empresarial.",
diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
index c640eaaa726..178631aedd9 100644
--- a/packages/localizations/src/cs-CZ.ts
+++ b/packages/localizations/src/cs-CZ.ts
@@ -190,6 +190,20 @@ export const csCZ: LocalizationResource = {
navbar: {
title: 'Nastavit jednotné přihlášení (SSO)',
},
+ selectProviderStep: {
+ title: 'Vyberte poskytovatele',
+ subtitle: 'Vyberte poskytovatele, pro kterého budete nastavovat SSO.',
+ body: {
+ title: 'Vyberte svého poskytovatele identity',
+ description: 'Provedeme vás dále podrobným procesem nastavení.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Vlastní poskytovatel SAML',
+ },
+ warning: 'Jakmile vyberete poskytovatele, nelze ho změnit, dokud nebude konfigurace dokončena',
+ },
verifyEmailDomainStep: {
title: 'Ověřit e-mailovou adresu',
subtitle: 'Ověřte e-mailovou adresu, na které chcete povolit podnikové připojení.',
diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
index aacdf055c72..ce1fedbff78 100644
--- a/packages/localizations/src/da-DK.ts
+++ b/packages/localizations/src/da-DK.ts
@@ -187,6 +187,20 @@ export const daDK: LocalizationResource = {
navbar: {
title: 'Konfigurer single sign-on (SSO)',
},
+ selectProviderStep: {
+ title: 'Vælg udbyder',
+ subtitle: 'Vælg den udbyder, du vil opsætte SSO for.',
+ body: {
+ title: 'Vælg din identitetsudbyder',
+ description: 'Vi guider dig gennem den detaljerede opsætningsproces næste gang.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Brugerdefineret SAML-udbyder',
+ },
+ warning: 'Når en udbyder er valgt, kan du ikke ændre den, før konfigurationen er færdig',
+ },
verifyEmailDomainStep: {
title: 'Bekræft e-mailadresse',
subtitle: 'Bekræft den e-mailadresse, du vil aktivere virksomhedsforbindelsen på.',
diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
index e81362695a8..ce71c1cfd2d 100644
--- a/packages/localizations/src/de-DE.ts
+++ b/packages/localizations/src/de-DE.ts
@@ -193,6 +193,21 @@ export const deDE: LocalizationResource = {
navbar: {
title: 'Single Sign-On (SSO) konfigurieren',
},
+ selectProviderStep: {
+ title: 'Anbieter auswählen',
+ subtitle: 'Wählen Sie den Anbieter, für den Sie SSO einrichten möchten.',
+ body: {
+ title: 'Wählen Sie Ihren Identitätsanbieter',
+ description: 'Wir führen Sie als nächstes durch den detaillierten Einrichtungsprozess.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Benutzerdefinierter SAML-Anbieter',
+ },
+ warning:
+ 'Sobald ein Anbieter ausgewählt ist, können Sie ihn nicht mehr ändern, bis die Konfiguration abgeschlossen ist',
+ },
verifyEmailDomainStep: {
title: 'E-Mail-Adresse verifizieren',
subtitle: 'Verifizieren Sie die E-Mail-Adresse, für die Sie die Unternehmensverbindung aktivieren möchten.',
diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
index 3cc94c52c47..ce9feccac77 100644
--- a/packages/localizations/src/el-GR.ts
+++ b/packages/localizations/src/el-GR.ts
@@ -187,6 +187,20 @@ export const elGR: LocalizationResource = {
navbar: {
title: 'Διαμόρφωση Ενιαίας Σύνδεσης (SSO)',
},
+ selectProviderStep: {
+ title: 'Επιλέξτε πάροχο',
+ subtitle: 'Επιλέξτε τον πάροχο για τον οποίο θα ρυθμίσετε SSO.',
+ body: {
+ title: 'Επιλέξτε τον πάροχο ταυτότητάς σας',
+ description: 'Θα σας καθοδηγήσουμε στη λεπτομερή διαδικασία ρύθμισης στη συνέχεια.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Προσαρμοσμένος πάροχος SAML',
+ },
+ warning: 'Μόλις επιλεγεί ένας πάροχος δεν μπορείτε να τον αλλάξετε μέχρι να ολοκληρωθεί η ρύθμιση',
+ },
verifyEmailDomainStep: {
title: 'Επαλήθευση διεύθυνσης email',
subtitle: 'Επαληθεύστε τη διεύθυνση email στην οποία θέλετε να ενεργοποιήσετε τη σύνδεση επιχείρησης.',
diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
index 86357722efc..7b1bb444203 100644
--- a/packages/localizations/src/en-GB.ts
+++ b/packages/localizations/src/en-GB.ts
@@ -187,6 +187,20 @@ export const enGB: LocalizationResource = {
navbar: {
title: 'Configure Single Sign-On (SSO)',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to set up SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'Verify email address',
subtitle: 'Verify the email address you want to enable the enterprise connection on.',
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 22a5e5f3012..4dc0dcd1bdc 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -209,6 +209,20 @@ export const enUS: LocalizationResource = {
navbar: {
title: 'Configure Single Sign-On (SSO)',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'Verify email address',
subtitle: 'Verify the email address you want to enable the enterprise connection on.',
diff --git a/packages/localizations/src/es-CR.ts b/packages/localizations/src/es-CR.ts
index ac66e72b102..e70fdb7d086 100644
--- a/packages/localizations/src/es-CR.ts
+++ b/packages/localizations/src/es-CR.ts
@@ -187,6 +187,20 @@ export const esCR: LocalizationResource = {
navbar: {
title: 'Configurar inicio de sesión único (SSO)',
},
+ selectProviderStep: {
+ title: 'Seleccionar proveedor',
+ subtitle: 'Selecciona el proveedor para el que vas a configurar SSO.',
+ body: {
+ title: 'Selecciona tu proveedor de identidad',
+ description: 'Te guiaremos a través del proceso de configuración detallado a continuación.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Proveedor SAML personalizado',
+ },
+ warning: 'Una vez que se selecciona un proveedor no puedes cambiarlo hasta que termine la configuración',
+ },
verifyEmailDomainStep: {
title: 'Verificar correo electrónico',
subtitle: 'Verifica la dirección de correo electrónico en la que deseas habilitar la conexión empresarial.',
diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
index c5582b1e6bf..c22b5657186 100644
--- a/packages/localizations/src/es-ES.ts
+++ b/packages/localizations/src/es-ES.ts
@@ -193,6 +193,20 @@ export const esES: LocalizationResource = {
navbar: {
title: 'Configurar inicio de sesión único (SSO)',
},
+ selectProviderStep: {
+ title: 'Seleccionar proveedor',
+ subtitle: 'Selecciona el proveedor para el que vas a configurar SSO.',
+ body: {
+ title: 'Selecciona tu proveedor de identidad',
+ description: 'Te guiaremos a través del proceso de configuración detallado a continuación.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Proveedor SAML personalizado',
+ },
+ warning: 'Una vez seleccionado un proveedor no podrás cambiarlo hasta que finalice la configuración',
+ },
verifyEmailDomainStep: {
title: 'Verificar correo electrónico',
subtitle: 'Verifica la dirección de correo electrónico en la que deseas habilitar la conexión empresarial.',
diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
index 4567eed9c7d..ffac231c140 100644
--- a/packages/localizations/src/es-MX.ts
+++ b/packages/localizations/src/es-MX.ts
@@ -188,6 +188,20 @@ export const esMX: LocalizationResource = {
navbar: {
title: 'Configurar inicio de sesión único (SSO)',
},
+ selectProviderStep: {
+ title: 'Seleccionar proveedor',
+ subtitle: 'Selecciona el proveedor para el que vas a configurar SSO.',
+ body: {
+ title: 'Selecciona tu proveedor de identidad',
+ description: 'Te guiaremos a través del proceso de configuración detallado a continuación.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Proveedor SAML personalizado',
+ },
+ warning: 'Una vez que se selecciona un proveedor no puedes cambiarlo hasta que termine la configuración',
+ },
verifyEmailDomainStep: {
title: 'Verificar correo electrónico',
subtitle: 'Verifica la dirección de correo electrónico en la que deseas habilitar la conexión empresarial.',
diff --git a/packages/localizations/src/es-UY.ts b/packages/localizations/src/es-UY.ts
index c1ed2591d59..080f6b7db17 100644
--- a/packages/localizations/src/es-UY.ts
+++ b/packages/localizations/src/es-UY.ts
@@ -187,6 +187,20 @@ export const esUY: LocalizationResource = {
navbar: {
title: 'Configurar inicio de sesión único (SSO)',
},
+ selectProviderStep: {
+ title: 'Seleccionar proveedor',
+ subtitle: 'Seleccioná el proveedor para el que vas a configurar SSO.',
+ body: {
+ title: 'Seleccioná tu proveedor de identidad',
+ description: 'Te guiaremos a través del proceso de configuración detallado a continuación.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Proveedor SAML personalizado',
+ },
+ warning: 'Una vez que se selecciona un proveedor no podés cambiarlo hasta que termine la configuración',
+ },
verifyEmailDomainStep: {
title: 'Verificar correo electrónico',
subtitle: 'Verificá la dirección de correo electrónico en la que querés habilitar la conexión empresarial.',
diff --git a/packages/localizations/src/fa-IR.ts b/packages/localizations/src/fa-IR.ts
index 3966a021f7f..4b7b7f17638 100644
--- a/packages/localizations/src/fa-IR.ts
+++ b/packages/localizations/src/fa-IR.ts
@@ -191,6 +191,20 @@ export const faIR: LocalizationResource = {
navbar: {
title: 'پیکربندی ورود یکپارچه (SSO)',
},
+ selectProviderStep: {
+ title: 'ارائهدهنده را انتخاب کنید',
+ subtitle: 'ارائهدهندهای را که میخواهید SSO را برای آن راهاندازی کنید، انتخاب کنید.',
+ body: {
+ title: 'ارائهدهنده هویت خود را انتخاب کنید',
+ description: 'در ادامه شما را در فرآیند راهاندازی دقیق راهنمایی خواهیم کرد.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'ارائهدهنده SAML سفارشی',
+ },
+ warning: 'پس از انتخاب یک ارائهدهنده، نمیتوانید آن را تا پایان پیکربندی تغییر دهید',
+ },
verifyEmailDomainStep: {
title: 'تأیید آدرس ایمیل',
subtitle: 'آدرس ایمیلی را که میخواهید اتصال سازمانی روی آن فعال شود، تأیید کنید.',
diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
index a8e0b80c12a..185a0a57e4e 100644
--- a/packages/localizations/src/fi-FI.ts
+++ b/packages/localizations/src/fi-FI.ts
@@ -214,6 +214,20 @@ export const fiFI: LocalizationResource = {
navbar: {
title: 'Määritä kertakirjautuminen (SSO)',
},
+ selectProviderStep: {
+ title: 'Valitse palveluntarjoaja',
+ subtitle: 'Valitse palveluntarjoaja, jolle määrität SSO:n.',
+ body: {
+ title: 'Valitse henkilöllisyyden tarjoaja',
+ description: 'Opastamme sinut yksityiskohtaisen määritysprosessin läpi seuraavaksi.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Mukautettu SAML-palveluntarjoaja',
+ },
+ warning: 'Kun palveluntarjoaja on valittu, et voi vaihtaa sitä ennen kuin määritys on valmis',
+ },
verifyEmailDomainStep: {
title: 'Vahvista sähköpostiosoite',
subtitle: 'Vahvista sähköpostiosoite, jolle haluat ottaa yritysyhteyden käyttöön.',
diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
index f7b7ed79390..d0748f7cc2a 100644
--- a/packages/localizations/src/fr-FR.ts
+++ b/packages/localizations/src/fr-FR.ts
@@ -195,6 +195,21 @@ export const frFR: LocalizationResource = {
navbar: {
title: "Configurer l'authentification unique (SSO)",
},
+ selectProviderStep: {
+ title: 'Sélectionner un fournisseur',
+ subtitle: 'Sélectionnez le fournisseur pour lequel vous allez configurer le SSO.',
+ body: {
+ title: "Sélectionnez votre fournisseur d'identité",
+ description: 'Nous vous guiderons ensuite à travers le processus de configuration détaillé.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Fournisseur SAML personnalisé',
+ },
+ warning:
+ "Une fois un fournisseur sélectionné, vous ne pourrez plus en changer jusqu'à la fin de la configuration",
+ },
verifyEmailDomainStep: {
title: "Vérifier l'adresse e-mail",
subtitle: "Vérifiez l'adresse e-mail sur laquelle vous souhaitez activer la connexion entreprise.",
diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
index 8367699941b..789a1ffd158 100644
--- a/packages/localizations/src/he-IL.ts
+++ b/packages/localizations/src/he-IL.ts
@@ -186,6 +186,20 @@ export const heIL: LocalizationResource = {
navbar: {
title: 'הגדרת כניסה אחידה (SSO)',
},
+ selectProviderStep: {
+ title: 'בחר ספק',
+ subtitle: 'בחר את הספק שעבורו תגדיר SSO.',
+ body: {
+ title: 'בחר את ספק הזהות שלך',
+ description: 'נדריך אותך בתהליך ההגדרה המפורט בהמשך.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'ספק SAML מותאם אישית',
+ },
+ warning: 'לאחר בחירת ספק לא ניתן לשנות אותו עד לסיום ההגדרה',
+ },
verifyEmailDomainStep: {
title: 'אימות כתובת אימייל',
subtitle: 'אמת את כתובת האימייל שעליה ברצונך להפעיל את חיבור הארגון.',
diff --git a/packages/localizations/src/hi-IN.ts b/packages/localizations/src/hi-IN.ts
index 27e73fafa6a..c3aceb45dab 100644
--- a/packages/localizations/src/hi-IN.ts
+++ b/packages/localizations/src/hi-IN.ts
@@ -187,6 +187,20 @@ export const hiIN: LocalizationResource = {
navbar: {
title: 'सिंगल साइन-ऑन (SSO) कॉन्फ़िगर करें',
},
+ selectProviderStep: {
+ title: 'प्रदाता चुनें',
+ subtitle: 'उस प्रदाता का चयन करें जिसके लिए आप SSO सेट अप कर रहे हैं।',
+ body: {
+ title: 'अपना पहचान प्रदाता चुनें',
+ description: 'हम आपको आगे विस्तृत सेटअप प्रक्रिया के माध्यम से मार्गदर्शन करेंगे।',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'कस्टम SAML प्रदाता',
+ },
+ warning: 'एक बार प्रदाता का चयन करने के बाद आप कॉन्फ़िगरेशन समाप्त होने तक इसे बदल नहीं सकते',
+ },
verifyEmailDomainStep: {
title: 'ईमेल पता सत्यापित करें',
subtitle: 'उस ईमेल पते को सत्यापित करें जिस पर आप एंटरप्राइज़ कनेक्शन सक्षम करना चाहते हैं।',
diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
index bf2b4c9d3b9..09431373581 100644
--- a/packages/localizations/src/hr-HR.ts
+++ b/packages/localizations/src/hr-HR.ts
@@ -216,6 +216,20 @@ export const hrHR: LocalizationResource = {
navbar: {
title: 'Konfiguriraj jedinstvenu prijavu (SSO)',
},
+ selectProviderStep: {
+ title: 'Odaberite pružatelja',
+ subtitle: 'Odaberite pružatelja za kojeg ćete postaviti SSO.',
+ body: {
+ title: 'Odaberite svog pružatelja identiteta',
+ description: 'Vodit ćemo vas kroz detaljan proces postavljanja u nastavku.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Prilagođeni SAML pružatelj',
+ },
+ warning: 'Nakon odabira pružatelja ne možete ga ponovno mijenjati dok konfiguracija ne završi',
+ },
verifyEmailDomainStep: {
title: 'Potvrdi e-mail adresu',
subtitle: 'Potvrdite e-mail adresu na kojoj želite omogućiti poslovnu vezu.',
diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
index ba0d6eebe85..ba64af90d8f 100644
--- a/packages/localizations/src/hu-HU.ts
+++ b/packages/localizations/src/hu-HU.ts
@@ -216,6 +216,20 @@ export const huHU: LocalizationResource = {
navbar: {
title: 'Egyszeri bejelentkezés (SSO) beállítása',
},
+ selectProviderStep: {
+ title: 'Szolgáltató kiválasztása',
+ subtitle: 'Válassza ki azt a szolgáltatót, amelyhez beállítja az SSO-t.',
+ body: {
+ title: 'Válassza ki az identitásszolgáltatóját',
+ description: 'Ezután végigvezetjük a részletes beállítási folyamaton.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Egyéni SAML szolgáltató',
+ },
+ warning: 'Miután kiválasztotta a szolgáltatót, nem módosíthatja, amíg a konfiguráció be nem fejeződik',
+ },
verifyEmailDomainStep: {
title: 'E-mail-cím megerősítése',
subtitle: 'Erősítse meg azt az e-mail-címet, amelyen engedélyezni szeretné a vállalati kapcsolatot.',
diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
index 275c0ae0e3f..f3134584995 100644
--- a/packages/localizations/src/id-ID.ts
+++ b/packages/localizations/src/id-ID.ts
@@ -186,6 +186,20 @@ export const idID: LocalizationResource = {
navbar: {
title: 'Konfigurasi Single Sign-On (SSO)',
},
+ selectProviderStep: {
+ title: 'Pilih penyedia',
+ subtitle: 'Pilih penyedia yang akan Anda atur untuk SSO.',
+ body: {
+ title: 'Pilih penyedia identitas Anda',
+ description: 'Kami akan memandu Anda melalui proses penyiapan terperinci berikutnya.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Penyedia SAML Khusus',
+ },
+ warning: 'Setelah penyedia dipilih, Anda tidak dapat mengubahnya lagi sampai konfigurasi selesai',
+ },
verifyEmailDomainStep: {
title: 'Verifikasi alamat email',
subtitle: 'Verifikasi alamat email yang ingin Anda aktifkan koneksi enterprise-nya.',
diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
index 3b607d8b4c1..a480ec7538d 100644
--- a/packages/localizations/src/is-IS.ts
+++ b/packages/localizations/src/is-IS.ts
@@ -215,6 +215,20 @@ export const isIS: LocalizationResource = {
navbar: {
title: 'Stilla einnar innskráningar (SSO)',
},
+ selectProviderStep: {
+ title: 'Veldu þjónustuaðila',
+ subtitle: 'Veldu þjónustuaðilann sem þú ætlar að setja upp SSO fyrir.',
+ body: {
+ title: 'Veldu auðkennisþjónustuaðila þinn',
+ description: 'Við munum leiðbeina þér í gegnum ítarlegt uppsetningarferli næst.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Sérsniðinn SAML þjónustuaðili',
+ },
+ warning: 'Þegar þjónustuaðili hefur verið valinn er ekki hægt að breyta aftur fyrr en stillingu er lokið',
+ },
verifyEmailDomainStep: {
title: 'Staðfesta tölvupóstfang',
subtitle: 'Staðfestu tölvupóstfangið sem þú vilt virkja fyrirtækjatenginguna á.',
diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
index 730f916f0a5..9e1b31419c4 100644
--- a/packages/localizations/src/it-IT.ts
+++ b/packages/localizations/src/it-IT.ts
@@ -193,6 +193,20 @@ export const itIT: LocalizationResource = {
navbar: {
title: 'Configura Single Sign-On (SSO)',
},
+ selectProviderStep: {
+ title: 'Seleziona provider',
+ subtitle: "Seleziona il provider per cui configurerai l'SSO.",
+ body: {
+ title: 'Seleziona il tuo provider di identità',
+ description: 'Ti guideremo nel processo di configurazione dettagliato successivamente.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Provider SAML personalizzato',
+ },
+ warning: 'Una volta selezionato un provider non potrai cambiarlo fino al termine della configurazione',
+ },
verifyEmailDomainStep: {
title: 'Verifica indirizzo email',
subtitle: "Verifica l'indirizzo email su cui vuoi abilitare la connessione aziendale.",
diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
index ce0156d0756..7c2cffdf60d 100644
--- a/packages/localizations/src/ja-JP.ts
+++ b/packages/localizations/src/ja-JP.ts
@@ -197,6 +197,20 @@ export const jaJP: LocalizationResource = {
navbar: {
title: 'シングルサインオン(SSO)を設定',
},
+ selectProviderStep: {
+ title: 'プロバイダーを選択',
+ subtitle: 'SSOを設定するプロバイダーを選択してください。',
+ body: {
+ title: 'IDプロバイダーを選択してください',
+ description: '次に、詳細な設定プロセスをご案内します。',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'カスタムSAMLプロバイダー',
+ },
+ warning: 'プロバイダーを選択すると、設定が完了するまで変更できません',
+ },
verifyEmailDomainStep: {
title: 'メールアドレスを確認',
subtitle: 'エンタープライズ接続を有効にしたいメールアドレスを確認します。',
diff --git a/packages/localizations/src/kk-KZ.ts b/packages/localizations/src/kk-KZ.ts
index 6ecf686962e..62ead50b941 100644
--- a/packages/localizations/src/kk-KZ.ts
+++ b/packages/localizations/src/kk-KZ.ts
@@ -186,6 +186,20 @@ export const kkKZ: LocalizationResource = {
navbar: {
title: 'Бірыңғай кіруді конфигурациялау (SSO)',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'Электрондық пошта мекенжайын растау',
subtitle: 'Кәсіпорын байланысын іске қосқыңыз келетін электрондық пошта мекенжайын растаңыз.',
diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
index f61a3517ee0..4685adf6c52 100644
--- a/packages/localizations/src/ko-KR.ts
+++ b/packages/localizations/src/ko-KR.ts
@@ -193,6 +193,20 @@ export const koKR: LocalizationResource = {
navbar: {
title: '싱글 사인온(SSO) 구성',
},
+ selectProviderStep: {
+ title: '공급자 선택',
+ subtitle: 'SSO를 설정할 공급자를 선택하세요.',
+ body: {
+ title: 'ID 공급자를 선택하세요',
+ description: '다음 단계에서 자세한 설정 프로세스를 안내해 드립니다.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: '사용자 지정 SAML 공급자',
+ },
+ warning: '공급자를 선택하면 구성이 완료될 때까지 다시 변경할 수 없습니다',
+ },
verifyEmailDomainStep: {
title: '이메일 주소 확인',
subtitle: '엔터프라이즈 연결을 활성화하려는 이메일 주소를 확인하세요.',
diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts
index 8391fbc8d19..9e0f97dd220 100644
--- a/packages/localizations/src/mn-MN.ts
+++ b/packages/localizations/src/mn-MN.ts
@@ -186,6 +186,20 @@ export const mnMN: LocalizationResource = {
navbar: {
title: 'Нэгдсэн нэвтрэлт (SSO) тохируулах',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'И-мэйл хаягийг баталгаажуулах',
subtitle: 'Та байгууллагын холболтыг идэвхжүүлэхийг хүсэж буй и-мэйл хаягийг баталгаажуулна уу.',
diff --git a/packages/localizations/src/ms-MY.ts b/packages/localizations/src/ms-MY.ts
index 4325ec06013..fab1a26e769 100644
--- a/packages/localizations/src/ms-MY.ts
+++ b/packages/localizations/src/ms-MY.ts
@@ -186,6 +186,20 @@ export const msMY: LocalizationResource = {
navbar: {
title: 'Konfigurasi Log Masuk Tunggal (SSO)',
},
+ selectProviderStep: {
+ title: 'Pilih pembekal',
+ subtitle: 'Pilih pembekal yang anda akan sediakan SSO untuknya.',
+ body: {
+ title: 'Pilih pembekal identiti anda',
+ description: 'Kami akan membimbing anda melalui proses persediaan terperinci seterusnya.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Pembekal SAML Tersuai',
+ },
+ warning: 'Setelah pembekal dipilih anda tidak boleh menukar lagi sehingga konfigurasi selesai',
+ },
verifyEmailDomainStep: {
title: 'Sahkan alamat e-mel',
subtitle: 'Sahkan alamat e-mel yang anda ingin dayakan sambungan enterprise.',
diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
index d6d1b983b61..d1c4e530950 100644
--- a/packages/localizations/src/nb-NO.ts
+++ b/packages/localizations/src/nb-NO.ts
@@ -215,6 +215,20 @@ export const nbNO: LocalizationResource = {
navbar: {
title: 'Konfigurer enkeltpålogging (SSO)',
},
+ selectProviderStep: {
+ title: 'Velg leverandør',
+ subtitle: 'Velg leverandøren du skal konfigurere SSO for.',
+ body: {
+ title: 'Velg din identitetsleverandør',
+ description: 'Vi veileder deg gjennom den detaljerte konfigurasjonsprosessen neste gang.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Egendefinert SAML-leverandør',
+ },
+ warning: 'Når en leverandør er valgt, kan du ikke endre igjen før konfigurasjonen er ferdig',
+ },
verifyEmailDomainStep: {
title: 'Verifiser e-postadresse',
subtitle: 'Verifiser e-postadressen du vil aktivere virksomhetstilkoblingen på.',
diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts
index 03d19bd0fc1..7968d1580a5 100644
--- a/packages/localizations/src/nl-BE.ts
+++ b/packages/localizations/src/nl-BE.ts
@@ -187,6 +187,20 @@ export const nlBE: LocalizationResource = {
navbar: {
title: 'Single sign-on (SSO) configureren',
},
+ selectProviderStep: {
+ title: 'Provider selecteren',
+ subtitle: 'Selecteer de provider waarvoor je SSO gaat instellen.',
+ body: {
+ title: 'Selecteer je identiteitsprovider',
+ description: 'We begeleiden je hierna door het gedetailleerde installatieproces.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Aangepaste SAML-provider',
+ },
+ warning: 'Zodra een provider is geselecteerd, kun je deze niet meer wijzigen totdat de configuratie is voltooid',
+ },
verifyEmailDomainStep: {
title: 'E-mailadres verifiëren',
subtitle: 'Verifieer het e-mailadres waarop u de enterprise-verbinding wilt inschakelen.',
diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
index 2826663eac4..ccdf24d00c2 100644
--- a/packages/localizations/src/nl-NL.ts
+++ b/packages/localizations/src/nl-NL.ts
@@ -187,6 +187,20 @@ export const nlNL: LocalizationResource = {
navbar: {
title: 'Single sign-on (SSO) configureren',
},
+ selectProviderStep: {
+ title: 'Provider selecteren',
+ subtitle: 'Selecteer de provider waarvoor je SSO gaat instellen.',
+ body: {
+ title: 'Selecteer je identiteitsprovider',
+ description: 'We begeleiden je hierna door het gedetailleerde installatieproces.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Aangepaste SAML-provider',
+ },
+ warning: 'Zodra een provider is geselecteerd, kun je deze niet meer wijzigen totdat de configuratie is voltooid',
+ },
verifyEmailDomainStep: {
title: 'E-mailadres verifiëren',
subtitle: 'Verifieer het e-mailadres waarop je de enterprise-verbinding wilt inschakelen.',
diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
index 23dbbe83887..3899bb9868b 100644
--- a/packages/localizations/src/pl-PL.ts
+++ b/packages/localizations/src/pl-PL.ts
@@ -187,6 +187,20 @@ export const plPL: LocalizationResource = {
navbar: {
title: 'Skonfiguruj logowanie jednokrotne (SSO)',
},
+ selectProviderStep: {
+ title: 'Wybierz dostawcę',
+ subtitle: 'Wybierz dostawcę, dla którego skonfigurujesz SSO.',
+ body: {
+ title: 'Wybierz swojego dostawcę tożsamości',
+ description: 'Następnie przeprowadzimy Cię przez szczegółowy proces konfiguracji.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Niestandardowy dostawca SAML',
+ },
+ warning: 'Po wybraniu dostawcy nie można go ponownie zmienić aż do zakończenia konfiguracji',
+ },
verifyEmailDomainStep: {
title: 'Zweryfikuj adres e-mail',
subtitle: 'Zweryfikuj adres e-mail, na którym chcesz włączyć połączenie firmowe.',
diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
index 45031976fe8..95be31e570e 100644
--- a/packages/localizations/src/pt-BR.ts
+++ b/packages/localizations/src/pt-BR.ts
@@ -193,6 +193,21 @@ export const ptBR: LocalizationResource = {
navbar: {
title: 'Configurar logon único (SSO)',
},
+ selectProviderStep: {
+ title: 'Selecionar provedor',
+ subtitle: 'Selecione o provedor para o qual você vai configurar o SSO.',
+ body: {
+ title: 'Selecione seu provedor de identidade',
+ description: 'Iremos guiá-lo pelo processo de configuração detalhado em seguida.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Provedor SAML personalizado',
+ },
+ warning:
+ 'Depois que um provedor for selecionado, você não poderá alterá-lo até que a configuração seja concluída',
+ },
verifyEmailDomainStep: {
title: 'Verificar endereço de e-mail',
subtitle: 'Verifique o endereço de e-mail no qual deseja habilitar a conexão empresarial.',
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
index be2a815585f..d3ae85a9936 100644
--- a/packages/localizations/src/pt-PT.ts
+++ b/packages/localizations/src/pt-PT.ts
@@ -194,6 +194,20 @@ export const ptPT: LocalizationResource = {
navbar: {
title: 'Configurar autenticação única (SSO)',
},
+ selectProviderStep: {
+ title: 'Selecionar fornecedor',
+ subtitle: 'Selecione o fornecedor para o qual vai configurar o SSO.',
+ body: {
+ title: 'Selecione o seu fornecedor de identidade',
+ description: 'Iremos guiá-lo pelo processo de configuração detalhado a seguir.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Fornecedor SAML personalizado',
+ },
+ warning: 'Depois de um fornecedor ser selecionado não pode ser alterado até que a configuração esteja terminada',
+ },
verifyEmailDomainStep: {
title: 'Verificar endereço de e-mail',
subtitle: 'Verifique o endereço de e-mail no qual pretende ativar a ligação empresarial.',
diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
index ca4992050cf..8e391103126 100644
--- a/packages/localizations/src/ro-RO.ts
+++ b/packages/localizations/src/ro-RO.ts
@@ -193,6 +193,20 @@ export const roRO: LocalizationResource = {
navbar: {
title: 'Configurați autentificarea unică (SSO)',
},
+ selectProviderStep: {
+ title: 'Selectați furnizorul',
+ subtitle: 'Selectați furnizorul pentru care veți configura SSO.',
+ body: {
+ title: 'Selectați furnizorul de identitate',
+ description: 'Vă vom ghida în continuare prin procesul de configurare detaliat.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Furnizor SAML personalizat',
+ },
+ warning: 'Odată ce un furnizor este selectat, nu îl puteți schimba până când configurația nu este finalizată',
+ },
verifyEmailDomainStep: {
title: 'Verifică adresa de e-mail',
subtitle: 'Verifică adresa de e-mail pe care dorești să activezi conexiunea enterprise.',
diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
index 4436c4d2d83..67d5a703c76 100644
--- a/packages/localizations/src/ru-RU.ts
+++ b/packages/localizations/src/ru-RU.ts
@@ -187,6 +187,20 @@ export const ruRU: LocalizationResource = {
navbar: {
title: 'Настроить единый вход (SSO)',
},
+ selectProviderStep: {
+ title: 'Выберите поставщика',
+ subtitle: 'Выберите поставщика, для которого вы будете настраивать SSO.',
+ body: {
+ title: 'Выберите вашего поставщика идентификации',
+ description: 'Далее мы проведём вас через подробный процесс настройки.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Пользовательский поставщик SAML',
+ },
+ warning: 'После выбора поставщика вы не сможете изменить его до завершения настройки',
+ },
verifyEmailDomainStep: {
title: 'Подтвердить адрес электронной почты',
subtitle: 'Подтвердите адрес электронной почты, для которого вы хотите включить корпоративное подключение.',
diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
index 643190d6d97..0eacd3d4d30 100644
--- a/packages/localizations/src/sk-SK.ts
+++ b/packages/localizations/src/sk-SK.ts
@@ -187,6 +187,20 @@ export const skSK: LocalizationResource = {
navbar: {
title: 'Nastaviť jednotné prihlasovanie (SSO)',
},
+ selectProviderStep: {
+ title: 'Vyberte poskytovateľa',
+ subtitle: 'Vyberte poskytovateľa, pre ktorého budete nastavovať SSO.',
+ body: {
+ title: 'Vyberte si svojho poskytovateľa identity',
+ description: 'Následne vás prevedieme podrobným procesom nastavenia.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Vlastný poskytovateľ SAML',
+ },
+ warning: 'Po výbere poskytovateľa ho nemôžete zmeniť, kým sa konfigurácia neukončí',
+ },
verifyEmailDomainStep: {
title: 'Overiť e-mailovú adresu',
subtitle: 'Overte e-mailovú adresu, na ktorej chcete povoliť podnikové pripojenie.',
diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts
index 17c67d348c2..4054cba9010 100644
--- a/packages/localizations/src/sr-RS.ts
+++ b/packages/localizations/src/sr-RS.ts
@@ -187,6 +187,20 @@ export const srRS: LocalizationResource = {
navbar: {
title: 'Konfiguriši jedinstvenu prijavu (SSO)',
},
+ selectProviderStep: {
+ title: 'Izaberite provajdera',
+ subtitle: 'Izaberite provajdera za koga ćete podesiti SSO.',
+ body: {
+ title: 'Izaberite svog provajdera identiteta',
+ description: 'Vodićemo vas kroz detaljan proces podešavanja u nastavku.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Prilagođeni SAML provajder',
+ },
+ warning: 'Kada se provajder izabere, ne možete ga ponovo menjati dok se konfiguracija ne završi',
+ },
verifyEmailDomainStep: {
title: 'Potvrdi adresu e-pošte',
subtitle: 'Potvrdite adresu e-pošte na kojoj želite da omogućite enterprise konekciju.',
diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
index 4e4947a0b3f..9e810473faf 100644
--- a/packages/localizations/src/sv-SE.ts
+++ b/packages/localizations/src/sv-SE.ts
@@ -186,6 +186,20 @@ export const svSE: LocalizationResource = {
navbar: {
title: 'Konfigurera enkel inloggning (SSO)',
},
+ selectProviderStep: {
+ title: 'Välj leverantör',
+ subtitle: 'Välj den leverantör du ska konfigurera SSO för.',
+ body: {
+ title: 'Välj din identitetsleverantör',
+ description: 'Vi guidar dig sedan genom den detaljerade konfigurationsprocessen.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Anpassad SAML-leverantör',
+ },
+ warning: 'När en leverantör har valts kan du inte ändra igen förrän konfigurationen är klar',
+ },
verifyEmailDomainStep: {
title: 'Verifiera e-postadress',
subtitle: 'Verifiera e-postadressen som du vill aktivera företagsanslutningen för.',
diff --git a/packages/localizations/src/ta-IN.ts b/packages/localizations/src/ta-IN.ts
index 81e4376254c..4db59aa9ec5 100644
--- a/packages/localizations/src/ta-IN.ts
+++ b/packages/localizations/src/ta-IN.ts
@@ -186,6 +186,20 @@ export const taIN: LocalizationResource = {
navbar: {
title: 'ஒற்றை உள்நுழைவை (SSO) உள்ளமை',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'மின்னஞ்சல் முகவரியை சரிபார்க்கவும்',
subtitle: 'நீங்கள் நிறுவன இணைப்பை இயக்க விரும்பும் மின்னஞ்சல் முகவரியை சரிபார்க்கவும்.',
diff --git a/packages/localizations/src/te-IN.ts b/packages/localizations/src/te-IN.ts
index 968b6cbee4b..d8cc6928bd9 100644
--- a/packages/localizations/src/te-IN.ts
+++ b/packages/localizations/src/te-IN.ts
@@ -186,6 +186,20 @@ export const teIN: LocalizationResource = {
navbar: {
title: 'సింగిల్ సైన్-ఆన్ (SSO) కాన్ఫిగర్ చేయండి',
},
+ selectProviderStep: {
+ title: 'Select provider',
+ subtitle: 'Select the provider you are going to setup SSO for.',
+ body: {
+ title: 'Select your identity provider',
+ description: "We'll guide you through the detailed setup process next.",
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Custom SAML Provider',
+ },
+ warning: 'Once a provider is selected you cannot change again until the configuration is over',
+ },
verifyEmailDomainStep: {
title: 'ఇమెయిల్ చిరునామా ధృవీకరించండి',
subtitle: 'మీరు ఎంటర్ప్రైజ్ కనెక్షన్ను ప్రారంభించాలనుకుంటున్న ఇమెయిల్ చిరునామాను ధృవీకరించండి.',
diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts
index 41672a54016..11109eeb68f 100644
--- a/packages/localizations/src/th-TH.ts
+++ b/packages/localizations/src/th-TH.ts
@@ -190,6 +190,20 @@ export const thTH: LocalizationResource = {
navbar: {
title: 'กำหนดค่าการลงชื่อเข้าใช้แบบครั้งเดียว (SSO)',
},
+ selectProviderStep: {
+ title: 'เลือกผู้ให้บริการ',
+ subtitle: 'เลือกผู้ให้บริการที่คุณจะตั้งค่า SSO ให้',
+ body: {
+ title: 'เลือกผู้ให้บริการข้อมูลประจำตัวของคุณ',
+ description: 'เราจะแนะนำคุณตลอดกระบวนการตั้งค่าโดยละเอียดในขั้นตอนถัดไป',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'ผู้ให้บริการ SAML แบบกำหนดเอง',
+ },
+ warning: 'เมื่อเลือกผู้ให้บริการแล้วคุณไม่สามารถเปลี่ยนได้อีกจนกว่าการกำหนดค่าจะเสร็จสิ้น',
+ },
verifyEmailDomainStep: {
title: 'ยืนยันที่อยู่อีเมล',
subtitle: 'ยืนยันที่อยู่อีเมลที่คุณต้องการเปิดใช้งานการเชื่อมต่อองค์กร',
diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
index 6ee6c170a41..ce5b1d0e956 100644
--- a/packages/localizations/src/tr-TR.ts
+++ b/packages/localizations/src/tr-TR.ts
@@ -186,6 +186,20 @@ export const trTR: LocalizationResource = {
navbar: {
title: 'Tek Oturum Açmayı (SSO) Yapılandır',
},
+ selectProviderStep: {
+ title: 'Sağlayıcıyı seçin',
+ subtitle: "SSO'yu ayarlayacağınız sağlayıcıyı seçin.",
+ body: {
+ title: 'Kimlik sağlayıcınızı seçin',
+ description: 'Bir sonraki adımda sizi ayrıntılı kurulum sürecinde yönlendireceğiz.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Özel SAML Sağlayıcısı',
+ },
+ warning: 'Bir sağlayıcı seçildikten sonra yapılandırma bitene kadar tekrar değiştiremezsiniz',
+ },
verifyEmailDomainStep: {
title: 'E-posta adresini doğrula',
subtitle: 'Kurumsal bağlantıyı etkinleştirmek istediğiniz e-posta adresini doğrulayın.',
diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
index 68f0d8fd690..0b7cebcb375 100644
--- a/packages/localizations/src/uk-UA.ts
+++ b/packages/localizations/src/uk-UA.ts
@@ -187,6 +187,20 @@ export const ukUA: LocalizationResource = {
navbar: {
title: 'Налаштувати єдиний вхід (SSO)',
},
+ selectProviderStep: {
+ title: 'Виберіть постачальника',
+ subtitle: 'Виберіть постачальника, для якого ви налаштовуватимете SSO.',
+ body: {
+ title: 'Виберіть вашого постачальника ідентифікації',
+ description: 'Далі ми проведемо вас через детальний процес налаштування.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Користувацький постачальник SAML',
+ },
+ warning: 'Після вибору постачальника ви не зможете змінити його, доки не буде завершено налаштування',
+ },
verifyEmailDomainStep: {
title: 'Підтвердити адресу електронної пошти',
subtitle: "Підтвердьте адресу електронної пошти, на якій ви хочете увімкнути корпоративне з'єднання.",
diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
index 0a8e03c59c7..9aeb3a94c88 100644
--- a/packages/localizations/src/vi-VN.ts
+++ b/packages/localizations/src/vi-VN.ts
@@ -190,6 +190,20 @@ export const viVN: LocalizationResource = {
navbar: {
title: 'Cấu hình đăng nhập một lần (SSO)',
},
+ selectProviderStep: {
+ title: 'Chọn nhà cung cấp',
+ subtitle: 'Chọn nhà cung cấp mà bạn sẽ thiết lập SSO cho.',
+ body: {
+ title: 'Chọn nhà cung cấp danh tính của bạn',
+ description: 'Chúng tôi sẽ hướng dẫn bạn qua quy trình thiết lập chi tiết tiếp theo.',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: 'Nhà cung cấp SAML tùy chỉnh',
+ },
+ warning: 'Khi đã chọn nhà cung cấp, bạn không thể thay đổi cho đến khi cấu hình hoàn tất',
+ },
verifyEmailDomainStep: {
title: 'Xác minh địa chỉ email',
subtitle: 'Xác minh địa chỉ email mà bạn muốn kích hoạt kết nối doanh nghiệp.',
diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
index c20a2b6466a..724014f9e6e 100644
--- a/packages/localizations/src/zh-CN.ts
+++ b/packages/localizations/src/zh-CN.ts
@@ -186,6 +186,20 @@ export const zhCN: LocalizationResource = {
navbar: {
title: '配置单点登录 (SSO)',
},
+ selectProviderStep: {
+ title: '选择提供商',
+ subtitle: '选择您要为其设置 SSO 的提供商。',
+ body: {
+ title: '选择您的身份提供商',
+ description: '接下来我们将引导您完成详细的设置过程。',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: '自定义 SAML 提供商',
+ },
+ warning: '选择提供商后,在配置完成之前无法再次更改',
+ },
verifyEmailDomainStep: {
title: '验证电子邮件地址',
subtitle: '验证您想要启用企业连接的电子邮件地址。',
diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
index 84307cbde86..537e1c54a2c 100644
--- a/packages/localizations/src/zh-TW.ts
+++ b/packages/localizations/src/zh-TW.ts
@@ -192,6 +192,20 @@ export const zhTW: LocalizationResource = {
navbar: {
title: '設定單一登入 (SSO)',
},
+ selectProviderStep: {
+ title: '選擇提供者',
+ subtitle: '選擇您要為其設定 SSO 的提供者。',
+ body: {
+ title: '選擇您的身分提供者',
+ description: '接下來我們將引導您完成詳細的設定流程。',
+ },
+ saml: {
+ groupLabel: 'SAML',
+ okta: 'Okta Workforce',
+ customSaml: '自訂 SAML 提供者',
+ },
+ warning: '選擇提供者後,在設定完成之前無法再次變更',
+ },
verifyEmailDomainStep: {
title: '驗證電子郵件地址',
subtitle: '驗證您想要啟用企業連線的電子郵件地址。',
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index 1d7bc8d2d04..95b1879a80c 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -1293,12 +1293,26 @@ export type __internal_LocalizationResource = {
};
};
configureSSO: {
+ missingManageEnterpriseConnectionsPermission: {
+ title: LocalizationValue;
+ subtitle: LocalizationValue;
+ };
navbar: {
title: LocalizationValue;
};
- missingManageEnterpriseConnectionsPermission: {
+ selectProviderStep: {
title: LocalizationValue;
subtitle: LocalizationValue;
+ body: {
+ title: LocalizationValue;
+ description: LocalizationValue;
+ };
+ saml: {
+ groupLabel: LocalizationValue;
+ okta: LocalizationValue;
+ customSaml: LocalizationValue;
+ };
+ warning: LocalizationValue;
};
verifyEmailDomainStep: {
title: LocalizationValue;
diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
index 4ab8dcccb3d..a286947c2e6 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
@@ -10,7 +10,7 @@ import { ProfileCard } from '@/elements/ProfileCard';
import { ExclamationTriangle } from '@/icons';
import { Route, Switch } from '@/router';
-import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
+import { ConfigureSSOProvider, useConfigureSSO } from './ConfigureSSOContext';
import { ConfigureSSOHeader } from './ConfigureSSOHeader';
import { ConfigureSSONavbar } from './ConfigureSSONavbar';
import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
@@ -74,43 +74,51 @@ const ConfigureSSOCardContent = () => {
}
return (
-
-
-
+
+
+
+ );
+};
-
-
-
+const ConfigureSSOSteps = () => {
+ const { initialStepId } = useConfigureSSO();
-
-
-
+ return (
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx
index 9513ca41a5e..1df2c315e6a 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx
@@ -1,41 +1,65 @@
import type { EnterpriseConnectionResource } from '@clerk/shared/types';
import React, { type PropsWithChildren } from 'react';
+import { deriveInitialStep } from './deriveInitialStep';
+import type { ProviderType, WizardStepId } from './types';
+
/**
* Shared form state for the ConfigureSSO wizard, persisted across steps
*/
export interface ConfigureSSOData {
+ initialStepId: WizardStepId;
/**
* The enterprise connection from the user's primary email address domain
*/
enterpriseConnection: EnterpriseConnectionResource | undefined;
+ /**
+ * The provider selected for this configuration. Reads from the existing
+ * enterprise connection when present, falling back to the local selection
+ * made on the Select Provider step.
+ */
+ provider: ProviderType | undefined;
+ /**
+ * Sets the local provider selection used by Select Provider before a
+ * connection has been created.
+ */
+ setProvider: (provider: ProviderType) => void;
}
-interface ConfigureSSOFlowProviderProps {
+interface ConfigureSSOProviderProps {
enterpriseConnection: EnterpriseConnectionResource | undefined;
}
-const ConfigureSSOFlowContext = React.createContext(null);
-ConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';
+const ConfigureSSOContext = React.createContext(null);
+ConfigureSSOContext.displayName = 'ConfigureSSOContext';
-export const ConfigureSSOFlowProvider = ({
+export const ConfigureSSOProvider = ({
enterpriseConnection,
children,
-}: PropsWithChildren): JSX.Element => {
+}: PropsWithChildren): JSX.Element => {
+ const [provider, setProvider] = React.useState(
+ enterpriseConnection?.provider as ProviderType,
+ );
+
+ const initialStepId = deriveInitialStep(enterpriseConnection);
+
const value = React.useMemo(
() => ({
+ initialStepId,
enterpriseConnection,
+ provider,
+ setProvider,
}),
- [enterpriseConnection],
+ [initialStepId, enterpriseConnection, provider],
);
- return {children};
+ return {children};
};
-export const useConfigureSSOFlow = (): ConfigureSSOData => {
- const ctx = React.useContext(ConfigureSSOFlowContext);
+export const useConfigureSSO = (): ConfigureSSOData => {
+ const ctx = React.useContext(ConfigureSSOContext);
if (!ctx) {
- throw new Error('useConfigureSSOFlow called outside .');
+ throw new Error('useConfigureSSO called outside .');
}
return ctx;
};
diff --git a/packages/ui/src/components/ConfigureSSO/__tests__/deriveInitialStep.test.ts b/packages/ui/src/components/ConfigureSSO/__tests__/deriveInitialStep.test.ts
new file mode 100644
index 00000000000..2f67bbcc603
--- /dev/null
+++ b/packages/ui/src/components/ConfigureSSO/__tests__/deriveInitialStep.test.ts
@@ -0,0 +1,89 @@
+import type { EnterpriseConnectionResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { deriveInitialStep } from '../deriveInitialStep';
+import type { WizardStepId } from '../types';
+
+const makeConnection = (overrides: Partial = {}): EnterpriseConnectionResource =>
+ ({
+ id: 'enc_1',
+ name: 'acme.com',
+ active: false,
+ provider: 'saml_okta',
+ logoPublicUrl: null,
+ domains: ['acme.com'],
+ organizationId: null,
+ syncUserAttributes: false,
+ disableAdditionalIdentifications: false,
+ allowOrganizationAccountLinking: false,
+ customAttributes: [],
+ oauthConfig: null,
+ samlConnection: null,
+ createdAt: null,
+ updatedAt: null,
+ __internal_toSnapshot: () => ({}) as any,
+ ...overrides,
+ }) as EnterpriseConnectionResource;
+
+describe('deriveInitialStep', () => {
+ const cases: Array<{ name: string; input: EnterpriseConnectionResource | undefined; expected: WizardStepId }> = [
+ {
+ name: 'no connection → select-provider',
+ input: undefined,
+ expected: 'select-provider',
+ },
+ {
+ name: 'connection without samlConnection → configure',
+ input: makeConnection({ samlConnection: null }),
+ expected: 'configure',
+ },
+ {
+ name: 'connection with empty samlConnection.idpSsoUrl → configure',
+ input: makeConnection({
+ samlConnection: {
+ id: 'saml_1',
+ name: 'acme.com',
+ active: false,
+ idpEntityId: '',
+ idpSsoUrl: '',
+ idpCertificate: '',
+ idpMetadataUrl: '',
+ idpMetadata: '',
+ acsUrl: 'https://clerk.example.com/acs',
+ spEntityId: 'https://clerk.example.com',
+ spMetadataUrl: 'https://clerk.example.com/sp-metadata',
+ allowSubdomains: false,
+ allowIdpInitiated: false,
+ forceAuthn: false,
+ },
+ }),
+ expected: 'configure',
+ },
+ {
+ name: 'connection with samlConnection.idpSsoUrl populated → confirmation',
+ input: makeConnection({
+ samlConnection: {
+ id: 'saml_1',
+ name: 'acme.com',
+ active: true,
+ idpEntityId: 'https://idp.example.com/entity',
+ idpSsoUrl: 'https://idp.example.com/sso',
+ idpCertificate: 'CERT',
+ idpMetadataUrl: 'https://idp.example.com/metadata',
+ idpMetadata: '',
+ acsUrl: 'https://clerk.example.com/acs',
+ spEntityId: 'https://clerk.example.com',
+ spMetadataUrl: 'https://clerk.example.com/sp-metadata',
+ allowSubdomains: false,
+ allowIdpInitiated: false,
+ forceAuthn: false,
+ },
+ }),
+ expected: 'confirmation',
+ },
+ ];
+
+ it.each(cases)('$name', ({ input, expected }) => {
+ expect(deriveInitialStep(input)).toBe(expected);
+ });
+});
diff --git a/packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts b/packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts
new file mode 100644
index 00000000000..fb19fee3138
--- /dev/null
+++ b/packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts
@@ -0,0 +1,25 @@
+import type { EnterpriseConnectionResource } from '@clerk/shared/types';
+
+import type { WizardStepId } from './types';
+
+/**
+ * Decides where the ConfigureSSO wizard should mount on (re)load based on
+ * the current state of the user's enterprise connection.
+ *
+ * No connection → `select-provider`
+ * Connection without SAML IdP metadata → `configure`
+ * Connection with SAML IdP metadata → `confirmation`
+ *
+ * The `test` step is intentionally absent — we can't derive a "last test
+ * passed" signal synchronously from the resource. Users can re-test from
+ * Confirmation.
+ */
+export const deriveInitialStep = (connection: EnterpriseConnectionResource | undefined): WizardStepId => {
+ if (!connection) {
+ return 'select-provider';
+ }
+ if (!connection.samlConnection?.idpSsoUrl) {
+ return 'configure';
+ }
+ return 'confirmation';
+};
diff --git a/packages/ui/src/components/ConfigureSSO/elements/Step.tsx b/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
index a3fc56adebd..10d39a377d1 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
+++ b/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
@@ -54,11 +54,11 @@ const Header = ({ title, description, children }: StepHeaderProps): JSX.Element
})}
>
({ gap: theme.space.$4 })}
>
- ({ gap: theme.space.$1x5, minWidth: 0 })}>
+ ({ gap: theme.space.$2, minWidth: 0 })}>
({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx
index 5b19dbb43c9..af420302c57 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx
@@ -1,10 +1,12 @@
-import { descriptors, Flow, Text } from '@/customizables';
+import { descriptors, Flow } from '@/customizables';
+import { useConfigureSSO } from '../ConfigureSSOContext';
import { Step } from '../elements/Step';
import { useWizard } from '../elements/Wizard';
export const ConfigureStep = (): JSX.Element => {
const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+ const { enterpriseConnection } = useConfigureSSO();
return (
@@ -18,9 +20,7 @@ export const ConfigureStep = (): JSX.Element => {
/>
-
- UI goes here
-
+ Single sign-on URL: {enterpriseConnection?.samlConnection?.acsUrl}
diff --git a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
index f27de65c496..94613e6411d 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
@@ -1,10 +1,54 @@
-import { descriptors, Flow, Text } from '@/customizables';
+import { iconImageUrl } from '@clerk/shared/constants';
+import React from 'react';
+import type { LocalizationKey } from '@/customizables';
+import { Box, Col, descriptors, Flow, Grid, localizationKeys, Span, Text, useLocalizations } from '@/customizables';
+import { common, mqu } from '@/styledSystem';
+import { Alert } from '@/ui/elements/Alert';
+
+import { useConfigureSSO } from '../ConfigureSSOContext';
import { Step } from '../elements/Step';
import { useWizard } from '../elements/Wizard';
+import type { ProviderType } from '../types';
+
+/**
+ * Provider icons whose SVGs are monochromatic and should flip with the
+ * theme. Mirrors the SUPPORTS_MASK_IMAGE list in `common/ProviderIcon.tsx`
+ * — keep in sync if either grows.
+ */
+const MONOCHROMATIC_PROVIDER_ICONS: ReadonlySet = new Set(['okta']);
+
+const PROVIDER_GROUPS: ReadonlyArray<{
+ id: 'saml';
+ label: LocalizationKey;
+ options: ReadonlyArray<{ id: ProviderType; label: LocalizationKey; iconId: string }>;
+}> = [
+ {
+ id: 'saml',
+ label: localizationKeys('configureSSO.selectProviderStep.saml.groupLabel'),
+ options: [
+ { id: 'saml_okta', label: localizationKeys('configureSSO.selectProviderStep.saml.okta'), iconId: 'okta' },
+ {
+ id: 'saml_custom',
+ label: localizationKeys('configureSSO.selectProviderStep.saml.customSaml'),
+ iconId: 'saml',
+ },
+ ],
+ },
+];
export const SelectProviderStep = (): JSX.Element => {
- const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+ const { goNext } = useWizard();
+ const { setProvider } = useConfigureSSO();
+ const [selected, setSelected] = React.useState(null);
+
+ const handleContinue = () => {
+ if (!selected) {
+ return;
+ }
+ setProvider(selected);
+ void goNext();
+ };
return (
@@ -13,27 +57,177 @@ export const SelectProviderStep = (): JSX.Element => {
elementId={descriptors.configureSSOStep.setId('select-provider')}
>
-
- UI goes here
+ ({ gap: theme.space.$5 })}>
+ ({ gap: theme.space.$1x5 })}>
+
+
+
+
+
+ {PROVIDER_GROUPS.map(group => (
+ ({ gap: theme.space.$3 })}
+ >
+
+
+
+ {group.options.map(option => (
+ setSelected(option.id)}
+ />
+ ))}
+
+
+ ))}
+
+
- goPrev()}
- isDisabled={isFirstStep}
- />
+
+
goNext()}
- isDisabled={isLastStep}
+ onClick={handleContinue}
+ isDisabled={!selected}
/>
);
};
+
+type ProviderCardProps = {
+ name: string;
+ value: string;
+ iconId: string;
+ label: LocalizationKey;
+ checked?: boolean;
+ onChange: (event: React.ChangeEvent) => void;
+};
+
+const ProviderCard = ({ name, value, iconId, label, checked, onChange }: ProviderCardProps): JSX.Element => {
+ const { t } = useLocalizations();
+ const labelText = t(label);
+
+ return (
+ ({
+ // Outline-button look (mirrors SimpleButton variant='outline' for visual continuity).
+ borderWidth: theme.borderWidths.$normal,
+ borderStyle: theme.borderStyles.$solid,
+ borderColor: theme.colors.$borderAlpha150,
+ borderRadius: theme.radii.$md,
+ color: theme.colors.$neutralAlpha600,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: theme.space.$2,
+ height: theme.sizes.$32,
+ padding: theme.space.$1x5,
+ backgroundColor: theme.colors.$colorBackground,
+ cursor: 'pointer',
+ position: 'relative',
+ '&:hover': { backgroundColor: theme.colors.$neutralAlpha50 },
+ // Keyboard focus indication — fires when the inner input is focused.
+ '&:has(input:focus-visible)': {
+ ...common.focusRingStyles(theme),
+ borderColor: theme.colors.$borderAlpha300,
+ },
+ // Selected ring — CSS-driven via :checked so it survives focus changes.
+ '&:has(input:checked)': {
+ ...common.focusRingStyles(theme),
+ },
+ })}
+ >
+
+
+ {
+ const isMonochromatic = MONOCHROMATIC_PROVIDER_ICONS.has(iconId);
+ const baseSize = { width: theme.sizes.$8, height: theme.sizes.$8 };
+ if (isMonochromatic) {
+ return {
+ ...baseSize,
+ backgroundColor: theme.colors.$colorForeground,
+ maskImage: `url(${iconImageUrl(iconId)})`,
+ maskSize: 'contain',
+ maskPosition: 'center',
+ maskRepeat: 'no-repeat',
+ };
+ }
+ return {
+ ...baseSize,
+ backgroundImage: `url(${iconImageUrl(iconId)})`,
+ backgroundSize: 'contain',
+ backgroundPosition: 'center',
+ backgroundRepeat: 'no-repeat',
+ };
+ }}
+ />
+
+ ({ color: theme.colors.$colorForeground })}
+ >
+ {labelText}
+
+
+ );
+};
diff --git a/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx
index 985f1779656..ba5a1079036 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx
@@ -1,4 +1,4 @@
-import { useReverification, useSession, useUser } from '@clerk/shared/react';
+import { __internal_useUserEnterpriseConnections, useReverification, useSession, useUser } from '@clerk/shared/react';
import type { EmailAddressResource } from '@clerk/shared/types';
import { useCallback, useEffect, useRef, useState } from 'react';
@@ -19,14 +19,15 @@ import { Form } from '@/elements/Form';
import { DuotoneAtSymbol, ExclamationTriangle } from '@/icons';
import { handleError } from '@/utils/errorHandler';
-import { useConfigureSSOFlow } from '../ConfigureSSOContext';
+import { useConfigureSSO } from '../ConfigureSSOContext';
import { Step } from '../elements/Step';
import { useWizard, Wizard } from '../elements/Wizard';
+import type { ProviderType } from '../types';
export const VerifyDomainStep = (): JSX.Element => {
const { user } = useUser();
const { session } = useSession();
- const { enterpriseConnection } = useConfigureSSOFlow();
+ const { enterpriseConnection } = useConfigureSSO();
const { t } = useLocalizations();
const emailToVerify =
@@ -240,6 +241,9 @@ export const EnterVerificationCodeStep = ({
emailToVerify?: EmailAddressResource;
}): JSX.Element | null => {
const { user } = useUser();
+ const { session } = useSession();
+ const { provider, enterpriseConnection } = useConfigureSSO();
+ const { createEnterpriseConnection } = __internal_useUserEnterpriseConnections();
const card = useCardState();
const codeSubmittedRef = useRef(false);
const { goNext, goPrev, isFirstStep } = useWizard();
@@ -255,6 +259,28 @@ export const EnterVerificationCodeStep = ({
const setPrimaryEmailAddress = useReverification((emailAddressId: string) =>
user?.update({ primaryEmailAddressId: emailAddressId }),
);
+ const createConnection = useReverification(
+ useCallback(
+ async (selectedProvider: ProviderType) => {
+ if (enterpriseConnection) {
+ return;
+ }
+ if (!user?.primaryEmailAddress) {
+ throw new Error('Primary email required');
+ }
+
+ const emailDomain = user.primaryEmailAddress.emailAddress.split('@')[1];
+ const organizationId = session?.lastActiveOrganizationId ?? null;
+
+ await createEnterpriseConnection({
+ provider: selectedProvider,
+ name: emailDomain,
+ organizationId,
+ });
+ },
+ [enterpriseConnection, user, session, createEnterpriseConnection],
+ ),
+ );
const prepare = useCallback(
() => prepareEmailVerification()?.catch(err => handleError(err, [], card.setError)),
[prepareEmailVerification, card],
@@ -279,6 +305,19 @@ export const EnterVerificationCodeStep = ({
return;
}
}
+
+ if (!provider) {
+ void goNext();
+ return;
+ }
+
+ try {
+ await createConnection(provider);
+ } catch (err) {
+ handleError(err as Error, [], card.setError);
+ return;
+ }
+
void goNext();
},
});
diff --git a/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx b/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx
new file mode 100644
index 00000000000..e25efd16fc2
--- /dev/null
+++ b/packages/ui/src/components/ConfigureSSO/steps/__tests__/SelectProviderStep.test.tsx
@@ -0,0 +1,180 @@
+import type { ReactElement } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+const goNext = vi.fn();
+const goPrev = vi.fn();
+
+vi.mock('../../elements/Wizard', () => ({
+ useWizard: () => ({
+ activeSteps: [],
+ currentStep: undefined,
+ currentIndex: -1,
+ totalSteps: 0,
+ isFirstStep: true,
+ isLastStep: false,
+ isNested: false,
+ goNext,
+ goPrev,
+ goToStep: vi.fn(),
+ registerStep: vi.fn(),
+ unregisterStep: vi.fn(),
+ }),
+}));
+
+const setProvider = vi.fn();
+
+vi.mock('../../ConfigureSSOContext', () => ({
+ useConfigureSSO: () => ({
+ enterpriseConnection: undefined,
+ provider: undefined,
+ setProvider,
+ initialStepId: 'select-provider',
+ }),
+}));
+
+import { SelectProviderStep } from '../SelectProviderStep';
+
+const { createFixtures } = bindCreateFixtures('ConfigureSSO');
+
+const renderStep = (
+ wrapper: React.ComponentType<{ children?: React.ReactNode }>,
+ ui: ReactElement = ,
+) => {
+ return render({ui}, { wrapper });
+};
+
+const resetMocks = () => {
+ goNext.mockReset();
+ goPrev.mockReset();
+ setProvider.mockReset();
+};
+
+describe('SelectProviderStep', () => {
+ it('mounts and renders the step header', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ renderStep(wrapper);
+
+ expect(screen.getByRole('heading', { name: 'Select provider' })).toBeInTheDocument();
+ expect(screen.getByText('Select your identity provider')).toBeInTheDocument();
+ });
+
+ it('renders both SAML provider radios with their labels', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ renderStep(wrapper);
+
+ expect(screen.getByRole('radio', { name: 'Okta Workforce' })).toBeInTheDocument();
+ expect(screen.getByRole('radio', { name: 'Custom SAML Provider' })).toBeInTheDocument();
+ });
+
+ it('loads each tile icon from img.clerk.com', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ const { container } = renderStep(wrapper);
+
+ // Emotion serializes sx into stylesheets, so we check both inline + the document's collected styles
+ const iconSpans = Array.from(container.querySelectorAll('label span[aria-hidden]'));
+ expect(iconSpans).toHaveLength(2);
+
+ const collectedStyles = [
+ ...Array.from(document.head.querySelectorAll('style')).map(s => s.textContent ?? ''),
+ ...iconSpans.map(el => (el as HTMLElement).style.backgroundImage ?? ''),
+ ].join('\n');
+
+ expect(collectedStyles).toMatch(/img\.clerk\.com\/static\/okta\.svg/);
+ expect(collectedStyles).toMatch(/img\.clerk\.com\/static\/saml\.svg/);
+ });
+
+ it('disables Continue when no provider is selected', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ renderStep(wrapper);
+
+ expect(screen.getByRole('radio', { name: 'Okta Workforce' })).not.toBeChecked();
+ expect(screen.getByRole('radio', { name: 'Custom SAML Provider' })).not.toBeChecked();
+ expect(screen.getByRole('button', { name: /Continue/i })).toBeDisabled();
+ });
+
+ it('marks the clicked radio as checked and enables Continue', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ const { userEvent } = renderStep(wrapper);
+
+ const oktaRadio = screen.getByRole('radio', { name: 'Okta Workforce' });
+ expect(oktaRadio).not.toBeChecked();
+
+ await userEvent.click(oktaRadio);
+
+ expect(oktaRadio).toBeChecked();
+ expect(screen.getByRole('button', { name: /Continue/i })).toBeEnabled();
+ });
+
+ it('flips selection when a different radio is clicked', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ const { userEvent } = renderStep(wrapper);
+
+ const oktaRadio = screen.getByRole('radio', { name: 'Okta Workforce' });
+ const customSamlRadio = screen.getByRole('radio', { name: 'Custom SAML Provider' });
+
+ await userEvent.click(oktaRadio);
+ expect(oktaRadio).toBeChecked();
+ expect(customSamlRadio).not.toBeChecked();
+
+ await userEvent.click(customSamlRadio);
+ expect(oktaRadio).not.toBeChecked();
+ expect(customSamlRadio).toBeChecked();
+ });
+
+ it('records the provider and advances when Continue is clicked', async () => {
+ resetMocks();
+ const callOrder: string[] = [];
+ setProvider.mockImplementation(() => {
+ callOrder.push('setProvider');
+ });
+ goNext.mockImplementation(() => {
+ callOrder.push('goNext');
+ });
+
+ const { wrapper } = await createFixtures();
+ const { userEvent } = renderStep(wrapper);
+
+ await userEvent.click(screen.getByRole('radio', { name: 'Okta Workforce' }));
+ await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+ await waitFor(() => {
+ expect(goNext).toHaveBeenCalledTimes(1);
+ });
+
+ expect(setProvider).toHaveBeenCalledWith('saml_okta');
+ expect(callOrder).toEqual(['setProvider', 'goNext']);
+ });
+
+ it('forwards the Custom SAML backend provider id when selected', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ const { userEvent } = renderStep(wrapper);
+
+ await userEvent.click(screen.getByRole('radio', { name: 'Custom SAML Provider' }));
+ await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+ await waitFor(() => {
+ expect(goNext).toHaveBeenCalledTimes(1);
+ });
+
+ expect(setProvider).toHaveBeenCalledWith('saml_custom');
+ });
+
+ it('disables Previous on the first step', async () => {
+ resetMocks();
+ const { wrapper } = await createFixtures();
+ renderStep(wrapper);
+
+ expect(screen.getByRole('button', { name: /Previous/i })).toBeDisabled();
+ });
+});
diff --git a/packages/ui/src/components/ConfigureSSO/types.ts b/packages/ui/src/components/ConfigureSSO/types.ts
new file mode 100644
index 00000000000..f138ef38387
--- /dev/null
+++ b/packages/ui/src/components/ConfigureSSO/types.ts
@@ -0,0 +1,3 @@
+export type ProviderType = 'saml_okta' | 'saml_custom';
+
+export type WizardStepId = 'select-provider' | 'verify-domain' | 'configure' | 'test' | 'confirmation';