feat(ui,shared,localizations): provider selection step for <__experimental_ConfigureSSO /> (#8503)

Author: iagodahlem

.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.

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: 'تحقق من عنوان البريد الإلكتروني الذي تريد تفعيل اتصال المؤسسة عليه.',

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: 'Пацвердзіце адрас электроннай пошты, на якім вы хочаце ўключыць карпаратыўнае падключэнне.',

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: 'Потвърдете имейл адреса, на който искате да активирате корпоративната връзка.',

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: 'যে ইমেইল ঠিকানায় আপনি এন্টারপ্রাইজ সংযোগ সক্রিয় করতে চান তা যাচাই করুন।',

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.",

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í.',

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å.',

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.',

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 στην οποία θέλετε να ενεργοποιήσετε τη σύνδεση επιχείρησης.',