fix(chrome-extension): Enable support for Metamask & OKX; Mark unsupported components (#6179)

Author: tmilewski

.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.

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';

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;

packages/chrome-extension/src/react/index.ts

@@ -1 +1,2 @@
 export { ClerkProvider } from './ClerkProvider';
+export { GoogleOneTap } from './NotSupported';

packages/clerk-js/src/core/clerk.ts

@@ -1986,35 +1986,20 @@ export class Clerk implements ClerkInterface {
   };
 
   public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
-    if (__BUILD_DISABLE_RHC__) {
-      clerkUnsupportedEnvironmentWarning('Metamask');
-      return;
-    }
-
     await this.authenticateWithWeb3({
       ...props,
       strategy: 'web3_metamask_signature',
     });
   };
 
   public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
-    if (__BUILD_DISABLE_RHC__) {
-      clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
-      return;
-    }
-
     await this.authenticateWithWeb3({
       ...props,
       strategy: 'web3_coinbase_wallet_signature',
     });
   };
 
   public authenticateWithOKXWallet = async (props: AuthenticateWithOKXWalletParams = {}): Promise<void> => {
-    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<void> => {
-    if (__BUILD_DISABLE_RHC__) {
-      clerkUnsupportedEnvironmentWarning('Web3');
-      return;
-    }
-
     if (!this.client || !this.environment) {
       return;
     }

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<SignInResource> => {
-    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<SignInResource> => {
-    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<SignInResource> => {
-    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<SignInResource> => {
-    if (__BUILD_DISABLE_RHC__) {
-      clerkUnsupportedEnvironmentWarning('OKX Wallet');
-      return this;
-    }
-
     const identifier = await getOKXWalletIdentifier();
     return this.authenticateWithWeb3({
       identifier,

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<SignUpResource> => {
-    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<SignUpResource> => {
-    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<SignUpResource> => {
-    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<SignUpResource> => {
-    if (__BUILD_DISABLE_RHC__) {
-      clerkUnsupportedEnvironmentWarning('OKX Wallet');
-      return this;
-    }
-
     const identifier = await getOKXWalletIdentifier();
     return this.authenticateWithWeb3({
       identifier,

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: {