feat(ui): add experimental flag to gate the OIDC self-serve flow (#9198)

Author: NicolasLopes7

.changeset/empty-ducks-tease.md

@@ -0,0 +1,6 @@
+---
+"@clerk/shared": patch
+"@clerk/ui": patch
+---
+
+Add an experimental `oidcSelfServe` option to enable the self-serve OIDC configuration flow in `<ConfigureSSO />`.

packages/shared/src/types/clerk.ts

@@ -1481,6 +1481,10 @@ export type ClerkOptions = ClerkOptionsNavigation &
          * directly with the provided Clerk instance. Used by React Native / Expo.
          */
         runtimeEnvironment: 'headless';
+        /**
+         * Temporary flag that gates the self-serve OIDC flow in `<ConfigureSSO />`. Remove once the self-serve OIDC flow reaches GA.
+         */
+        oidcSelfServe: boolean;
       },
       Record<string, any>
     >;

packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx

@@ -1,6 +1,8 @@
 import type { EnterpriseConnectionResource, OrganizationDomainResource } from '@clerk/shared/types';
 import React, { type PropsWithChildren } from 'react';
 
+import { useOptions } from '@/contexts';
+
 import type { OrganizationEnterpriseConnection } from './domain/organizationEnterpriseConnection';
 import type {
   EnterpriseConnectionMutations,
@@ -11,9 +13,9 @@ import type {
 export type { OrganizationDomainMutations };
 
 /**
- * Shared state for the ConfigureSSO wizard, persisted across steps. Everything
- * is sourced from the umbrella `useOrganizationEnterpriseConnection` hook one
- * level up, so the context never observes a loading state and the steps read
+ * Shared state for the ConfigureSSO wizard, persisted across steps. Connection
+ * state is sourced from the umbrella `useOrganizationEnterpriseConnection` hook
+ * one level up, so the context never observes a loading state and the steps read
  * display gates / mutations from a single place instead of re-deriving.
  */
 export interface ConfigureSSOData {
@@ -26,6 +28,8 @@ export interface ConfigureSSOData {
   testRuns: TestRunsView;
   organizationDomains: OrganizationDomainResource[] | undefined;
   onExit?: () => void;
+  /** Temporary gate for the self-serve OIDC flow; remove at OIDC GA. */
+  isOIDCFlowEnabled: boolean;
 }
 
 interface ConfigureSSOProviderProps {
@@ -53,6 +57,8 @@ export const ConfigureSSOProvider = ({
   onExit,
   children,
 }: PropsWithChildren<ConfigureSSOProviderProps>): JSX.Element => {
+  const isOIDCFlowEnabled = useOptions().experimental?.oidcSelfServe ?? false;
+
   const value = React.useMemo<ConfigureSSOData>(
     () => ({
       contentRef,
@@ -63,6 +69,7 @@ export const ConfigureSSOProvider = ({
       enterpriseConnectionMutations,
       organizationDomainMutations,
       onExit,
+      isOIDCFlowEnabled,
     }),
     [
       contentRef,
@@ -73,6 +80,7 @@ export const ConfigureSSOProvider = ({
       organizationDomains,
       enterpriseConnection,
       onExit,
+      isOIDCFlowEnabled,
     ],
   );