diff --git a/.changeset/twelve-ducks-refuse.md b/.changeset/twelve-ducks-refuse.md new file mode 100644 index 00000000000..5a5660efc1a --- /dev/null +++ b/.changeset/twelve-ducks-refuse.md @@ -0,0 +1,7 @@ +--- +'@clerk/chrome-extension': minor +--- + +- Explicitly mark `GoogleOneTap` and `SignInWithMetamaskButton` UI components as deprecated and unsupported (due to the requirement of Remotely Hosted Code) to help avoid confusion. + +- Enable Metamask and OKXWallet Web3 for non-popup extensions. diff --git a/packages/chrome-extension/src/index.ts b/packages/chrome-extension/src/index.ts index ab37920c279..931e8970374 100644 --- a/packages/chrome-extension/src/index.ts +++ b/packages/chrome-extension/src/index.ts @@ -1,8 +1,9 @@ export * from '@clerk/clerk-react'; + export type { StorageCache } from './internal/utils/storage'; -// The order matters since we want override @clerk/clerk-react ClerkProvider -export { ClerkProvider } from './react'; +// The order matters since we want override @clerk/clerk-react components +export { ClerkProvider, GoogleOneTap } from './react'; // Override Clerk React error thrower to show that errors come from @clerk/chrome-extension import { setErrorThrowerOptions } from '@clerk/clerk-react/internal'; diff --git a/packages/chrome-extension/src/react/NotSupported.tsx b/packages/chrome-extension/src/react/NotSupported.tsx new file mode 100644 index 00000000000..61c2b2f8ba8 --- /dev/null +++ b/packages/chrome-extension/src/react/NotSupported.tsx @@ -0,0 +1,5 @@ +/** + * @deprecated This component is not supported in Browser Extensions due to Chrome's security restrictions around remotely hosted code. + * @see https://clerk.com/docs/references/browser-extensions/browser-security-restrictions + */ +export const GoogleOneTap = () => null; diff --git a/packages/chrome-extension/src/react/index.ts b/packages/chrome-extension/src/react/index.ts index aebcfc5ad9b..021c0abf88a 100644 --- a/packages/chrome-extension/src/react/index.ts +++ b/packages/chrome-extension/src/react/index.ts @@ -1 +1,2 @@ export { ClerkProvider } from './ClerkProvider'; +export { GoogleOneTap } from './NotSupported'; diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 7dc496acdd1..7e27858023f 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -1986,11 +1986,6 @@ export class Clerk implements ClerkInterface { }; public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Metamask'); - return; - } - await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature', @@ -1998,11 +1993,6 @@ export class Clerk implements ClerkInterface { }; public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Coinbase Wallet'); - return; - } - await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature', @@ -2010,11 +2000,6 @@ export class Clerk implements ClerkInterface { }; public authenticateWithOKXWallet = async (props: AuthenticateWithOKXWalletParams = {}): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('OKX Wallet'); - return; - } - await this.authenticateWithWeb3({ ...props, strategy: 'web3_okx_wallet_signature', @@ -2030,11 +2015,6 @@ export class Clerk implements ClerkInterface { legalAccepted, secondFactorUrl, }: ClerkAuthenticateWithWeb3Params): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Web3'); - return; - } - if (!this.client || !this.environment) { return; } diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts index 3bab7e51413..cf39bbab220 100644 --- a/packages/clerk-js/src/core/resources/SignIn.ts +++ b/packages/clerk-js/src/core/resources/SignIn.ts @@ -61,7 +61,6 @@ import { clerkInvalidStrategy, clerkMissingOptionError, clerkMissingWebAuthnPublicKeyOptions, - clerkUnsupportedEnvironmentWarning, clerkVerifyEmailAddressCalledBeforeCreate, clerkVerifyPasskeyCalledBeforeCreate, clerkVerifyWeb3WalletCalledBeforeCreate, @@ -274,11 +273,6 @@ export class SignIn extends BaseResource implements SignInResource { }; public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Web3'); - return this; - } - const { identifier, generateSignature, strategy = 'web3_metamask_signature' } = params || {}; const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider; @@ -325,11 +319,6 @@ export class SignIn extends BaseResource implements SignInResource { }; public authenticateWithMetamask = async (): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Metamask'); - return this; - } - const identifier = await getMetamaskIdentifier(); return this.authenticateWithWeb3({ identifier, @@ -339,11 +328,6 @@ export class SignIn extends BaseResource implements SignInResource { }; public authenticateWithCoinbaseWallet = async (): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Coinbase Wallet'); - return this; - } - const identifier = await getCoinbaseWalletIdentifier(); return this.authenticateWithWeb3({ identifier, @@ -353,11 +337,6 @@ export class SignIn extends BaseResource implements SignInResource { }; public authenticateWithOKXWallet = async (): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('OKX Wallet'); - return this; - } - const identifier = await getOKXWalletIdentifier(); return this.authenticateWithWeb3({ identifier, diff --git a/packages/clerk-js/src/core/resources/SignUp.ts b/packages/clerk-js/src/core/resources/SignUp.ts index 78db8f0b78e..db934a95930 100644 --- a/packages/clerk-js/src/core/resources/SignUp.ts +++ b/packages/clerk-js/src/core/resources/SignUp.ts @@ -42,7 +42,6 @@ import { normalizeUnsafeMetadata } from '../../utils/resourceParams'; import { clerkInvalidFAPIResponse, clerkMissingOptionError, - clerkUnsupportedEnvironmentWarning, clerkVerifyEmailAddressCalledBeforeCreate, clerkVerifyWeb3WalletCalledBeforeCreate, } from '../errors'; @@ -183,11 +182,6 @@ export class SignUp extends BaseResource implements SignUpResource { legalAccepted?: boolean; }, ): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Web3'); - return this; - } - const { generateSignature, identifier, @@ -237,11 +231,6 @@ export class SignUp extends BaseResource implements SignUpResource { legalAccepted?: boolean; }, ): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Metamask'); - return this; - } - const identifier = await getMetamaskIdentifier(); return this.authenticateWithWeb3({ identifier, @@ -257,11 +246,6 @@ export class SignUp extends BaseResource implements SignUpResource { legalAccepted?: boolean; }, ): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('Coinbase Wallet'); - return this; - } - const identifier = await getCoinbaseWalletIdentifier(); return this.authenticateWithWeb3({ identifier, @@ -277,11 +261,6 @@ export class SignUp extends BaseResource implements SignUpResource { legalAccepted?: boolean; }, ): Promise => { - if (__BUILD_DISABLE_RHC__) { - clerkUnsupportedEnvironmentWarning('OKX Wallet'); - return this; - } - const identifier = await getOKXWalletIdentifier(); return this.authenticateWithWeb3({ identifier, diff --git a/packages/clerk-js/src/utils/web3.ts b/packages/clerk-js/src/utils/web3.ts index fd0653033cd..f6e73f1170c 100644 --- a/packages/clerk-js/src/utils/web3.ts +++ b/packages/clerk-js/src/utils/web3.ts @@ -1,5 +1,7 @@ import type { Web3Provider } from '@clerk/types'; +import { clerkUnsupportedEnvironmentWarning } from '@/core/errors'; + import { toHex } from './hex'; import { getInjectedWeb3Providers } from './injectedWeb3Providers'; @@ -75,6 +77,11 @@ export async function generateSignatureWithOKXWallet(params: GenerateSignaturePa async function getEthereumProvider(provider: Web3Provider) { if (provider === 'coinbase_wallet') { + if (__BUILD_DISABLE_RHC__) { + clerkUnsupportedEnvironmentWarning('Coinbase Wallet'); + return null; + } + const createCoinbaseWalletSDK = await import('@coinbase/wallet-sdk').then(mod => mod.createCoinbaseWalletSDK); const sdk = createCoinbaseWalletSDK({ preference: {