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

Coinbase Wallet is a new generic web3 provider and strategy that supports both Smart Wallets
and Coinbase Wallet browser extension. Users can use it to authenticate themselves using their
own web3 address as an identifier

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

@@ -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;
   };