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);
  }

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);
  }

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);
  }

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);
  }

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);
  }

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);
  }

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);
  }

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);
  }