From 0bc3ccc5bd4a93121bb7e7d6a32271af9c31f8c3 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 5 Dec 2024 13:30:45 +0200 Subject: [PATCH] chore(shared,types): Move constants from types to shared (#4716) --- .changeset/curvy-sloths-dress.md | 7 + .changeset/honest-news-peel.md | 7 + .changeset/quiet-timers-mate.md | 10 + packages/clerk-js/src/ui/common/constants.ts | 30 +-- .../hooks/useEnabledThirdPartyProviders.tsx | 4 +- .../src/utils/third-party-strategies.ts | 3 +- packages/shared/package.json | 4 +- packages/shared/src/oauth.ts | 188 ++++++++++++++++++ packages/shared/src/web3.ts | 19 ++ packages/types/src/oauth.ts | 10 + packages/types/src/web3.ts | 7 + packages/ui/src/descriptors.ts | 4 +- 12 files changed, 259 insertions(+), 34 deletions(-) create mode 100644 .changeset/curvy-sloths-dress.md create mode 100644 .changeset/honest-news-peel.md create mode 100644 .changeset/quiet-timers-mate.md create mode 100644 packages/shared/src/oauth.ts create mode 100644 packages/shared/src/web3.ts diff --git a/.changeset/curvy-sloths-dress.md b/.changeset/curvy-sloths-dress.md new file mode 100644 index 0000000000..c9b55ad3e6 --- /dev/null +++ b/.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`. diff --git a/.changeset/honest-news-peel.md b/.changeset/honest-news-peel.md new file mode 100644 index 0000000000..1ecd88a9fd --- /dev/null +++ b/.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` diff --git a/.changeset/quiet-timers-mate.md b/.changeset/quiet-timers-mate.md new file mode 100644 index 0000000000..24abbb7d5a --- /dev/null +++ b/.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()` diff --git a/packages/clerk-js/src/ui/common/constants.ts b/packages/clerk-js/src/ui/common/constants.ts index c1ab8ea7e5..81c6e15226 100644 --- a/packages/clerk-js/src/ui/common/constants.ts +++ b/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]; -} diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx index 00c65c1895..622b0ef042 100644 --- a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx +++ b/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'; diff --git a/packages/elements/src/utils/third-party-strategies.ts b/packages/elements/src/utils/third-party-strategies.ts index c46bd33cf5..eabd404440 100644 --- a/packages/elements/src/utils/third-party-strategies.ts +++ b/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'; diff --git a/packages/shared/package.json b/packages/shared/package.json index 62fcc5bdc5..e04d154881 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -112,7 +112,9 @@ "utils", "workerTimers", "devBrowser", - "object" + "object", + "oauth", + "web3" ], "scripts": { "build": "tsup", diff --git a/packages/shared/src/oauth.ts b/packages/shared/src/oauth.ts new file mode 100644 index 0000000000..7e809b6f0f --- /dev/null +++ b/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); +} diff --git a/packages/shared/src/web3.ts b/packages/shared/src/web3.ts new file mode 100644 index 0000000000..a28ae8bfb6 --- /dev/null +++ b/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', + }, +]; diff --git a/packages/types/src/oauth.ts b/packages/types/src/oauth.ts index cb12c94157..f059c6e120 100644 --- a/packages/types/src/oauth.ts +++ b/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); diff --git a/packages/types/src/web3.ts b/packages/types/src/web3.ts index deab9048d2..d01463c1b0 100644 --- a/packages/types/src/web3.ts +++ b/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, diff --git a/packages/ui/src/descriptors.ts b/packages/ui/src/descriptors.ts index 9c4c07f68e..605438d5f0 100644 --- a/packages/ui/src/descriptors.ts +++ b/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