diff --git a/.changeset/world-id-provider.md b/.changeset/world-id-provider.md new file mode 100644 index 00000000000..aa080798ac1 --- /dev/null +++ b/.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. diff --git a/packages/shared/src/oauth.ts b/packages/shared/src/oauth.ts index b6b86050b83..f82069089e9 100644 --- a/packages/shared/src/oauth.ts +++ b/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 { diff --git a/packages/shared/src/types/oauth.ts b/packages/shared/src/types/oauth.ts index d6ebc366323..3bfdd071f26 100644 --- a/packages/shared/src/types/oauth.ts +++ b/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; diff --git a/packages/shared/src/types/runtime-values.ts b/packages/shared/src/types/runtime-values.ts index 93844a29f93..1ac56f3d983 100644 --- a/packages/shared/src/types/runtime-values.ts +++ b/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', + }, ]; /** diff --git a/packages/ui/src/common/__tests__/ProviderIcon.test.tsx b/packages/ui/src/common/__tests__/ProviderIcon.test.tsx index 10c8ecddc71..94e23389bbf 100644 --- a/packages/ui/src/common/__tests__/ProviderIcon.test.tsx +++ b/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( , { 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); }); }); diff --git a/packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx b/packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx index 6824b96bafb..005e503b604 100644 --- a/packages/ui/src/hooks/__tests__/useEnabledThirdPartyProviders.test.tsx +++ b/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', ]);