thirdweb 5.45.2-nightly-b15aa4cdff3f3b233025da285780668a18fe29ab-20240813000336 → 5.46.0-nightly-d6e4898458ae0b7db99acb8a44f0730c18d6bdd9-20240815000344

package/src/wallets/in-app/native/native-connector.ts

@@ -1,6 +1,12 @@
+import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
-import type { InjectedSupportedWalletIds } from "../../../wallets/__generated__/wallet-ids.js";
-import type { Account } from "../../interfaces/wallet.js";
+import { stringify } from "../../../utils/json.js";
+import { nativeLocalStorage } from "../../../utils/storage/nativeStorage.js";
+import type { Account, Wallet } from "../../interfaces/wallet.js";
+import {
+  loginWithPasskey,
+  registerPasskey,
+} from "../core/authentication/passkeys.js";
 import { siweAuthenticate } from "../core/authentication/siwe.js";
 import {
   type AuthArgsType,
@@ -27,12 +33,14 @@ import {
 } from "./auth/native-auth.js";
 import { fetchUserDetails } from "./helpers/api/fetchers.js";
 import { logoutUser } from "./helpers/auth/logout.js";
+import { postAuth } from "./helpers/auth/middleware.js";
 import { getWalletUserDetails } from "./helpers/storage/local.js";
 import { getExistingUserAccount } from "./helpers/wallet/retrieval.js";
 
 export type NativeConnectorOptions = {
   client: ThirdwebClient;
   partnerId?: string | undefined;
+  passkeyDomain?: string;
 };
 
 export class InAppNativeConnector implements InAppConnector {
@@ -91,11 +99,11 @@ export class InAppNativeConnector implements InAppConnector {
       case "phone": {
         return verifyOtp(params);
       }
-      case "siwe": {
+      case "wallet": {
         return siweAuthenticate({
           client: this.options.client,
-          walletId: params.walletId,
-          chainId: params.chainId,
+          wallet: params.wallet,
+          chain: params.chain,
         });
       }
       case "google":
@@ -107,6 +115,8 @@ export class InAppNativeConnector implements InAppConnector {
           params.redirectUrl || (ExpoLinking.createURL("") as string);
         return authenticate({ strategy, redirectUrl }, this.options.client);
       }
+      case "passkey":
+        return this.passkeyAuth(params);
       default:
         throw new Error(`Unsupported authentication type: ${strategy}`);
     }
@@ -145,10 +155,10 @@ export class InAppNativeConnector implements InAppConnector {
           redirectUrl,
         });
       }
-      case "siwe": {
+      case "wallet": {
         return this.siweLogin({
-          walletId: params.walletId,
-          chainId: params.chainId,
+          wallet: params.wallet,
+          chain: params.chain,
         });
       }
       case "jwt": {
@@ -164,7 +174,16 @@ export class InAppNativeConnector implements InAppConnector {
         });
       }
       case "passkey": {
-        throw new Error("Passkey authentication is not implemented yet");
+        const authToken = await this.passkeyAuth(params);
+        const account = await this.getAccount();
+        return {
+          user: {
+            status: UserWalletStatus.LOGGED_IN_WALLET_INITIALIZED,
+            account,
+            authDetails: authToken.storedToken.authDetails,
+            walletAddress: account.address,
+          },
+        };
       }
       case "iframe": {
         throw new Error("iframe_email_verification is not supported in native");
@@ -177,6 +196,75 @@ export class InAppNativeConnector implements InAppConnector {
     }
   }
 
+  private async passkeyAuth(args: {
+    type: "sign-up" | "sign-in";
+    passkeyName?: string;
+    client: ThirdwebClient;
+    ecosystem?: Ecosystem;
+  }): Promise<AuthStoredTokenWithCookieReturnType> {
+    const { type, passkeyName, client, ecosystem } = args;
+    const domain = this.options.passkeyDomain;
+    if (!domain) {
+      throw new Error(
+        "Passkey domain is required for native platforms. Please pass it in the 'auth' options when creating the inAppWallet().",
+      );
+    }
+    try {
+      const { PasskeyNativeClient } = await import("./auth/passkeys.js");
+      const passkeyClient = new PasskeyNativeClient();
+      const storage = nativeLocalStorage;
+      let authToken: AuthStoredTokenWithCookieReturnType;
+
+      if (type === "sign-up") {
+        authToken = await registerPasskey({
+          client,
+          ecosystem,
+          username: passkeyName,
+          passkeyClient,
+          storage,
+          rp: {
+            id: domain,
+            name: domain,
+          },
+        });
+      } else {
+        authToken = await loginWithPasskey({
+          client,
+          ecosystem,
+          passkeyClient,
+          storage,
+          rp: {
+            id: domain,
+            name: domain,
+          },
+        });
+      }
+
+      const toStoreToken: AuthStoredTokenWithCookieReturnType["storedToken"] = {
+        jwtToken: authToken.storedToken.jwtToken,
+        authDetails: authToken.storedToken.authDetails,
+        authProvider: authToken.storedToken.authProvider,
+        developerClientId: authToken.storedToken.developerClientId,
+        cookieString: authToken.storedToken.cookieString,
+        // we should always store the jwt cookie since there's no concept of cookie in react native
+        shouldStoreCookieString: true,
+        isNewUser: authToken.storedToken.isNewUser,
+      };
+
+      await postAuth({ storedToken: toStoreToken, client });
+
+      return authToken;
+    } catch (error) {
+      console.error(
+        `Error while signing in with passkey. ${(error as Error)?.message || typeof error === "object" ? stringify(error) : error}`,
+      );
+      if (error instanceof Error) {
+        throw new Error(`Error signing in with passkey: ${error.message}`);
+      }
+      throw new Error("An unknown error occurred signing in with passkey");
+    }
+  }
+
   private async validateOtp(
     options: MultiStepAuthArgsType & {
       client: ThirdwebClient;
@@ -230,14 +318,14 @@ export class InAppNativeConnector implements InAppConnector {
   }
 
   private async siweLogin(options: {
-    walletId: InjectedSupportedWalletIds;
-    chainId: number;
+    wallet: Wallet;
+    chain: Chain;
   }): Promise<AuthLoginReturnType> {
     try {
       const { storedToken } = await siweLogin(
         this.options.client,
-        options.walletId,
-        options.chainId,
+        options.wallet,
+        options.chain,
       );
       const account = await this.getAccount();
       return {
@@ -250,15 +338,15 @@ export class InAppNativeConnector implements InAppConnector {
       };
     } catch (error) {
       console.error(
-        `Error while signing in with: ${options.walletId}. ${error}`,
+        `Error while signing in with: ${options.wallet.id}. ${error}`,
       );
       if (error instanceof Error) {
         throw new Error(
-          `Error signing in with ${options.walletId}: ${error.message}`,
+          `Error signing in with ${options.wallet.id}: ${error.message}`,
         );
       }
       throw new Error(
-        `An unknown error occurred signing in with ${options.walletId}`,
+        `An unknown error occurred signing in with ${options.wallet.id}`,
       );
     }
   }

package/src/wallets/in-app/web/in-app.ts

@@ -63,6 +63,21 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * });
  * ```
  *
+ * ### Login with SIWE
+ * ```ts
+ * import { inAppWallet, createWallet } from "thirdweb/wallets";
+ *
+ * const rabby = createWallet("io.rabby");
+ * const inAppWallet = inAppWallet();
+ *
+ * const account = await inAppWallet.connect({
+ *    strategy: "wallet",
+ *    chain: mainnet,
+ *    wallet: rabby,
+ *    client: MY_CLIENT
+ * });
+ * ```
+ *
  * ### Login with phone number
  * ```ts
  * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
@@ -172,6 +187,7 @@ export function inAppWallet(
       const { InAppWebConnector } = await import("./lib/web-connector.js");
       return new InAppWebConnector({
         client,
+        passkeyDomain: createOptions?.auth?.passkeyDomain,
       });
     },
   });

package/src/wallets/in-app/web/lib/auth/iframe-auth.ts

@@ -1,4 +1,6 @@
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { webLocalStorage } from "../../../../../utils/storage/webStorage.js";
+import { ClientScopedStorage } from "../../../core/authentication/client-scoped-storage.js";
 import type {
   AuthAndWalletRpcReturnType,
   AuthLoginReturnType,
@@ -7,7 +9,6 @@ import type {
   SendEmailOtpReturnType,
 } from "../../../core/authentication/types.js";
 import type { ClientIdWithQuerierType, Ecosystem } from "../../types.js";
-import { LocalStorage } from "../../utils/Storage/LocalStorage.js";
 import type { InAppWalletIframeCommunicator } from "../../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 import { BaseLogin } from "./base-login.js";
 
@@ -33,7 +34,7 @@ export type AuthQuerierTypes = {
 export class Auth {
   protected client: ThirdwebClient;
   protected AuthQuerier: InAppWalletIframeCommunicator<AuthQuerierTypes>;
-  protected localStorage: LocalStorage;
+  protected localStorage: ClientScopedStorage;
   protected onAuthSuccess: (
     authResults: AuthAndWalletRpcReturnType,
   ) => Promise<AuthLoginReturnType>;
@@ -59,7 +60,8 @@ export class Auth {
     this.client = client;
 
     this.AuthQuerier = querier;
-    this.localStorage = new LocalStorage({
+    this.localStorage = new ClientScopedStorage({
+      storage: webLocalStorage,
       clientId: client.clientId,
       ecosystemId: ecosystem?.id,
     });

package/src/wallets/in-app/web/lib/auth/passkeys.ts

@@ -1,160 +1,76 @@
 import { client } from "@passwordless-id/webauthn";
-import type { AuthType } from "@passwordless-id/webauthn/dist/esm/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { getThirdwebBaseUrl } from "../../../../../utils/domains.js";
-import { getClientFetch } from "../../../../../utils/fetch.js";
+import { webLocalStorage } from "../../../../../utils/storage/webStorage.js";
+import {
+  base64ToString,
+  base64UrlToBase64,
+} from "../../../../../utils/uint8-array.js";
 import type { EcosystemWalletId } from "../../../../wallet-types.js";
-import type { AuthStoredTokenWithCookieReturnType } from "../../../core/authentication/types.js";
-import type { Ecosystem } from "../../types.js";
-import { LocalStorage } from "../../utils/Storage/LocalStorage.js";
+import { ClientScopedStorage } from "../../../core/authentication/client-scoped-storage.js";
+import type {
+  AuthenticateResult,
+  PasskeyClient,
+  RegisterResult,
+  RpInfo,
+} from "../../../core/authentication/passkeys.js";
 
-function getVerificationPath() {
-  return `${getThirdwebBaseUrl(
-    "inAppWallet",
-  )}/api/2024-05-05/login/passkey/callback`;
-}
-function getChallengePath(type: "sign-in" | "sign-up", username?: string) {
-  return `${getThirdwebBaseUrl(
-    "inAppWallet",
-  )}/api/2024-05-05/login/passkey?type=${type}${
-    username ? `&username=${username}` : ""
-  }`;
-}
-
-export async function registerPasskey(options: {
-  client: ThirdwebClient;
-  ecosystem?: Ecosystem;
-  authenticatorType?: AuthType;
-  username?: string;
-}): Promise<AuthStoredTokenWithCookieReturnType> {
-  if (!client.isAvailable()) {
-    throw new Error("Passkeys are not available on this device");
+export class PasskeyWebClient implements PasskeyClient {
+  isAvailable(): boolean {
+    return client.isAvailable();
   }
-  // TODO inject this
-  const storage = new LocalStorage({
-    clientId: options.client.clientId,
-    ecosystemId: options.ecosystem?.id,
-  });
-  const fetchWithId = getClientFetch(options.client, options.ecosystem);
-  const generatedName = options.username ?? generateUsername(options.ecosystem);
-  // 1. request challenge from  server
-  const res = await fetchWithId(getChallengePath("sign-up", generatedName));
-  const challengeData = await res.json();
-  if (!challengeData.challenge) {
-    throw new Error("No challenge received");
-  }
-  const challenge = challengeData.challenge;
-  // 2. initiate registration
-  const registration = await client.register(generatedName, challenge, {
-    authenticatorType: options.authenticatorType ?? "auto",
-    userVerification: "required",
-    attestation: true,
-    debug: false,
-  });
-  // 3. store the credentialId in local storage
-  await storage.savePasskeyCredentialId(registration.credential.id);
 
-  const customHeaders: Record<string, string> = {};
-  if (options.ecosystem?.partnerId) {
-    customHeaders["x-ecosystem-partner-id"] = options.ecosystem.partnerId;
-  }
-  if (options.ecosystem?.id) {
-    customHeaders["x-ecosystem-id"] = options.ecosystem.id;
-  }
-
-  // 4. send the registration object to the server
-  const verifRes = await fetchWithId(getVerificationPath(), {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...customHeaders,
-    },
-    body: JSON.stringify({
-      type: "sign-up",
+  async register(args: {
+    name: string;
+    challenge: string;
+    rp: RpInfo;
+  }): Promise<RegisterResult> {
+    const { name, challenge, rp } = args;
+    const registration = await client.register(name, challenge, {
+      authenticatorType: "auto",
+      userVerification: "required",
+      domain: rp.id,
+      attestation: true,
+      debug: false,
+    });
+    const clientDataB64 = base64UrlToBase64(registration.clientData);
+    const clientDataParsed = JSON.parse(base64ToString(clientDataB64));
+    return {
       authenticatorData: registration.authenticatorData,
       credentialId: registration.credential.id,
-      serverVerificationId: challengeData.serverVerificationId,
       clientData: registration.clientData,
-      username: generatedName,
       credential: {
         publicKey: registration.credential.publicKey,
         algorithm: registration.credential.algorithm,
       },
-    }),
-  });
-  const verifData = await verifRes.json();
-
-  if (!verifData) {
-    throw new Error("No token received");
-  }
-  // 5. returns back the IAW authentication token
-  return verifData;
-}
-
-export async function loginWithPasskey(options: {
-  client: ThirdwebClient;
-  ecosystem?: Ecosystem;
-  authenticatorType?: AuthType;
-}): Promise<AuthStoredTokenWithCookieReturnType> {
-  if (!client.isAvailable()) {
-    throw new Error("Passkeys are not available on this device");
-  }
-  // TODO inject this
-  const storage = new LocalStorage({
-    clientId: options.client.clientId,
-    ecosystemId: options.ecosystem?.id,
-  });
-  const fetchWithId = getClientFetch(options.client, options.ecosystem);
-  // 1. request challenge from  server/iframe
-  const res = await fetchWithId(getChallengePath("sign-in"));
-  const challengeData = await res.json();
-  if (!challengeData.challenge) {
-    throw new Error("No challenge received");
-  }
-  const challenge = challengeData.challenge;
-  // 1.2. find the user's credentialId in local storage
-  const credentialId = await storage.getPasskeyCredentialId();
-  const credentials = credentialId ? [credentialId] : [];
-  // 2. initiate login
-  const authentication = await client.authenticate(credentials, challenge, {
-    authenticatorType: options.authenticatorType ?? "auto",
-    userVerification: "required",
-  });
-
-  const customHeaders: Record<string, string> = {};
-  if (options.ecosystem?.partnerId) {
-    customHeaders["x-ecosystem-partner-id"] = options.ecosystem.partnerId;
-  }
-  if (options.ecosystem?.id) {
-    customHeaders["x-ecosystem-id"] = options.ecosystem.id;
+      origin: clientDataParsed.origin,
+    };
   }
 
-  // 3. send the authentication object to the server/iframe
-  const verifRes = await fetchWithId(getVerificationPath(), {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      ...customHeaders,
-    },
-    body: JSON.stringify({
-      type: "sign-in",
-      authenticatorData: authentication.authenticatorData,
-      credentialId: authentication.credentialId,
-      serverVerificationId: challengeData.serverVerificationId,
-      clientData: authentication.clientData,
-      signature: authentication.signature,
-    }),
-  });
-  // 5. store the credentialId in local storage
-  await storage.savePasskeyCredentialId(authentication.credentialId);
-
-  const verifData = await verifRes.json();
-
-  if (!verifData) {
-    throw new Error("No token received");
+  async authenticate(args: {
+    credentialId: string | undefined;
+    challenge: string;
+    rp: RpInfo;
+  }): Promise<AuthenticateResult> {
+    const { credentialId, challenge, rp } = args;
+    const result = await client.authenticate(
+      credentialId ? [credentialId] : [],
+      challenge,
+      {
+        authenticatorType: "auto",
+        userVerification: "required",
+        domain: rp.id,
+      },
+    );
+    const clientDataB64 = base64UrlToBase64(result.clientData);
+    const clientDataParsed = JSON.parse(base64ToString(clientDataB64));
+    return {
+      authenticatorData: result.authenticatorData,
+      credentialId: result.credentialId,
+      clientData: result.clientData,
+      signature: result.signature,
+      origin: clientDataParsed.origin,
+    };
   }
-  // 6. return the auth'd user type
-  return verifData;
 }
 
 /**
@@ -167,14 +83,11 @@ export async function hasStoredPasskey(
   client: ThirdwebClient,
   ecosystemId?: EcosystemWalletId,
 ) {
-  const storage = new LocalStorage({
+  const storage = new ClientScopedStorage({
+    storage: webLocalStorage, // TODO (passkey) react native variant of this fn
     clientId: client.clientId,
     ecosystemId: ecosystemId,
   });
   const credId = await storage.getPasskeyCredentialId();
   return !!credId;
 }
-
-function generateUsername(ecosystem?: Ecosystem) {
-  return `${ecosystem?.id ?? "wallet"}-${new Date().toISOString()}`;
-}

package/src/wallets/in-app/web/lib/in-app-account.ts

@@ -8,12 +8,14 @@ import { getAddress } from "../../../../utils/address.js";
 import { getThirdwebDomains } from "../../../../utils/domains.js";
 import { type Hex, hexToString } from "../../../../utils/encoding/hex.js";
 import { parseTypedData } from "../../../../utils/signatures/helpers/parseTypedData.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import { getEcosystemPartnerPermissions } from "../../../ecosystem/get-ecosystem-partner-permissions.js";
 import type {
   Account,
   SendTransactionOption,
 } from "../../../interfaces/wallet.js";
+import { ClientScopedStorage } from "../../core/authentication/client-scoped-storage.js";
 import {
   type GetUser,
   type GetUserWalletStatusRpcReturnType,
@@ -29,7 +31,6 @@ import type {
   SignTransactionReturnType,
   SignedTypedDataReturnType,
 } from "../types.js";
-import { LocalStorage } from "../utils/Storage/LocalStorage.js";
 import type { InAppWalletIframeCommunicator } from "../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 
 export type WalletManagementTypes = {
@@ -82,7 +83,7 @@ export class IFrameWallet {
   protected walletManagerQuerier: InAppWalletIframeCommunicator<
     WalletManagementTypes & WalletManagementUiTypes
   >;
-  protected localStorage: LocalStorage;
+  protected localStorage: ClientScopedStorage;
 
   /**
    * Not meant to be initialized directly. Call {@link initializeUser} to get an instance
@@ -101,7 +102,8 @@ export class IFrameWallet {
     this.ecosystem = ecosystem;
     this.walletManagerQuerier = querier;
 
-    this.localStorage = new LocalStorage({
+    this.localStorage = new ClientScopedStorage({
+      storage: webLocalStorage,
       clientId: client.clientId,
       ecosystemId: ecosystem?.id,
     });