feat(clerk-js,clerk-react): Support Base authentication

.changeset/silent-insects-cheat.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+Adding support for Base Account

packages/clerk-js/bundlewatch.config.json

@@ -8,6 +8,7 @@
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "118KB" },
     { "path": "./dist/vendors*.js", "maxSize": "41KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
+    { "path": "./dist/base-account*.js", "maxSize": "45KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },

packages/clerk-js/package.json

@@ -63,6 +63,7 @@
   },
   "browserslist": "last 2 years",
   "dependencies": {
+    "@base-org/account": "2.0.1",
     "@clerk/localizations": "workspace:^",
     "@clerk/shared": "workspace:^",
     "@clerk/types": "workspace:^",

packages/clerk-js/rspack.config.js

@@ -101,6 +101,13 @@ const common = ({ mode, variant, disableRHC = false }) => {
             name: 'coinbase-wallet-sdk',
             chunks: 'all',
           },
+          baseAccountVendor: {
+            test: /[\\/]node_modules[\\/](@base-org\/account)[\\/]/,
+            name: 'base-account',
+            chunks: 'async',
+            priority: 50,
+            enforce: true,
+          },
           stripeVendor: {
             test: /[\\/]node_modules[\\/](@stripe\/stripe-js)[\\/]/,
             name: 'stripe-vendors',
@@ -119,11 +126,17 @@ const common = ({ mode, variant, disableRHC = false }) => {
             minChunks: 1,
             name: 'ui-common',
             priority: -20,
+            chunks: 'initial',
             test: module => !!(module.resource && !module.resource.includes('/ui/components')),
           },
           defaultVendors: {
             minChunks: 1,
-            test: /[\\/]node_modules[\\/]/,
+            test: module =>
+              !!(
+                module.resource &&
+                /[\\/]node_modules[\\/]/.test(module.resource) &&
+                !/[\\/]node_modules[\\/]@base-org[\\/]account[\\/]/.test(module.resource)
+              ),
             name: 'vendors',
             priority: -10,
           },

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

@@ -24,6 +24,7 @@ import type {
   __internal_UserVerificationModalProps,
   APIKeysNamespace,
   APIKeysProps,
+  AuthenticateWithBaseWalletParams,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
@@ -100,6 +101,7 @@ import {
   disabledAPIKeysFeature,
   disabledOrganizationsFeature,
   errorThrower,
+  generateSignatureWithBaseWallet,
   generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   generateSignatureWithOKXWallet,
@@ -2138,6 +2140,13 @@ export class Clerk implements ClerkInterface {
     });
   };
 
+  public authenticateWithBaseWallet = async (props: AuthenticateWithBaseWalletParams = {}): Promise<void> => {
+    await this.authenticateWithWeb3({
+      ...props,
+      strategy: 'web3_base_wallet_signature',
+    });
+  };
+
   public authenticateWithOKXWallet = async (props: AuthenticateWithOKXWalletParams = {}): Promise<void> => {
     await this.authenticateWithWeb3({
       ...props,
@@ -2165,9 +2174,11 @@ export class Clerk implements ClerkInterface {
     const generateSignature =
       provider === 'metamask'
         ? generateSignatureWithMetamask
-        : provider === 'coinbase_wallet'
-          ? generateSignatureWithCoinbaseWallet
-          : generateSignatureWithOKXWallet;
+        : strategy === 'web3_base_wallet_signature'
+          ? generateSignatureWithBaseWallet
+          : provider === 'coinbase_wallet'
+            ? generateSignatureWithCoinbaseWallet
+            : generateSignatureWithOKXWallet;
 
     const makeNavigate = (to: string) => () =>
       customNavigate && typeof customNavigate === 'function' ? customNavigate(to) : this.navigate(to);

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

@@ -44,9 +44,11 @@ import type {
 } from '@clerk/types';
 
 import {
+  generateSignatureWithBaseWallet,
   generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   generateSignatureWithOKXWallet,
+  getBaseWalletIdentifier,
   getCoinbaseWalletIdentifier,
   getMetamaskIdentifier,
   getOKXWalletIdentifier,
@@ -145,6 +147,9 @@ export class SignIn extends BaseResource implements SignInResource {
       case 'web3_metamask_signature':
         config = { web3WalletId: factor.web3WalletId } as Web3SignatureConfig;
         break;
+      case 'web3_base_wallet_signature':
+        config = { web3WalletId: factor.web3WalletId } as Web3SignatureConfig;
+        break;
       case 'web3_coinbase_wallet_signature':
         config = { web3WalletId: factor.web3WalletId } as Web3SignatureConfig;
         break;
@@ -361,6 +366,15 @@ export class SignIn extends BaseResource implements SignInResource {
     });
   };
 
+  public authenticateWithBaseWallet = async (): Promise<SignInResource> => {
+    const identifier = await getBaseWalletIdentifier();
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: generateSignatureWithBaseWallet,
+      strategy: 'web3_base_wallet_signature',
+    });
+  };
+
   public authenticateWithOKXWallet = async (): Promise<SignInResource> => {
     const identifier = await getOKXWalletIdentifier();
     return this.authenticateWithWeb3({

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

@@ -28,9 +28,11 @@ import type {
 } from '@clerk/types';
 
 import {
+  generateSignatureWithBaseWallet,
   generateSignatureWithCoinbaseWallet,
   generateSignatureWithMetamask,
   generateSignatureWithOKXWallet,
+  getBaseWalletIdentifier,
   getCoinbaseWalletIdentifier,
   getMetamaskIdentifier,
   getOKXWalletIdentifier,
@@ -273,6 +275,21 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
+  public authenticateWithBaseWallet = async (
+    params?: SignUpAuthenticateWithWeb3Params & {
+      legalAccepted?: boolean;
+    },
+  ): Promise<SignUpResource> => {
+    const identifier = await getBaseWalletIdentifier();
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: generateSignatureWithBaseWallet,
+      unsafeMetadata: params?.unsafeMetadata,
+      strategy: 'web3_base_wallet_signature',
+      legalAccepted: params?.legalAccepted,
+    });
+  };
+
   public authenticateWithOKXWallet = async (
     params?: SignUpAuthenticateWithWeb3Params & {
       legalAccepted?: boolean;

packages/clerk-js/src/utils/web3.ts

@@ -58,6 +58,10 @@ export async function getOKXWalletIdentifier(): Promise<string> {
   return await getWeb3Identifier({ provider: 'okx_wallet' });
 }
 
+export async function getBaseWalletIdentifier(): Promise<string> {
+  return await getWeb3Identifier({ provider: 'base_wallet' });
+}
+
 type GenerateSignatureParams = {
   identifier: string;
   nonce: string;
@@ -75,6 +79,10 @@ export async function generateSignatureWithOKXWallet(params: GenerateSignaturePa
   return await generateWeb3Signature({ ...params, provider: 'okx_wallet' });
 }
 
+export async function generateSignatureWithBaseWallet(params: GenerateSignatureParams): Promise<string> {
+  return await generateWeb3Signature({ ...params, provider: 'base_wallet' });
+}
+
 async function getEthereumProvider(provider: Web3Provider) {
   if (provider === 'coinbase_wallet') {
     if (__BUILD_DISABLE_RHC__) {
@@ -90,6 +98,22 @@ async function getEthereumProvider(provider: Web3Provider) {
     });
     return sdk.getProvider();
   }
+  if (provider === 'base_wallet') {
+    if (__BUILD_DISABLE_RHC__) {
+      clerkUnsupportedEnvironmentWarning('Base Wallet');
+      return null;
+    }
+
+    try {
+      const { createBaseAccountSDK } = await import('@base-org/account');
+      const sdk = createBaseAccountSDK({
+        appName: typeof document !== 'undefined' ? document.title || 'Clerk' : 'Clerk',
+      });
+      return sdk.getProvider();
+    } catch {
+      return null;
+    }
+  }
 
   const injectedWeb3Providers = getInjectedWeb3Providers();
   return injectedWeb3Providers.get(provider);

packages/elements/src/react/hooks/use-third-party-provider.hook.ts

@@ -76,6 +76,10 @@ export const useThirdPartyProvider = <
         return ref.send({ type: 'AUTHENTICATE.ENTERPRISE_SSO' });
       }
 
+      if (provider === 'base_wallet') {
+        return ref.send({ type: 'AUTHENTICATE.WEB3', strategy: 'web3_base_wallet_signature' });
+      }
+
       if (provider === 'metamask') {
         return ref.send({ type: 'AUTHENTICATE.WEB3', strategy: 'web3_metamask_signature' });
       }

packages/react/src/isomorphicClerk.ts

@@ -11,6 +11,7 @@ import type {
   __internal_UserVerificationProps,
   APIKeysNamespace,
   APIKeysProps,
+  AuthenticateWithBaseWalletParams,
   AuthenticateWithCoinbaseWalletParams,
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
@@ -1350,6 +1351,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  authenticateWithBaseWallet = async (params?: AuthenticateWithBaseWalletParams) => {
+    const callback = () => this.clerkjs?.authenticateWithBaseWallet(params);
+    if (this.clerkjs && this.loaded) {
+      return callback() as Promise<void>;
+    } else {
+      this.premountMethodCalls.set('authenticateWithBaseWallet', callback);
+    }
+  };
+
   authenticateWithOKXWallet = async (params?: AuthenticateWithOKXWalletParams) => {
     const callback = () => this.clerkjs?.authenticateWithOKXWallet(params);
     if (this.clerkjs && this.loaded) {

packages/shared/src/web3.ts

@@ -6,6 +6,11 @@ export const WEB3_PROVIDERS: Web3ProviderData[] = [
     strategy: 'web3_metamask_signature',
     name: 'MetaMask',
   },
+  {
+    provider: 'base_wallet',
+    strategy: 'web3_base_wallet_signature',
+    name: 'Base Wallet',
+  },
   {
     provider: 'coinbase_wallet',
     strategy: 'web3_coinbase_wallet_signature',

packages/types/src/clerk.ts

@@ -814,6 +814,11 @@ export interface Clerk {
    */
   authenticateWithOKXWallet: (params?: AuthenticateWithOKXWalletParams) => Promise<unknown>;
 
+  /**
+   * Authenticates user using Base Account SDK
+   */
+  authenticateWithBaseWallet: (params?: AuthenticateWithBaseWalletParams) => Promise<unknown>;
+
   /**
    * Authenticates user using their Web3 Wallet browser extension
    */
@@ -2180,6 +2185,14 @@ export interface AuthenticateWithGoogleOneTapParams {
   legalAccepted?: boolean;
 }
 
+export interface AuthenticateWithBaseWalletParams {
+  customNavigate?: (to: string) => Promise<unknown>;
+  redirectUrl?: string;
+  signUpContinueUrl?: string;
+  unsafeMetadata?: SignUpUnsafeMetadata;
+  legalAccepted?: boolean;
+}
+
 export interface LoadedClerk extends Clerk {
   client: ClientResource;
 }

packages/types/src/signIn.ts

@@ -115,6 +115,8 @@ export interface SignInResource extends ClerkResource {
 
   authenticateWithOKXWallet: () => Promise<SignInResource>;
 
+  authenticateWithBaseWallet: () => Promise<SignInResource>;
+
   authenticateWithPasskey: (params?: AuthenticateWithPasskeyParams) => Promise<SignInResource>;
 
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<SignInStartEmailLinkFlowParams, SignInResource>;

packages/types/src/signUp.ts

@@ -115,6 +115,7 @@ export interface SignUpResource extends ClerkResource {
   authenticateWithMetamask: (params?: SignUpAuthenticateWithWeb3Params) => Promise<SignUpResource>;
   authenticateWithCoinbaseWallet: (params?: SignUpAuthenticateWithWeb3Params) => Promise<SignUpResource>;
   authenticateWithOKXWallet: (params?: SignUpAuthenticateWithWeb3Params) => Promise<SignUpResource>;
+  authenticateWithBaseWallet: (params?: SignUpAuthenticateWithWeb3Params) => Promise<SignUpResource>;
   __internal_toSnapshot: () => SignUpJSONSnapshot;
 }
 

packages/types/src/web3.ts

@@ -9,8 +9,13 @@ export interface Web3ProviderData {
 export type MetamaskWeb3Provider = 'metamask';
 export type CoinbaseWalletWeb3Provider = 'coinbase_wallet';
 export type OKXWalletWeb3Provider = 'okx_wallet';
+export type BaseWalletWeb3Provider = 'base_wallet';
 
-export type Web3Provider = MetamaskWeb3Provider | CoinbaseWalletWeb3Provider | OKXWalletWeb3Provider;
+export type Web3Provider =
+  | MetamaskWeb3Provider
+  | BaseWalletWeb3Provider
+  | CoinbaseWalletWeb3Provider
+  | OKXWalletWeb3Provider;
 
 /**
  * @deprecated Use `import { WEB3_PROVIDERS } from "@clerk/shared/web3"` instead.
@@ -23,6 +28,11 @@ export const WEB3_PROVIDERS: Web3ProviderData[] = [
     strategy: 'web3_metamask_signature',
     name: 'MetaMask',
   },
+  {
+    provider: 'base_wallet',
+    strategy: 'web3_base_wallet_signature',
+    name: 'Base Wallet',
+  },
   {
     provider: 'coinbase_wallet',
     strategy: 'web3_coinbase_wallet_signature',