feat(shared,ui): add World ID provider

.changeset/world-id-provider.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': minor
+'@clerk/ui': patch
+---
+
+Add support for the `oauth_world_id` sign-in strategy. Instances with a World ID connection enabled can display World ID alongside their existing social connections.

packages/shared/src/oauth.ts

@@ -180,6 +180,12 @@ export const OAUTH_PROVIDERS: OAuthProviderData[] = [
     name: 'AgentID',
     docsUrl: 'https://clerk.com/docs/guides/configure/auth-strategies/social-connections/agentid',
   },
+  {
+    provider: 'world_id',
+    strategy: 'oauth_world_id',
+    name: 'World ID',
+    docsUrl: 'https://clerk.com/docs/guides/configure/auth-strategies/social-connections/world-id',
+  },
 ];
 
 interface getOAuthProviderDataProps {

packages/shared/src/types/oauth.ts

@@ -70,6 +70,8 @@ export type VercelOauthProvider = 'vercel';
 /** @inline */
 export type AgentIDOauthProvider = 'agentid';
 /** @inline */
+export type WorldIDOauthProvider = 'world_id';
+/** @inline */
 export type CustomOauthProvider = `custom_${string}`;
 
 /** Represents the available OAuth providers. */
@@ -104,4 +106,5 @@ export type OAuthProvider =
   | HuggingfaceOAuthProvider
   | VercelOauthProvider
   | AgentIDOauthProvider
+  | WorldIDOauthProvider
   | CustomOauthProvider;

packages/shared/src/types/runtime-values.ts

@@ -233,6 +233,12 @@ export const OAUTH_PROVIDERS: OAuthProviderData[] = [
     name: 'AgentID',
     docsUrl: 'https://clerk.com/docs/guides/configure/auth-strategies/social-connections/agentid',
   },
+  {
+    provider: 'world_id',
+    strategy: 'oauth_world_id',
+    name: 'World ID',
+    docsUrl: 'https://clerk.com/docs/guides/configure/auth-strategies/social-connections/world-id',
+  },
 ];
 
 /**

packages/ui/src/common/__tests__/ProviderIcon.test.tsx

@@ -68,24 +68,25 @@ describe('ProviderIcon', () => {
       expect(styles.backgroundImage).not.toContain(iconUrl);
     });
 
-    it('applies background-image styles for non-mask-image providers', async () => {
+    it.each(['google', 'world_id'] as const)('preserves the original colors for provider %s', async id => {
       const { wrapper } = await createFixtures();
+      const iconUrl = `https://example.com/${id}-icon.svg`;
 
       render(
         <ProviderIcon
-          id='google'
-          iconUrl='https://example.com/google-icon.svg'
-          name='Google'
+          id={id}
+          iconUrl={iconUrl}
+          name={id}
         />,
         { wrapper },
       );
 
-      const icon = screen.getByLabelText('Google icon');
+      const icon = screen.getByLabelText(`${id} icon`);
       expect(icon).toBeInTheDocument();
 
       const styles = window.getComputedStyle(icon);
-      expect(styles.backgroundImage).toContain('https://example.com/google-icon.svg');
-      expect(styles.maskImage).not.toContain('https://example.com/google-icon.svg');
+      expect(styles.backgroundImage).toContain(iconUrl);
+      expect(styles.maskImage).not.toContain(iconUrl);
     });
   });
 

packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx

@@ -58,6 +58,7 @@ describe('useEnabledThirdPartyProviders', () => {
       'oauth_twitch',
       'oauth_twitter',
       'oauth_vercel',
+      'oauth_world_id',
       'oauth_x',
       'oauth_xero',
     ]);