feat(ui): add OIDC self-serve SSO configuration

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

@@ -59,7 +59,11 @@ function oauthConfigFromJSON(data: EnterpriseOAuthConfigJSON): EnterpriseOAuthCo
     name: data.name,
     clientId: data.client_id,
     providerKey: data.provider_key,
+    redirectUri: data.redirect_uri,
     discoveryUrl: data.discovery_url,
+    authUrl: data.auth_url,
+    tokenUrl: data.token_url,
+    userInfoUrl: data.user_info_url,
     logoPublicUrl: data.logo_public_url,
     requiresPkce: data.requires_pkce,
     createdAt: unixEpochToDate(data.created_at),
@@ -73,7 +77,11 @@ function oauthConfigToJSON(data: EnterpriseOAuthConfigResource): EnterpriseOAuth
     name: data.name,
     client_id: data.clientId,
     provider_key: data.providerKey,
+    redirect_uri: data.redirectUri,
     discovery_url: data.discoveryUrl,
+    auth_url: data.authUrl,
+    token_url: data.tokenUrl,
+    user_info_url: data.userInfoUrl,
     logo_public_url: data.logoPublicUrl,
     requires_pkce: data.requiresPkce,
     created_at: data.createdAt?.getTime() ?? 0,

packages/localizations/src/en-US.ts

@@ -240,18 +240,70 @@ export const enUS: LocalizationResource = {
         },
       },
       oidcCustom: {
-        claimsStep: {
-          headerSubtitle: 'Set the claims your identity provider includes in the ID token',
-        },
         credentialsStep: {
           headerSubtitle: 'Add your application credentials',
+          clientId: {
+            label: 'Client ID',
+            placeholder: 'Paste client ID here...',
+          },
+          clientSecret: {
+            label: 'Client secret',
+            placeholder: 'Paste client secret here...',
+          },
+          paragraph: 'In your identity provider’s OIDC application, retrieve these values.',
         },
         endpointsStep: {
           headerSubtitle: 'Add your identity provider’s endpoints',
+          discoveryUrl: {
+            description:
+              'In your identity provider’s OIDC application, retrieve the discovery endpoint. Paste it below.',
+            label: 'Discovery endpoint',
+            placeholder: 'Paste URL here...',
+          },
+          manual: {
+            authUrl: {
+              label: 'Authorization URL',
+              placeholder: 'Paste URL here...',
+            },
+            description: 'In your identity provider’s OIDC application, retrieve these values.',
+            tokenUrl: {
+              label: 'Token URL',
+              placeholder: 'Paste URL here...',
+            },
+            userInfoUrl: {
+              label: 'User Info URL',
+              placeholder: 'Paste URL here...',
+            },
+          },
+          modes: {
+            ariaLabel: 'OIDC endpoint configuration method',
+            discoveryUrl: 'Add via discovery endpoint',
+            manual: 'Configure manually',
+          },
         },
         mainHeaderTitle: 'Configure your identity provider',
         redirectUriStep: {
           headerSubtitle: 'Create a new OIDC application in your identity provider’s dashboard',
+          paragraph:
+            'In your identity provider’s dashboard, create a new OIDC application that supports the authorization code grant type, and use the following redirect URI:',
+          claims: {
+            description: 'Ensure your ID token includes the following claims:',
+            table: {
+              columns: {
+                attribute: 'Clerk attribute',
+                claim: 'ID token claim',
+              },
+              rows: {
+                email: { attribute: 'Primary email' },
+                firstName: { attribute: 'First name' },
+                lastName: { attribute: 'Last name' },
+                subject: { attribute: 'External user ID' },
+              },
+            },
+          },
+          redirectUri: {
+            label: 'Authorized redirect URI',
+          },
         },
       },
       samlCustom: {

packages/shared/src/types/elementIds.ts

@@ -31,6 +31,16 @@ export type FieldId =
   | 'idpMetadata'
   | 'idpMetadataUrl'
   | 'idpSsoUrl'
+  | 'discoveryUrl'
+  | 'authUrl'
+  | 'tokenUrl'
+  | 'userInfoUrl'
+  | 'clientId'
+  | 'clientSecret'
+  | 'redirectUri'
+  | 'oidcClientId'
+  | 'oidcClientSecret'
+  | 'oidcRedirectUri'
   | 'acsUrl'
   | 'spEntityId'
   | 'web3WalletName'

packages/shared/src/types/enterpriseConnection.ts

@@ -100,7 +100,11 @@ export interface EnterpriseOAuthConfigJSON {
   name: string;
   provider_key?: string;
   client_id: string;
+  redirect_uri?: string;
   discovery_url?: string;
+  auth_url?: string;
+  token_url?: string;
+  user_info_url?: string;
   logo_public_url?: string | null;
   requires_pkce?: boolean;
   created_at: number;
@@ -112,7 +116,11 @@ export interface EnterpriseOAuthConfigResource {
   name: string;
   clientId: string;
   providerKey?: string;
+  redirectUri?: string;
   discoveryUrl?: string;
+  authUrl?: string;
+  tokenUrl?: string;
+  userInfoUrl?: string;
   logoPublicUrl?: string | null;
   requiresPkce?: boolean;
   createdAt: Date | null;

packages/shared/src/types/localization.ts

@@ -1529,15 +1529,65 @@ export type __internal_LocalizationResource = {
         mainHeaderTitle: LocalizationValue;
         redirectUriStep: {
           headerSubtitle: LocalizationValue;
-        };
-        claimsStep: {
-          headerSubtitle: LocalizationValue;
+          paragraph: LocalizationValue;
+          claims: {
+            description: LocalizationValue;
+            table: {
+              columns: {
+                attribute: LocalizationValue;
+                claim: LocalizationValue;
+              };
+              rows: {
+                email: { attribute: LocalizationValue };
+                firstName: { attribute: LocalizationValue };
+                lastName: { attribute: LocalizationValue };
+                subject: { attribute: LocalizationValue };
+              };
+            };
+          };
+          redirectUri: {
+            label: LocalizationValue;
+          };
         };
         endpointsStep: {
           headerSubtitle: LocalizationValue;
+          discoveryUrl: {
+            description: LocalizationValue;
+            label: LocalizationValue;
+            placeholder: LocalizationValue;
+          };
+          manual: {
+            authUrl: {
+              label: LocalizationValue;
+              placeholder: LocalizationValue;
+            };
+            description: LocalizationValue;
+            tokenUrl: {
+              label: LocalizationValue;
+              placeholder: LocalizationValue;
+            };
+            userInfoUrl: {
+              label: LocalizationValue;
+              placeholder: LocalizationValue;
+            };
+          };
+          modes: {
+            ariaLabel: LocalizationValue;
+            discoveryUrl: LocalizationValue;
+            manual: LocalizationValue;
+          };
         };
         credentialsStep: {
           headerSubtitle: LocalizationValue;
+          clientId: {
+            label: LocalizationValue;
+            placeholder: LocalizationValue;
+          };
+          clientSecret: {
+            label: LocalizationValue;
+            placeholder: LocalizationValue;
+          };
+          paragraph: LocalizationValue;
         };
       };
       unsupportedProvider: {

packages/ui/src/components/ConfigureSSO/domain/__tests__/organizationEnterpriseConnection.test.ts

@@ -12,7 +12,6 @@ import {
   areAllOrganizationDomainsVerified,
   connectionBackingEmail,
   isEnterpriseConnectionConfigured,
-  isOidcProvider,
   organizationEnterpriseConnection,
 } from '../organizationEnterpriseConnection';
 
@@ -62,7 +61,7 @@ const fullyConfiguredSaml = makeSamlConnection({
 const configuredOidc = makeOauthConfig({ clientId: 'client_abc' });
 
 const makeOidcConnection = (overrides: Partial<EnterpriseConnectionResource> = {}): EnterpriseConnectionResource =>
-  makeConnection({ provider: 'oidc_custom', samlConnection: null, oauthConfig: configuredOidc, ...overrides });
+  makeConnection({ provider: 'oauth_custom_acme', samlConnection: null, oauthConfig: configuredOidc, ...overrides });
 
 // Builds the entity with sensible defaults; each test overrides what it cares
 // about.
@@ -75,18 +74,6 @@ const derive = (overrides: Partial<Parameters<typeof organizationEnterpriseConne
   });
 
 describe('organizationEnterpriseConnection', () => {
-  describe('isOidcProvider', () => {
-    it('recognizes OIDC provider keys with the oidc_ prefix', () => {
-      expect(isOidcProvider('oidc_custom')).toBe(true);
-      expect(isOidcProvider('oidc_clerk_dev')).toBe(true);
-    });
-
-    it('rejects malformed OIDC provider keys', () => {
-      expect(isOidcProvider('oidc')).toBe(false);
-      expect(isOidcProvider('oidcfoo')).toBe(false);
-    });
-  });
-
   describe('hasConnection', () => {
     it('undefined connection → false', () => {
       expect(derive({ connection: undefined }).hasConnection).toBe(false);
@@ -106,8 +93,10 @@ describe('organizationEnterpriseConnection', () => {
     it('connection → its provider', () => {
       expect(derive({ connection: makeConnection({ provider: 'saml_custom' }) }).provider).toBe('saml_custom');
     });
-    it('carries a derived OIDC key verbatim', () => {
-      expect(derive({ connection: makeConnection({ provider: 'oidc_clerk_dev' }) }).provider).toBe('oidc_clerk_dev');
+    it('carries a custom OIDC key verbatim', () => {
+      expect(derive({ connection: makeConnection({ provider: 'oauth_custom_clerk_dev' }) }).provider).toBe(
+        'oauth_custom_clerk_dev',
+      );
     });
   });
 

packages/ui/src/components/ConfigureSSO/domain/organizationEnterpriseConnection.ts

@@ -7,7 +7,8 @@ import type {
 
 import type { EnterpriseConnectionProviderType, OidcProviderType } from '../types';
 
-export const isOidcProvider = (provider: string): provider is OidcProviderType => provider.startsWith('oidc_');
+export const isOidcProvider = (provider: string): provider is OidcProviderType =>
+  provider.startsWith('oidc_') || provider.startsWith('oauth_custom_');
 
 /**
  * The email whose domain backs the connection: the user's primary address if
@@ -56,7 +57,6 @@ export const isEnterpriseConnectionConfigured = (
   if (!connection) {
     return false;
   }
-  // OIDC exposes only the client ID on the resource; the secret and manual endpoints are write-only.
   if (isOidcProvider(connection.provider)) {
     return Boolean(connection.oauthConfig?.clientId);
   }