feat(clerk-js,clerk-react,shared,types): Add sign in with Solana feature support (#7293)

Signed-off-by: Kenton Duprey <[email protected]>
Co-authored-by: Dylan Staley <[email protected]>
Signed-off-by: Kenton Duprey <[email protected]>

Author: kduprey

.changeset/legal-jokes-beg.md

@@ -0,0 +1,9 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/elements': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+---
+
+Add support for Sign in with Solana.

packages/clerk-js/bundle-check.mjs

@@ -5,7 +5,7 @@ import path from 'node:path';
 import { pipeline } from 'node:stream';
 import zlib from 'node:zlib';
 
-import { chromium } from 'playwright';
+import { chromium } from '@playwright/test';
 
 /**
  * This script generates a CLI report detailing the gzipped size of JavaScript resources loaded by `clerk-js` for a
@@ -212,7 +212,7 @@ function report(url, responses) {
 
 /**
  * Loads the given `url` in `browser`, capturing all HTTP requests that occur.
- * @param {import('playwright').Browser} browser
+ * @param {import('@playwright/test').Browser} browser
  * @param {string} url
  */
 async function getResponseSizes(browser, url) {

packages/clerk-js/package.json

@@ -62,9 +62,13 @@
     "@base-org/account": "catalog:module-manager",
     "@clerk/shared": "workspace:^",
     "@coinbase/wallet-sdk": "catalog:module-manager",
+    "@solana/wallet-adapter-base": "catalog:module-manager",
+    "@solana/wallet-adapter-react": "catalog:module-manager",
+    "@solana/wallet-standard": "catalog:module-manager",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "^0.5.17",
     "@tanstack/query-core": "5.87.4",
+    "@wallet-standard/core": "catalog:module-manager",
     "@zxcvbn-ts/core": "catalog:module-manager",
     "@zxcvbn-ts/language-common": "catalog:module-manager",
     "alien-signals": "2.0.6",

packages/clerk-js/rspack.config.js

@@ -123,7 +123,20 @@ const common = ({ mode, variant, disableRHC = false }) => {
           },
           defaultVendors: {
             minChunks: 1,
-            test: /[\\/]node_modules[\\/]/,
+            test: module => {
+              if (!(module instanceof rspack.NormalModule) || !module.resource) {
+                return false;
+              }
+              // Exclude Solana packages and their known transitive dependencies
+              if (
+                /[\\/]node_modules[\\/](@solana|@solana-mobile|@wallet-standard|bn\.js|borsh|buffer|superstruct|bs58|jayson|rpc-websockets|qrcode)[\\/]/.test(
+                  module.resource,
+                )
+              ) {
+                return false;
+              }
+              return /[\\/]node_modules[\\/]/.test(module.resource);
+            },
             name: 'vendors',
             priority: -10,
           },

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

@@ -59,6 +59,7 @@ import type {
   AuthenticateWithGoogleOneTapParams,
   AuthenticateWithMetamaskParams,
   AuthenticateWithOKXWalletParams,
+  AuthenticateWithSolanaParams,
   BillingNamespace,
   CheckoutSignalValue,
   Clerk as ClerkInterface,
@@ -74,7 +75,7 @@ import type {
   EnvironmentJSON,
   EnvironmentJSONSnapshot,
   EnvironmentResource,
-  GenerateSignatureParams,
+  GenerateSignature,
   GoogleOneTapProps,
   HandleEmailLinkVerificationParams,
   HandleOAuthCallbackParams,
@@ -2338,6 +2339,13 @@ export class Clerk implements ClerkInterface {
     });
   };
 
+  public authenticateWithSolana = async (props: AuthenticateWithSolanaParams): Promise<void> => {
+    await this.authenticateWithWeb3({
+      ...props,
+      strategy: 'web3_solana_signature',
+    });
+  };
+
   public authenticateWithWeb3 = async ({
     redirectUrl,
     signUpContinueUrl,
@@ -2346,6 +2354,7 @@ export class Clerk implements ClerkInterface {
     strategy,
     legalAccepted,
     secondFactorUrl,
+    walletName,
   }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
     if (!this.client || !this.environment) {
       return;
@@ -2354,8 +2363,8 @@ export class Clerk implements ClerkInterface {
     const { displayConfig } = this.environment;
 
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
-    const identifier = await web3().getWeb3Identifier({ provider });
-    let generateSignature: (params: GenerateSignatureParams) => Promise<string>;
+    const identifier = await web3().getWeb3Identifier({ provider, walletName });
+    let generateSignature: GenerateSignature;
     switch (provider) {
       case 'metamask':
         generateSignature = web3().generateSignatureWithMetamask;
@@ -2366,6 +2375,15 @@ export class Clerk implements ClerkInterface {
       case 'coinbase_wallet':
         generateSignature = web3().generateSignatureWithCoinbaseWallet;
         break;
+      case 'solana':
+        if (!walletName) {
+          throw new ClerkRuntimeError('Wallet name is required for Solana authentication.', {
+            code: 'web3_solana_wallet_name_required',
+          });
+        }
+        // Solana requires walletName; bind it into the helper
+        generateSignature = params => web3().generateSignatureWithSolana({ ...params, walletName });
+        break;
       default:
         generateSignature = web3().generateSignatureWithOKXWallet;
         break;
@@ -2395,6 +2413,7 @@ export class Clerk implements ClerkInterface {
         identifier,
         generateSignature,
         strategy,
+        walletName,
       });
     } catch (err) {
       if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
@@ -2404,6 +2423,7 @@ export class Clerk implements ClerkInterface {
           unsafeMetadata,
           strategy,
           legalAccepted,
+          walletName,
         });
 
         if (

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

@@ -23,6 +23,7 @@ import type {
   EmailLinkConfig,
   EmailLinkFactor,
   EnterpriseSSOConfig,
+  GenerateSignature,
   PassKeyConfig,
   PasskeyFactor,
   PhoneCodeConfig,
@@ -32,6 +33,7 @@ import type {
   ResetPasswordEmailCodeFactorConfig,
   ResetPasswordParams,
   ResetPasswordPhoneCodeFactorConfig,
+  SignInAuthenticateWithSolanaParams,
   SignInCreateParams,
   SignInFirstFactor,
   SignInFutureBackupCodeVerifyParams,
@@ -202,6 +204,7 @@ export class SignIn extends BaseResource implements SignInResource {
       case 'web3_base_signature':
       case 'web3_coinbase_wallet_signature':
       case 'web3_okx_wallet_signature':
+      case 'web3_solana_signature':
         config = { web3WalletId: params.web3WalletId } as Web3SignatureConfig;
         break;
       case 'reset_password_phone_code':
@@ -363,13 +366,17 @@ export class SignIn extends BaseResource implements SignInResource {
   };
 
   public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
-    const { identifier, generateSignature, strategy = 'web3_metamask_signature' } = params || {};
+    const { identifier, generateSignature, strategy = 'web3_metamask_signature', walletName } = params || {};
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 
     if (!(typeof generateSignature === 'function')) {
       clerkMissingOptionError('generateSignature');
     }
 
+    if (provider === 'solana' && !walletName) {
+      clerkMissingOptionError('walletName');
+    }
+
     await this.create({ identifier });
 
     const web3FirstFactor = this.supportedFirstFactors?.find(f => f.strategy === strategy) as Web3SignatureFactor;
@@ -387,7 +394,7 @@ export class SignIn extends BaseResource implements SignInResource {
 
     let signature: string;
     try {
-      signature = await generateSignature({ identifier, nonce: message, provider });
+      signature = await generateSignature({ identifier, nonce: message, walletName, provider });
     } catch (err) {
       // There is a chance that as a user when you try to setup and use the Coinbase Wallet with an existing
       // Passkey in order to authenticate, the initial generate signature request to be rejected. For this
@@ -396,7 +403,7 @@ export class SignIn extends BaseResource implements SignInResource {
       // error code 4001 means the user rejected the request
       // Reference: https://docs.cdp.coinbase.com/wallet-sdk/docs/errors
       if (provider === 'coinbase_wallet' && err.code === 4001) {
-        signature = await generateSignature({ identifier, nonce: message, provider });
+        signature = await generateSignature({ identifier, nonce: message, provider, walletName });
       } else {
         throw err;
       }
@@ -444,6 +451,16 @@ export class SignIn extends BaseResource implements SignInResource {
     });
   };
 
+  public authenticateWithSolana = async (params: SignInAuthenticateWithSolanaParams): Promise<SignInResource> => {
+    const identifier = await web3().getSolanaIdentifier(params.walletName);
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: p => web3().generateSignatureWithSolana({ ...p, walletName: params.walletName }),
+      strategy: 'web3_solana_signature',
+      walletName: params.walletName,
+    });
+  };
+
   public authenticateWithPasskey = async (params?: AuthenticateWithPasskeyParams): Promise<SignInResource> => {
     const { flow } = params || {};
 
@@ -961,7 +978,7 @@ class SignInFuture implements SignInFutureResource {
 
     return runAsyncResourceTask(this.#resource, async () => {
       let identifier;
-      let generateSignature;
+      let generateSignature: GenerateSignature;
       switch (provider) {
         case 'metamask':
           identifier = await web3().getMetamaskIdentifier();
@@ -979,6 +996,16 @@ class SignInFuture implements SignInFutureResource {
           identifier = await web3().getOKXWalletIdentifier();
           generateSignature = web3().generateSignatureWithOKXWallet;
           break;
+        case 'solana':
+          if (!params.walletName) {
+            throw new ClerkRuntimeError('Wallet name is required for Solana authentication.', {
+              code: 'web3_solana_wallet_name_required',
+            });
+          }
+          identifier = await web3().getSolanaIdentifier(params.walletName);
+          generateSignature = p =>
+            web3().generateSignatureWithSolana({ ...p, walletName: params.walletName as string });
+          break;
         default:
           throw new Error(`Unsupported Web3 provider: ${provider}`);
       }
@@ -1004,7 +1031,12 @@ class SignInFuture implements SignInFutureResource {
 
       let signature: string;
       try {
-        signature = await generateSignature({ identifier, nonce: message });
+        signature = await generateSignature({
+          identifier,
+          nonce: message,
+          walletName: params?.walletName,
+          provider,
+        });
       } catch (err) {
         // There is a chance that as a user when you try to setup and use the Coinbase Wallet with an existing
         // Passkey in order to authenticate, the initial generate signature request to be rejected. For this
@@ -1013,7 +1045,11 @@ class SignInFuture implements SignInFutureResource {
         // error code 4001 means the user rejected the request
         // Reference: https://docs.cdp.coinbase.com/wallet-sdk/docs/errors
         if (provider === 'coinbase_wallet' && err.code === 4001) {
-          signature = await generateSignature({ identifier, nonce: message });
+          signature = await generateSignature({
+            identifier,
+            nonce: message,
+            provider,
+          });
         } else {
           throw err;
         }

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

@@ -16,6 +16,7 @@ import type {
   PreparePhoneNumberVerificationParams,
   PrepareVerificationParams,
   PrepareWeb3WalletVerificationParams,
+  SignUpAuthenticateWithSolanaParams,
   SignUpAuthenticateWithWeb3Params,
   SignUpCreateParams,
   SignUpEnterpriseConnectionJSON,
@@ -268,6 +269,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       unsafeMetadata,
       strategy = 'web3_metamask_signature',
       legalAccepted,
+      walletName,
     } = params || {};
     const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
 
@@ -287,7 +289,7 @@ export class SignUp extends BaseResource implements SignUpResource {
 
     let signature: string;
     try {
-      signature = await generateSignature({ identifier, nonce: message, provider });
+      signature = await generateSignature({ identifier, nonce: message, provider, walletName });
     } catch (err) {
       // There is a chance that as a first time visitor when you try to setup and use the
       // Coinbase Wallet from scratch in order to authenticate, the initial generate
@@ -322,9 +324,7 @@ export class SignUp extends BaseResource implements SignUpResource {
   };
 
   public authenticateWithCoinbaseWallet = async (
-    params?: SignUpAuthenticateWithWeb3Params & {
-      legalAccepted?: boolean;
-    },
+    params?: SignUpAuthenticateWithWeb3Params,
   ): Promise<SignUpResource> => {
     const identifier = await web3().getCoinbaseWalletIdentifier();
     return this.authenticateWithWeb3({
@@ -336,11 +336,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
-  public authenticateWithBase = async (
-    params?: SignUpAuthenticateWithWeb3Params & {
-      legalAccepted?: boolean;
-    },
-  ): Promise<SignUpResource> => {
+  public authenticateWithBase = async (params?: SignUpAuthenticateWithWeb3Params): Promise<SignUpResource> => {
     const identifier = await web3().getBaseIdentifier();
     return this.authenticateWithWeb3({
       identifier,
@@ -351,11 +347,7 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
-  public authenticateWithOKXWallet = async (
-    params?: SignUpAuthenticateWithWeb3Params & {
-      legalAccepted?: boolean;
-    },
-  ): Promise<SignUpResource> => {
+  public authenticateWithOKXWallet = async (params?: SignUpAuthenticateWithWeb3Params): Promise<SignUpResource> => {
     const identifier = await web3().getOKXWalletIdentifier();
     return this.authenticateWithWeb3({
       identifier,
@@ -366,6 +358,18 @@ export class SignUp extends BaseResource implements SignUpResource {
     });
   };
 
+  public authenticateWithSolana = async (params: SignUpAuthenticateWithSolanaParams): Promise<SignUpResource> => {
+    const identifier = await web3().getSolanaIdentifier(params.walletName);
+    return this.authenticateWithWeb3({
+      identifier,
+      generateSignature: p => web3().generateSignatureWithSolana({ ...p, walletName: params.walletName }),
+      unsafeMetadata: params?.unsafeMetadata,
+      strategy: 'web3_solana_signature',
+      legalAccepted: params?.legalAccepted,
+      walletName: params.walletName,
+    });
+  };
+
   private authenticateWithRedirectOrPopup = async (
     params: AuthenticateWithRedirectParams & {
       unsafeMetadata?: SignUpUnsafeMetadata;

packages/localizations/src/ar-SA.ts

@@ -747,6 +747,10 @@ export const arSA: LocalizationResource = {
       subtitle: 'للمتابعة، يرجى إدخال رمز التحقق الذي تم إنشاؤه بواسطة تطبيق المصادقة الخاص بك',
       title: 'نظام التحقق بخطوتين',
     },
+    web3Solana: {
+      subtitle: undefined,
+      title: undefined,
+    },
   },
   signInEnterPasswordTitle: 'إدخل كلمة المرور',
   signUp: {
@@ -837,6 +841,10 @@ export const arSA: LocalizationResource = {
       title: 'أنشاء حساب جديد',
       titleCombined: 'أنشاء حساب جديد',
     },
+    web3Solana: {
+      subtitle: undefined,
+      title: undefined,
+    },
   },
   socialButtonsBlockButton: 'للمتابعة مع {{provider|titleize}}',
   socialButtonsBlockButtonManyInView: '{{provider|titleize}}',
@@ -941,6 +949,8 @@ export const arSA: LocalizationResource = {
     phone_number_exists: 'هذا الرقم مأخوذ الرجاء أختيار رقم آخر',
     session_exists: 'لقد قمت بتسجيل الدخول بالفعل',
     web3_missing_identifier: undefined,
+    web3_signature_request_rejected: undefined,
+    web3_solana_signature_generation_failed: undefined,
     zxcvbn: {
       couldBeStronger: 'كلمة مرورك سليمة من الأفضل ان تكون اقوى. الرجاء أضافة حروف أكثر',
       goodPassword: 'كلمة مرورك طابقت جميع المتطلبات الازمة',
@@ -1340,4 +1350,9 @@ export const arSA: LocalizationResource = {
       title: undefined,
     },
   },
+  web3WalletButtons: {
+    connect: undefined,
+    continue: undefined,
+    noneAvailable: undefined,
+  },
 } as const;