feat(clerk-js,types,clerk-react): Support Coinbase Wallet web3 provider and authentication strategy (#4082)

Author: chanioxaris

.changeset/chilly-shrimps-stare.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": minor
+"@clerk/clerk-react": minor
+"@clerk/types": minor
+---
+
+Add support for the Coinbase Wallet web3 provider and authentication strategy. The Coinbase Wallet provider handles both Coinbase Wallet extension and Smart Wallet

package-lock.json

@@ -4,6 +4,7 @@
     { "path": "./dist/clerk.headless.js", "maxSize": "43kB" },
     { "path": "./dist/ui-common*.js", "maxSize": "85KB" },
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },
+    { "path": "./dist/coinbase*.js", "maxSize": "58KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" },

packages/clerk-js/bundlewatch.config.json

@@ -53,6 +53,7 @@
     "@clerk/localizations": "2.8.0",
     "@clerk/shared": "2.6.1",
     "@clerk/types": "4.18.0",
+    "@coinbase/wallet-sdk": "4.0.4",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@floating-ui/react": "0.25.4",

packages/clerk-js/package.json

@@ -21,6 +21,7 @@ import type {
   __experimental_UserVerificationProps,
   ActiveSessionResource,
   AuthenticateWithCoinbaseParams,
+  AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   Clerk as ClerkInterface,
@@ -75,6 +76,7 @@ import {
   disabledOrganizationsFeature,
   errorThrower,
   generateSignatureWithCoinbase,
+  generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   getClerkQueryParam,
   getWeb3Identifier,
@@ -1403,6 +1405,10 @@ export class Clerk implements ClerkInterface {
     await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_signature' });
   };
 
+  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
+    await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+  };
+
   public authenticateWithWeb3 = async ({
     redirectUrl,
     signUpContinueUrl,
@@ -1415,7 +1421,12 @@ export class Clerk implements ClerkInterface {
     }
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
     const identifier = await getWeb3Identifier({ provider });
-    const generateSignature = provider === 'metamask' ? generateSignatureWithMetamask : generateSignatureWithCoinbase;
+    const generateSignature =
+      provider === 'metamask'
+        ? generateSignatureWithMetamask
+        : provider === 'coinbase'
+          ? generateSignatureWithCoinbase
+          : generateSignatureWithCoinbaseWallet;
     const navigate = (to: string) =>
       customNavigate && typeof customNavigate === 'function' ? customNavigate(to) : this.navigate(to);
 

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

@@ -34,8 +34,10 @@ import type {
 
 import {
   generateSignatureWithCoinbase,
+  generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   getCoinbaseIdentifier,
+  getCoinbaseWalletIdentifier,
   getMetamaskIdentifier,
   windowNavigate,
 } from '../../utils';
@@ -117,6 +119,9 @@ export class SignIn extends BaseResource implements SignInResource {
       case 'web3_coinbase_signature':
         config = { web3WalletId: factor.web3WalletId } as Web3SignatureConfig;
         break;
+      case 'web3_coinbase_wallet_signature':
+        config = { web3WalletId: factor.web3WalletId } as Web3SignatureConfig;
+        break;
       case 'reset_password_phone_code':
         config = { phoneNumberId: factor.phoneNumberId } as ResetPasswordPhoneCodeFactorConfig;
         break;
@@ -285,6 +290,15 @@ export class SignIn extends BaseResource implements SignInResource {
     });
   };
 
+  public authenticateWithCoinbaseWallet = async (): Promise<SignInResource> => {
+    const identifier = await getCoinbaseWalletIdentifier();
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: generateSignatureWithCoinbaseWallet,
+      strategy: 'web3_coinbase_wallet_signature',
+    });
+  };
+
   public authenticateWithPasskey = async (params?: AuthenticateWithPasskeyParams): Promise<SignInResource> => {
     const { flow } = params || {};
 

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

@@ -25,8 +25,10 @@ import type {
 
 import {
   generateSignatureWithCoinbase,
+  generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   getCoinbaseIdentifier,
+  getCoinbaseWalletIdentifier,
   getMetamaskIdentifier,
   windowNavigate,
 } from '../../utils';
@@ -231,6 +233,18 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
+  public authenticateWithCoinbaseWallet = async (
+    params?: SignUpAuthenticateWithWeb3Params,
+  ): Promise<SignUpResource> => {
+    const identifier = await getCoinbaseWalletIdentifier();
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: generateSignatureWithCoinbaseWallet,
+      unsafeMetadata: params?.unsafeMetadata,
+      strategy: 'web3_coinbase_wallet_signature',
+    });
+  };
+
   public authenticateWithRedirect = async ({
     redirectUrl,
     redirectUrlComplete,

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

@@ -96,6 +96,10 @@ export const WEB3_PROVIDERS: Web3Providers = Object.freeze({
     id: 'coinbase',
     name: 'Coinbase Wallet',
   },
+  coinbase_wallet: {
+    id: 'coinbase_wallet',
+    name: 'Coinbase Wallet',
+  },
 });
 
 export function getWeb3ProviderData(name: Web3Provider): Web3ProviderData | undefined | null {

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

@@ -1,4 +1,5 @@
-import type { Web3Provider } from '@clerk/types';
+import type { CoinbaseWeb3Provider, MetamaskWeb3Provider } from '@clerk/types';
+
 //https://eips.ethereum.org/EIPS/eip-6963
 
 interface EIP6963ProviderInfo {
@@ -26,10 +27,11 @@ interface EIP6963ProviderDetail {
 }
 
 type EIP6963AnnounceProviderEvent = CustomEvent;
+type InjectedWeb3Provider = MetamaskWeb3Provider | CoinbaseWeb3Provider;
 
 class InjectedWeb3Providers {
   #providers: EIP6963ProviderDetail[] = [];
-  #providerIdMap: Record<Web3Provider, string> = {
+  #providerIdMap: Record<InjectedWeb3Provider, string> = {
     coinbase: 'Coinbase Wallet',
     metamask: 'MetaMask',
   } as const;
@@ -42,7 +44,7 @@ class InjectedWeb3Providers {
     window.dispatchEvent(new Event('eip6963:requestProvider'));
   }
 
-  get = (provider: Web3Provider) => {
+  get = (provider: InjectedWeb3Provider) => {
     return this.#providers.find(p => p.info.name === this.#providerIdMap[provider])?.provider;
   };