feat(ui): display OIDC authorized redirect URI

.changeset/blue-owls-remember.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/localizations': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Add the four setup steps to the experimental OIDC self-serve SSO configuration flow, including copyable authorized and debug redirect URIs, ID-token claims, endpoint configuration, application credentials, and optional scopes. OIDC connections now expose their callback, authorization, token, and user-info endpoints.

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

@@ -59,7 +59,12 @@ function oauthConfigFromJSON(data: EnterpriseOAuthConfigJSON): EnterpriseOAuthCo
     name: data.name,
     clientId: data.client_id,
     providerKey: data.provider_key,
+    redirectUri: data.redirect_uri,
+    debugRedirectUri: data.debug_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 +78,12 @@ function oauthConfigToJSON(data: EnterpriseOAuthConfigResource): EnterpriseOAuth
     name: data.name,
     client_id: data.clientId,
     provider_key: data.providerKey,
+    redirect_uri: data.redirectUri,
+    debug_redirect_uri: data.debugRedirectUri,
     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

@@ -241,17 +241,91 @@ export const enUS: LocalizationResource = {
       },
       oidcCustom: {
         claimsStep: {
+          attributeMappingTable: {
+            columns: {
+              attributeName: 'Attribute Name',
+              userAttribute: 'User Attribute',
+            },
+            rows: {
+              subject: {
+                attributeName: 'External user ID',
+                userAttribute: 'sub',
+              },
+              email: {
+                attributeName: 'Primary email',
+                userAttribute: 'email',
+              },
+              firstName: {
+                attributeName: 'First name',
+                userAttribute: 'given_name',
+              },
+              lastName: {
+                attributeName: 'Last name',
+                userAttribute: 'family_name',
+              },
+            },
+          },
           headerSubtitle: 'Set the claims your identity provider includes in the ID token',
+          paragraph: 'Your user ID token must include the following claims:',
         },
         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.',
+          scopes: {
+            addButton: 'Add',
+            label: 'Scopes',
+            optional: 'Optional',
+            placeholder: 'Paste scope here...',
+          },
         },
         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:',
+          redirectUri: {
+            label: 'Authorized redirect URI',
+          },
+          debugRedirectUri: {
+            label: 'Authorized redirect URL (only for debug)',
+          },
         },
       },
       samlCustom: {

packages/shared/src/types/elementIds.ts

@@ -31,6 +31,15 @@ export type FieldId =
   | 'idpMetadata'
   | 'idpMetadataUrl'
   | 'idpSsoUrl'
+  | 'discoveryUrl'
+  | 'authUrl'
+  | 'tokenUrl'
+  | 'userInfoUrl'
+  | 'clientId'
+  | 'clientSecret'
+  | 'scopes'
+  | 'redirectUri'
+  | 'debugRedirectUri'
   | 'acsUrl'
   | 'spEntityId'
   | 'web3WalletName'

packages/shared/src/types/enterpriseConnection.ts

@@ -100,7 +100,12 @@ export interface EnterpriseOAuthConfigJSON {
   name: string;
   provider_key?: string;
   client_id: string;
+  redirect_uri?: string;
+  debug_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 +117,12 @@ export interface EnterpriseOAuthConfigResource {
   name: string;
   clientId: string;
   providerKey?: string;
+  redirectUri?: string;
+  debugRedirectUri?: 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,87 @@ export type __internal_LocalizationResource = {
         mainHeaderTitle: LocalizationValue;
         redirectUriStep: {
           headerSubtitle: LocalizationValue;
+          paragraph: LocalizationValue;
+          redirectUri: {
+            label: LocalizationValue;
+          };
+          debugRedirectUri: {
+            label: LocalizationValue;
+          };
         };
         claimsStep: {
+          attributeMappingTable: {
+            columns: {
+              attributeName: LocalizationValue;
+              userAttribute: LocalizationValue;
+            };
+            rows: {
+              subject: {
+                attributeName: LocalizationValue;
+                userAttribute: LocalizationValue;
+              };
+              email: {
+                attributeName: LocalizationValue;
+                userAttribute: LocalizationValue;
+              };
+              firstName: {
+                attributeName: LocalizationValue;
+                userAttribute: LocalizationValue;
+              };
+              lastName: {
+                attributeName: LocalizationValue;
+                userAttribute: LocalizationValue;
+              };
+            };
+          };
           headerSubtitle: LocalizationValue;
+          paragraph: 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;
+          scopes: {
+            addButton: LocalizationValue;
+            label: LocalizationValue;
+            optional: LocalizationValue;
+            placeholder: LocalizationValue;
+          };
         };
       };
       samlOkta: {