feat(ui): show provider logo on enterprise connection chooser

.changeset/enterprise-connection-chooser-logo.md

@@ -0,0 +1,8 @@
+---
+'@clerk/ui': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/localizations': patch
+---
+
+Show the provider logo next to each connection name on the enterprise account chooser.

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

@@ -1251,6 +1251,8 @@ class SignUpFuture implements SignUpFutureResource {
 class SignUpEnterpriseConnection extends BaseResource implements SignUpEnterpriseConnectionResource {
   id!: string;
   name!: string;
+  provider!: string;
+  logoPublicUrl: string | null = null;
 
   constructor(data: SignUpEnterpriseConnectionJSON) {
     super();
@@ -1261,6 +1263,8 @@ class SignUpEnterpriseConnection extends BaseResource implements SignUpEnterpris
     if (data) {
       this.id = data.id;
       this.name = data.name;
+      this.provider = data.provider;
+      this.logoPublicUrl = data.logo_public_url ?? null;
     }
 
     return this;

packages/clerk-js/src/core/resources/__tests__/SignUp.test.ts

@@ -38,6 +38,37 @@ describe('SignUp', () => {
     expect(snapshot).toBeDefined();
   });
 
+  describe('__experimental_getEnterpriseConnections', () => {
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('maps the enterprise connection provider and logo', async () => {
+      BaseResource._fetch = vi.fn().mockResolvedValue({
+        response: [
+          {
+            object: 'enterprise_connection',
+            id: 'ent_1',
+            name: 'Acme',
+            provider: 'saml_okta',
+            logo_public_url: 'https://img.clerk.com/acme.png',
+          },
+          { object: 'enterprise_connection', id: 'ent_2', name: 'Globex', provider: 'oauth_microsoft' },
+        ],
+      });
+
+      const signUp = new SignUp({ id: 'signup_123' } as any);
+      const connections = await signUp.__experimental_getEnterpriseConnections();
+
+      expect(
+        connections.map(({ id, name, provider, logoPublicUrl }) => ({ id, name, provider, logoPublicUrl })),
+      ).toEqual([
+        { id: 'ent_1', name: 'Acme', provider: 'saml_okta', logoPublicUrl: 'https://img.clerk.com/acme.png' },
+        { id: 'ent_2', name: 'Globex', provider: 'oauth_microsoft', logoPublicUrl: null },
+      ]);
+    });
+  });
+
   describe('prepareVerification', () => {
     afterEach(() => {
       vi.clearAllMocks();

packages/localizations/src/en-US.ts

@@ -1708,8 +1708,8 @@ export const enUS: LocalizationResource = {
       title: 'Check your email',
     },
     enterpriseConnections: {
-      subtitle: 'Select the enterprise account with which you wish to continue.',
-      title: 'Choose your enterprise account',
+      subtitle: 'Select an enterprise account to continue.',
+      title: 'Choose an account',
     },
     enterpriseSSO: {
       formButtonPrimary: 'Continue with SSO',
@@ -1863,8 +1863,8 @@ export const enUS: LocalizationResource = {
       },
     },
     enterpriseConnections: {
-      subtitle: 'Select the enterprise account with which you wish to continue.',
-      title: 'Choose your enterprise account',
+      subtitle: 'Select an enterprise account to continue.',
+      title: 'Choose an account',
     },
     legalConsent: {
       checkbox: {

packages/shared/src/types/factors.ts

@@ -134,6 +134,16 @@ export type EnterpriseSSOFactor = {
    * @experimental
    */
   enterpriseConnectionName?: string;
+  /**
+   * The public URL of the enterprise connection logo.
+   * @experimental
+   */
+  enterpriseConnectionLogoPublicUrl?: string | null;
+  /**
+   * The provider of the enterprise connection.
+   * @experimental
+   */
+  enterpriseConnectionProvider?: string;
 };
 
 /** @inline */

packages/shared/src/types/json.ts

@@ -171,6 +171,8 @@ export interface ProtectCheckJSON {
 export interface SignUpEnterpriseConnectionJSON extends ClerkResourceJSON {
   id: string;
   name: string;
+  provider: string;
+  logo_public_url?: string | null;
 }
 
 export interface SessionJSON extends ClerkResourceJSON {

packages/shared/src/types/signUp.ts

@@ -139,4 +139,6 @@ export interface SignUpResource extends ClerkResource {
 export interface SignUpEnterpriseConnectionResource extends ClerkResource {
   id: string;
   name: string;
+  provider: string;
+  logoPublicUrl: string | null;
 }

packages/ui/src/common/ChooseEnterpriseConnectionCard.tsx

@@ -8,11 +8,13 @@ import { useCardState } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
 import type { InternalTheme, PropsOfComponent } from '@/ui/styledSystem';
 
+import { getEnterpriseProviderIconId, ProviderIcon } from './ProviderIcon';
+
 type ChooseEnterpriseConnectionCardProps = {
   title: LocalizationKey;
   subtitle: LocalizationKey;
   onClick: (id: string) => Promise<void>;
-  enterpriseConnections: Array<{ id: string; name: string }>;
+  enterpriseConnections: Array<{ id: string; name: string; logoPublicUrl?: string | null; provider?: string }>;
 };
 
 /**
@@ -40,11 +42,13 @@ export const ChooseEnterpriseConnectionCard = ({
           elementDescriptor={descriptors.enterpriseConnectionsRoot}
           gap={2}
         >
-          {enterpriseConnections?.map(({ id, name }) => (
+          {enterpriseConnections?.map(({ id, name, logoPublicUrl, provider }) => (
             <ChooseEnterpriseConnectionButton
               key={id}
               id={id}
               label={name}
+              logoPublicUrl={logoPublicUrl}
+              provider={provider}
               onClick={onClick}
             />
           ))}
@@ -60,12 +64,15 @@ export const ChooseEnterpriseConnectionCard = ({
 
 type ChooseEnterpriseConnectionButtonProps = Omit<PropsOfComponent<typeof SimpleButton>, 'onClick'> & {
   id: string;
-  label?: string;
+  label: string;
+  logoPublicUrl?: string | null;
+  provider?: string;
   onClick: (id: string) => Promise<void>;
 };
 
 const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButtonProps): JSX.Element => {
-  const { label, onClick, ...rest } = props;
+  const { label, logoPublicUrl, provider, onClick, ...rest } = props;
+  const providerIconId = provider ? getEnterpriseProviderIconId(provider) : undefined;
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = () => {
@@ -101,18 +108,27 @@ const ChooseEnterpriseConnectionButton = (props: ChooseEnterpriseConnectionButto
           overflow: 'hidden',
         }}
       >
-        {isLoading && (
-          <Flex
-            as='span'
-            center
-            sx={(theme: InternalTheme) => ({ flex: `0 0 ${theme.space.$4}` })}
-          >
+        <Flex
+          as='span'
+          center
+          sx={(theme: InternalTheme) => ({ flex: `0 0 ${theme.space.$4}` })}
+        >
+          {isLoading ? (
             <Spinner
               size='sm'
               elementDescriptor={descriptors.spinner}
             />
-          </Flex>
-        )}
+          ) : (
+            <ProviderIcon
+              id={providerIconId}
+              iconUrl={logoPublicUrl}
+              name={label}
+              alt={`${label}'s icon`}
+              elementDescriptor={[descriptors.providerIcon, descriptors.enterpriseButtonsProviderIcon]}
+              elementId={descriptors.providerIcon.setId(providerIconId)}
+            />
+          )}
+        </Flex>
         <Text
           elementDescriptor={descriptors.enterpriseConnectionButtonText}
           as='span'

packages/ui/src/common/ProviderIcon.tsx

@@ -9,11 +9,14 @@ type ProviderId = OAuthProvider | Web3Provider | PhoneCodeChannel;
 
 export const SUPPORTS_MASK_IMAGE = ['agentid', 'apple', 'github', 'okx_wallet', 'vercel', 'x'] as const;
 
-const supportsMaskImage = (id: ProviderId): boolean => {
-  return (SUPPORTS_MASK_IMAGE as readonly string[]).includes(id);
+export const getEnterpriseProviderIconId = (provider: string) =>
+  provider.replace(/(oauth_|saml_)/, '').trim() as OAuthProvider;
+
+const supportsMaskImage = (id?: ProviderId): boolean => {
+  return !!id && (SUPPORTS_MASK_IMAGE as readonly string[]).includes(id);
 };
 
-const getIconImageStyles = (theme: InternalTheme, id: ProviderId, iconUrl: string) => {
+const getIconImageStyles = (theme: InternalTheme, id: ProviderId | undefined, iconUrl: string) => {
   if (supportsMaskImage(id)) {
     return {
       '--cl-icon-fill': theme.colors.$colorForeground,
@@ -41,7 +44,7 @@ export type ProviderIconProps = Omit<
   PropsOfComponent<typeof Span>,
   'elementDescriptor' | 'elementId' | 'aria-label'
 > & {
-  id: ProviderId;
+  id?: ProviderId;
   iconUrl?: string | null;
   name: string;
   size?: string;

packages/ui/src/common/ProviderInitialIcon.tsx

@@ -6,7 +6,7 @@ import { common } from '../styledSystem';
 
 type ProviderInitialIconProps = PropsOfComponent<typeof Box> & {
   value: string;
-  id: Web3Provider | OAuthProvider | PhoneCodeProvider;
+  id?: Web3Provider | OAuthProvider | PhoneCodeProvider;
 };
 
 export const ProviderInitialIcon = (props: ProviderInitialIconProps) => {

packages/ui/src/components/OrganizationProfile/EnterpriseConnectionPage/index.tsx

@@ -1,12 +1,12 @@
-import type { EnterpriseConnectionResource, OAuthProvider } from '@clerk/shared/types';
+import type { EnterpriseConnectionResource } from '@clerk/shared/types';
 
 import { Card } from '@/elements/Card';
 import { useCardState, withCardStateProvider } from '@/elements/contexts';
 import { Header } from '@/elements/Header';
 import { ProfileCard } from '@/elements/ProfileCard';
 import { handleError } from '@/utils/errorHandler';
 
-import { ProviderIcon } from '../../../common';
+import { getEnterpriseProviderIconId, ProviderIcon } from '../../../common';
 import { Badge, Button, Col, descriptors, Flex, localizationKeys, Text } from '../../../customizables';
 import { isOidcProvider } from '../../ConfigureSSO/domain/organizationEnterpriseConnection';
 import { providerLabel, toProviderCard } from '../../ConfigureSSO/domain/providers';
@@ -146,7 +146,7 @@ const ConnectionHeader = ({
         sx={t => ({ gap: t.space.$2 })}
       >
         <ProviderIcon
-          id={connection.provider.replace(/(oauth_|saml_)/, '').trim() as OAuthProvider}
+          id={getEnterpriseProviderIconId(connection.provider)}
           iconUrl={connection.logoPublicUrl?.trim() || undefined}
           name={connection.name}
           elementDescriptor={descriptors.organizationProfileSecuritySsoProviderIcon}

packages/ui/src/components/OrganizationProfile/SecuritySsoSection.tsx

@@ -1,9 +1,9 @@
-import type { EnterpriseConnectionResource, OAuthProvider } from '@clerk/shared/types';
+import type { EnterpriseConnectionResource } from '@clerk/shared/types';
 
 import { ProfileSection } from '@/ui/elements/Section';
 import { Tooltip } from '@/ui/elements/Tooltip';
 
-import { ProviderIcon } from '../../common';
+import { getEnterpriseProviderIconId, ProviderIcon } from '../../common';
 import { useEnvironment } from '../../contexts';
 import {
   Badge,
@@ -132,7 +132,7 @@ const ConnectionRow = ({ connection, onOpenConnection }: ConnectionRowProps): JS
         sx={t => ({ minWidth: 0, flex: 1, gap: t.space.$2 })}
       >
         <ProviderIcon
-          id={connection.provider.replace(/(oauth_|saml_)/, '').trim() as OAuthProvider}
+          id={getEnterpriseProviderIconId(connection.provider)}
           iconUrl={connection.logoPublicUrl?.trim() || undefined}
           name={connection.name}
           elementDescriptor={descriptors.organizationProfileSecuritySsoProviderIcon}

packages/ui/src/components/SignIn/SignInFactorOneEnterpriseConnections.tsx

@@ -26,6 +26,8 @@ const SignInFactorOneEnterpriseConnectionsInternal = () => {
   const enterpriseConnections = signIn.supportedFirstFactors.map(ff => ({
     id: ff.enterpriseConnectionId,
     name: ff.enterpriseConnectionName,
+    logoPublicUrl: ff.enterpriseConnectionLogoPublicUrl,
+    provider: ff.enterpriseConnectionProvider,
   }));
 
   const handleEnterpriseSSO = (enterpriseConnectionId: string) => {

packages/ui/src/components/SignIn/SignInFactorOneSSOBypass.tsx

@@ -99,6 +99,8 @@ export const SignInFactorOneSSOBypass = (props: SignInFactorOneSSOBypassProps) =
     const enterpriseConnections = signIn.supportedFirstFactors.map(factor => ({
       id: factor.enterpriseConnectionId,
       name: factor.enterpriseConnectionName,
+      logoPublicUrl: factor.enterpriseConnectionLogoPublicUrl,
+      provider: factor.enterpriseConnectionProvider,
     }));
 
     return (

packages/ui/src/components/SignIn/__tests__/SignInFactorOneEnterpriseConnections.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen } from '@/test/utils';
+
+import { SignInFactorOne } from '../SignInFactorOne';
+
+const { createFixtures } = bindCreateFixtures('SignIn');
+
+describe('SignInFactorOneEnterpriseConnections', () => {
+  it('renders each connection with its logo, or its initial when there is no logo', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.startSignInWithEnterpriseSSO({
+        enterpriseConnections: [
+          {
+            id: 'conn_msft',
+            name: 'Microsoft Engineering',
+            logoPublicUrl: 'https://img.clerk.com/msft.png',
+            provider: 'saml_microsoft',
+          },
+          { id: 'conn_okta', name: 'Okta', provider: 'saml_okta' },
+        ],
+      });
+    });
+
+    render(<SignInFactorOne />, { wrapper });
+
+    await screen.findByText('Choose an account');
+    screen.getByText('Select an enterprise account to continue.');
+
+    const logo = screen.getByLabelText("Microsoft Engineering's icon");
+    expect(logo).toHaveStyle({ backgroundImage: 'url(https://img.clerk.com/msft.png)' });
+    expect(logo).toHaveClass('cl-providerIcon__microsoft');
+
+    const oktaButton = screen.getByRole('button', { name: /Okta/ });
+    expect(oktaButton.querySelector('.cl-socialButtonsProviderInitialIcon__okta')).toHaveTextContent('O');
+    expect(screen.queryByLabelText("Okta's icon")).not.toBeInTheDocument();
+  });
+
+  it('renders the logo and initial when the backend omits the provider', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.startSignInWithEnterpriseSSO({
+        enterpriseConnections: [
+          { id: 'conn_msft', name: 'Microsoft Engineering', logoPublicUrl: 'https://img.clerk.com/msft.png' },
+          { id: 'conn_okta', name: 'Okta' },
+        ],
+      });
+    });
+
+    render(<SignInFactorOne />, { wrapper });
+
+    const logo = await screen.findByLabelText("Microsoft Engineering's icon");
+    expect(logo).toHaveStyle({ backgroundImage: 'url(https://img.clerk.com/msft.png)' });
+
+    const oktaButton = screen.getByRole('button', { name: /Okta/ });
+    expect(oktaButton.querySelector('.cl-socialButtonsProviderInitialIcon')).toHaveTextContent('O');
+  });
+});