chore(shared,types): Move constants from types to shared (#4716)

.changeset/curvy-sloths-dress.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/elements': minor
+'@clerk/ui': minor
+---
+
+Replace usage of `OAUTH_PROVIDERS` and `WEB3_PROVIDERS` from `@clerk/types` to `@clerk/shared`.

.changeset/honest-news-peel.md

@@ -0,0 +1,7 @@
+---
+'@clerk/shared': minor
+---
+
+Introduce new submodules:
+- Export `OAUTH_PROVIDERS` from `@clerk/shared/oauth`
+- Export `WEB3_PROVIDERS` from `@clerk/shared/web3`

.changeset/quiet-timers-mate.md

@@ -0,0 +1,10 @@
+---
+'@clerk/types': minor
+---
+
+Deprecate the following constants and functions:
+- `OAUTH_PROVIDERS`
+- `getOAuthProviderData()`
+- `sortedOAuthProviders()`
+- `WEB3_PROVIDERS`
+- `getWeb3ProviderData()`

packages/clerk-js/src/ui/common/constants.ts

@@ -1,4 +1,4 @@
-import type { Attribute, Web3Provider } from '@clerk/types';
+import type { Attribute } from '@clerk/types';
 
 import type { LocalizationKey } from '../localization/localizationKeys';
 import { localizationKeys } from '../localization/localizationKeys';
@@ -77,31 +77,3 @@ export const PREFERRED_SIGN_IN_STRATEGIES = Object.freeze({
   Password: 'password',
   OTP: 'otp',
 });
-
-interface Web3ProviderData {
-  id: string;
-  name: string;
-}
-
-type Web3Providers = {
-  [key in Web3Provider]: Web3ProviderData;
-};
-
-export const WEB3_PROVIDERS: Web3Providers = Object.freeze({
-  metamask: {
-    id: 'metamask',
-    name: 'MetaMask',
-  },
-  coinbase_wallet: {
-    id: 'coinbase_wallet',
-    name: 'Coinbase Wallet',
-  },
-  okx_wallet: {
-    id: 'okx_wallet',
-    name: 'OKX Wallet',
-  },
-});
-
-export function getWeb3ProviderData(name: Web3Provider): Web3ProviderData | undefined | null {
-  return WEB3_PROVIDERS[name];
-}

packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx

@@ -1,7 +1,7 @@
 import { iconImageUrl } from '@clerk/shared/constants';
+import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
+import { WEB3_PROVIDERS } from '@clerk/shared/web3';
 import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
-// TODO: This import shouldn't be part of @clerk/types
-import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types';
 
 import { useEnvironment } from '../contexts/EnvironmentContext';
 import { fromEntries } from '../utils';

packages/elements/src/utils/third-party-strategies.ts

@@ -1,6 +1,8 @@
 // c.f. vendor/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx [Modified]
 
 import { iconImageUrl } from '@clerk/shared/constants';
+import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
+import { WEB3_PROVIDERS } from '@clerk/shared/web3';
 import type {
   EnvironmentResource,
   OAuthProvider,
@@ -9,7 +11,6 @@ import type {
   Web3Provider,
   Web3Strategy,
 } from '@clerk/types';
-import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types'; // TODO: This import shouldn't be part of @clerk/types
 
 import { fromEntries } from './clerk-js';
 

packages/shared/package.json

@@ -112,7 +112,9 @@
     "utils",
     "workerTimers",
     "devBrowser",
-    "object"
+    "object",
+    "oauth",
+    "web3"
   ],
   "scripts": {
     "build": "tsup",

packages/shared/src/oauth.ts

@@ -0,0 +1,188 @@
+import type { OAuthProvider, OAuthProviderData, OAuthStrategy } from '@clerk/types';
+
+export const OAUTH_PROVIDERS: OAuthProviderData[] = [
+  {
+    provider: 'google',
+    strategy: 'oauth_google',
+    name: 'Google',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/google',
+  },
+  {
+    provider: 'discord',
+    strategy: 'oauth_discord',
+    name: 'Discord',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/discord',
+  },
+  {
+    provider: 'facebook',
+    strategy: 'oauth_facebook',
+    name: 'Facebook',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/facebook',
+  },
+  {
+    provider: 'twitch',
+    strategy: 'oauth_twitch',
+    name: 'Twitch',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/twitch',
+  },
+  {
+    provider: 'twitter',
+    strategy: 'oauth_twitter',
+    name: 'Twitter',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/twitter',
+  },
+  {
+    provider: 'microsoft',
+    strategy: 'oauth_microsoft',
+    name: 'Microsoft',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/microsoft',
+  },
+  {
+    provider: 'tiktok',
+    strategy: 'oauth_tiktok',
+    name: 'TikTok',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/tiktok',
+  },
+  {
+    provider: 'linkedin',
+    strategy: 'oauth_linkedin',
+    name: 'LinkedIn',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/linkedin',
+  },
+  {
+    provider: 'linkedin_oidc',
+    strategy: 'oauth_linkedin_oidc',
+    name: 'LinkedIn',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/linkedin-oidc',
+  },
+  {
+    provider: 'github',
+    strategy: 'oauth_github',
+    name: 'GitHub',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/github',
+  },
+  {
+    provider: 'gitlab',
+    strategy: 'oauth_gitlab',
+    name: 'GitLab',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/gitlab',
+  },
+  {
+    provider: 'dropbox',
+    strategy: 'oauth_dropbox',
+    name: 'Dropbox',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/dropbox',
+  },
+  {
+    provider: 'atlassian',
+    strategy: 'oauth_atlassian',
+    name: 'Atlassian',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/atlassian',
+  },
+  {
+    provider: 'bitbucket',
+    strategy: 'oauth_bitbucket',
+    name: 'Bitbucket',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/bitbucket',
+  },
+  {
+    provider: 'hubspot',
+    strategy: 'oauth_hubspot',
+    name: 'HubSpot',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/hubspot',
+  },
+  {
+    provider: 'notion',
+    strategy: 'oauth_notion',
+    name: 'Notion',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/notion',
+  },
+  {
+    provider: 'apple',
+    strategy: 'oauth_apple',
+    name: 'Apple',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/apple',
+  },
+  {
+    provider: 'line',
+    strategy: 'oauth_line',
+    name: 'LINE',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/line',
+  },
+  {
+    provider: 'instagram',
+    strategy: 'oauth_instagram',
+    name: 'Instagram',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/instagram',
+  },
+  {
+    provider: 'coinbase',
+    strategy: 'oauth_coinbase',
+    name: 'Coinbase',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/coinbase',
+  },
+  {
+    provider: 'spotify',
+    strategy: 'oauth_spotify',
+    name: 'Spotify',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/spotify',
+  },
+  {
+    provider: 'xero',
+    strategy: 'oauth_xero',
+    name: 'Xero',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/xero',
+  },
+  {
+    provider: 'box',
+    strategy: 'oauth_box',
+    name: 'Box',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/box',
+  },
+  {
+    provider: 'slack',
+    strategy: 'oauth_slack',
+    name: 'Slack',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/slack',
+  },
+  {
+    provider: 'linear',
+    strategy: 'oauth_linear',
+    name: 'Linear',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/linear',
+  },
+  {
+    provider: 'x',
+    strategy: 'oauth_x',
+    name: 'X / Twitter',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/x-twitter-v2',
+  },
+  {
+    provider: 'enstall',
+    strategy: 'oauth_enstall',
+    name: 'Enstall',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/enstall',
+  },
+  {
+    provider: 'huggingface',
+    strategy: 'oauth_huggingface',
+    name: 'Hugging Face',
+    docsUrl: 'https://clerk.com/docs/authentication/social-connections/huggingface',
+  },
+];
+
+interface getOAuthProviderDataProps {
+  provider?: OAuthProvider;
+  strategy?: OAuthStrategy;
+}
+
+export function getOAuthProviderData({
+  provider,
+  strategy,
+}: getOAuthProviderDataProps): OAuthProviderData | undefined | null {
+  if (provider) {
+    return OAUTH_PROVIDERS.find(oauth_provider => oauth_provider.provider == provider);
+  }
+
+  return OAUTH_PROVIDERS.find(oauth_provider => oauth_provider.strategy == strategy);
+}

packages/shared/src/web3.ts

@@ -0,0 +1,19 @@
+import type { Web3ProviderData } from '@clerk/types';
+
+export const WEB3_PROVIDERS: Web3ProviderData[] = [
+  {
+    provider: 'metamask',
+    strategy: 'web3_metamask_signature',
+    name: 'MetaMask',
+  },
+  {
+    provider: 'coinbase_wallet',
+    strategy: 'web3_coinbase_wallet_signature',
+    name: 'Coinbase Wallet',
+  },
+  {
+    provider: 'okx_wallet',
+    strategy: 'web3_okx_wallet_signature',
+    name: 'OKX Wallet',
+  },
+];

packages/types/src/oauth.ts

@@ -70,6 +70,10 @@ export type OAuthProvider =
   | HuggingfaceOAuthProvider
   | CustomOauthProvider;
 
+/**
+ * @deprecated This utility will be dropped in the next major release.
+ * You can import it from `@clerk/shared/oauth`.
+ */
 export const OAUTH_PROVIDERS: OAuthProviderData[] = [
   {
     provider: 'google',
@@ -246,6 +250,9 @@ interface getOAuthProviderDataProps {
   strategy?: OAuthStrategy;
 }
 
+/**
+ * @deprecated This utility will be dropped in the next major release.
+ */
 export function getOAuthProviderData({
   provider,
   strategy,
@@ -257,6 +264,9 @@ export function getOAuthProviderData({
   return OAUTH_PROVIDERS.find(oauth_provider => oauth_provider.strategy == strategy);
 }
 
+/**
+ * @deprecated This utility will be dropped in the next major release.
+ */
 export function sortedOAuthProviders(sortingArray: OAuthStrategy[]) {
   return OAUTH_PROVIDERS.slice().sort((a, b) => {
     let aPos = sortingArray.indexOf(a.strategy);

packages/types/src/web3.ts

@@ -12,6 +12,10 @@ export type OKXWalletWeb3Provider = 'okx_wallet';
 
 export type Web3Provider = MetamaskWeb3Provider | CoinbaseWalletWeb3Provider | OKXWalletWeb3Provider;
 
+/**
+ * @deprecated This constant will be dropped in the next major release.
+ * You can import it from `@clerk/shared/web3`.
+ */
 export const WEB3_PROVIDERS: Web3ProviderData[] = [
   {
     provider: 'metamask',
@@ -35,6 +39,9 @@ interface getWeb3ProviderDataProps {
   strategy?: Web3Strategy;
 }
 
+/**
+ * @deprecated This utility will be dropped in the next major release.
+ */
 export function getWeb3ProviderData({
   provider,
   strategy,

packages/ui/src/descriptors.ts

@@ -1,4 +1,6 @@
-import { OAUTH_PROVIDERS, type OAuthProvider, WEB3_PROVIDERS, type Web3Provider } from '@clerk/types';
+import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
+import { WEB3_PROVIDERS } from '@clerk/shared/web3';
+import type { OAuthProvider, Web3Provider } from '@clerk/types';
 
 export const DESCRIPTORS = [
   // Alert