thirdweb 5.29.3-nightly-ffaff744f72d2cb22896e7501677b48f76ea857a-20240614184424 → 5.29.3-nightly-476b6cc271b0891fa01fb09ca509c564b850ccfa-20240614185219

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

@@ -1,6 +1,5 @@
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Account } from "../../interfaces/wallet.js";
-import { oauthStrategyToAuthProvider } from "../core/authentication/index.js";
 import {
   type AuthArgsType,
   type AuthLoginReturnType,
@@ -10,6 +9,7 @@ import {
   type PreAuthArgsType,
   type SendEmailOtpReturnType,
   UserWalletStatus,
+  oauthStrategyToAuthProvider,
 } from "../core/authentication/type.js";
 import type { InAppConnector } from "../core/interfaces/connector.js";
 import {
@@ -20,7 +20,7 @@ import {
   sendVerificationSms,
   socialLogin,
   validateEmailOTP,
-} from "./auth.js";
+} from "./auth/native-auth.js";
 import { fetchUserDetails } from "./helpers/api/fetchers.js";
 import { logoutUser } from "./helpers/auth/logout.js";
 import { getWalletUserDetails } from "./helpers/storage/local.js";

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

@@ -0,0 +1,70 @@
+import type { ThirdwebClient } from "../../../client/client.js";
+import type { Wallet } from "../../interfaces/wallet.js";
+import type { CreateWalletArgs } from "../../wallet-types.js";
+import { createInAppWallet } from "../core/wallet/in-app-core.js";
+
+/**
+ * Creates an in-app wallet.
+ * @param createOptions - configuration options
+ * @returns The created in-app wallet.
+ * @example
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ *
+ * const wallet = inAppWallet();
+ *
+ * const account = await wallet.connect({
+ *   client,
+ *   chain,
+ *   strategy: "google",
+ * });
+ * ```
+ *
+ * Enable smart accounts and sponsor gas for your users:
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  smartAccount: {
+ *   chain: sepolia,
+ *   sponsorGas: true,
+ * },
+ * });
+ * ```
+ *
+ * Specify a logo for your login page
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  metadata: {
+ *   image: {
+ *    src: "https://example.com/logo.png",
+ *    alt: "My logo",
+ *    width: 100,
+ *    height: 100,
+ *   },
+ *  },
+ * });
+ * ```
+ *
+ * Hide the ability to export the private key within the Connect Modal
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  hidePrivateKeyExport: true
+ * });
+ * ```
+ * @wallet
+ */
+export function inAppWallet(
+  createOptions?: CreateWalletArgs<"inApp">[1],
+): Wallet<"inApp"> {
+  return createInAppWallet({
+    createOptions,
+    connectorFactory: async (client: ThirdwebClient) => {
+      const { InAppWebConnector } = await import("./lib/web-connector.js");
+      return new InAppWebConnector({
+        client,
+      });
+    },
+  });
+}

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

@@ -0,0 +1,266 @@
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type {
+  AuthAndWalletRpcReturnType,
+  AuthLoginReturnType,
+  AuthStoredTokenWithCookieReturnType,
+  LogoutReturnType,
+  SendEmailOtpReturnType,
+} from "../../../core/authentication/type.js";
+import type { ClientIdWithQuerierType } from "../../types.js";
+import { LocalStorage } from "../../utils/Storage/LocalStorage.js";
+import type { InAppWalletIframeCommunicator } from "../../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
+import { BaseLogin } from "./base-login.js";
+
+export type AuthQuerierTypes = {
+  logout: undefined;
+  initIframe: {
+    clientId: string;
+    authCookie: string;
+    walletUserId: string;
+    deviceShareStored: string;
+  };
+  loginWithStoredTokenDetails: {
+    storedToken: AuthStoredTokenWithCookieReturnType["storedToken"];
+    recoveryCode?: string;
+  };
+};
+
+/**
+ *
+ */
+export class Auth {
+  protected client: ThirdwebClient;
+  protected AuthQuerier: InAppWalletIframeCommunicator<AuthQuerierTypes>;
+  protected localStorage: LocalStorage;
+  protected onAuthSuccess: (
+    authResults: AuthAndWalletRpcReturnType,
+  ) => Promise<AuthLoginReturnType>;
+  private BaseLogin: BaseLogin;
+
+  /**
+   * Used to manage the user's auth states. This should not be instantiated directly.
+   * Call {@link InAppWalletSdk.auth} instead.
+   * @internal
+   */
+  constructor({
+    client,
+    querier,
+    onAuthSuccess,
+    baseUrl,
+  }: ClientIdWithQuerierType & {
+    baseUrl: string;
+    onAuthSuccess: (
+      authDetails: AuthAndWalletRpcReturnType,
+    ) => Promise<AuthLoginReturnType>;
+  }) {
+    this.client = client;
+
+    this.AuthQuerier = querier;
+    this.localStorage = new LocalStorage({ clientId: client.clientId });
+    this.onAuthSuccess = onAuthSuccess;
+    this.BaseLogin = new BaseLogin({
+      postLogin: async (result) => {
+        return this.postLogin(result);
+      },
+      preLogin: async () => {
+        await this.preLogin();
+      },
+      querier: querier,
+      client,
+      baseUrl,
+    });
+  }
+
+  private async preLogin() {
+    await this.logout();
+  }
+
+  private async postLogin({
+    storedToken,
+    walletDetails,
+  }: AuthAndWalletRpcReturnType): Promise<AuthLoginReturnType> {
+    if (storedToken.shouldStoreCookieString) {
+      await this.localStorage.saveAuthCookie(storedToken.cookieString);
+    }
+    const initializedUser = await this.onAuthSuccess({
+      storedToken,
+      walletDetails,
+    });
+    return initializedUser;
+  }
+
+  async loginWithAuthToken(
+    authToken: AuthStoredTokenWithCookieReturnType,
+    recoveryCode?: string,
+  ): Promise<AuthLoginReturnType> {
+    await this.preLogin();
+    const result = await this.AuthQuerier.call<AuthAndWalletRpcReturnType>({
+      procedureName: "loginWithStoredTokenDetails",
+      params: {
+        storedToken: authToken.storedToken,
+        recoveryCode,
+      },
+    });
+    return this.postLogin(result);
+  }
+
+  /**
+   * Used to log the user into their thirdweb wallet on your platform via a myriad of auth providers
+   * @example
+   * ```typescript
+   * const thirdwebInAppWallet = new InAppWalletSdk({clientId: "YOUR_CLIENT_ID", chain: "Polygon"})
+   * try {
+   *   const user = await thirdwebInAppWallet.auth.loginWithModal();
+   *   // user is now logged in
+   * } catch (e) {
+   *   // User closed modal or something else went wrong during the authentication process
+   *   console.error(e)
+   * }
+   * ```
+   * @returns `{{user: InitializedUser}}` An InitializedUser object.
+   */
+  async loginWithModal(): Promise<AuthLoginReturnType> {
+    return this.BaseLogin.loginWithModal();
+  }
+
+  /**
+   * Used to log the user into their thirdweb wallet using email OTP
+   * @example
+   * ```typescript
+   *  // Basic Flow
+   *  const thirdwebInAppWallet = new InAppWalletSdk({clientId: "", chain: "Polygon"});
+   *  try {
+   *    // prompts user to enter the code they received
+   *    const user = await thirdwebInAppWallet.auth.loginWithThirdwebEmailOtp({ email : "you@example.com" });
+   *    // user is now logged in
+   *  } catch (e) {
+   *    // User closed the OTP modal or something else went wrong during the authentication process
+   *    console.error(e)
+   *  }
+   * ```
+   * @param args - args.email: We will send the email an OTP that needs to be entered in order for them to be logged in.
+   * @returns `{{user: InitializedUser}}` An InitializedUser object. See {@link InAppWalletSdk.getUser} for more
+   */
+  async loginWithEmailOtp(
+    args: Parameters<BaseLogin["loginWithEmailOtp"]>[0],
+  ): Promise<AuthLoginReturnType> {
+    return this.BaseLogin.loginWithEmailOtp(args);
+  }
+
+  /**
+   * @internal
+   */
+  async loginWithCustomJwt(
+    args: Parameters<BaseLogin["loginWithCustomJwt"]>[0],
+  ): Promise<AuthLoginReturnType> {
+    return this.BaseLogin.loginWithCustomJwt(args);
+  }
+
+  /**
+   * @internal
+   */
+  async loginWithCustomAuthEndpoint(
+    args: Parameters<BaseLogin["loginWithCustomAuthEndpoint"]>[0],
+  ): Promise<AuthLoginReturnType> {
+    return this.BaseLogin.loginWithCustomAuthEndpoint(args);
+  }
+
+  /**
+   * @internal
+   */
+  async loginWithOauth(
+    args: Parameters<BaseLogin["loginWithOauth"]>[0],
+  ): Promise<AuthLoginReturnType> {
+    return this.BaseLogin.loginWithOauth(args);
+  }
+
+  /**
+   * A headless way to send the users at the passed email an OTP code.
+   * You need to then call {@link Auth.verifyEmailLoginOtp} in order to complete the login process
+   * @example
+   * @param param0.email
+   * ```typescript
+   *  const thirdwebInAppWallet = new InAppWalletSdk({clientId: "", chain: "Polygon"});
+   *  // sends user an OTP code
+   * try {
+   *    await thirdwebInAppWallet.auth.sendEmailLoginOtp({ email : "you@example.com" });
+   * } catch(e) {
+   *    // Error Sending user's email an OTP code
+   *    console.error(e);
+   * }
+   *
+   * // Then when your user is ready to verify their OTP
+   * try {
+   *    const user = await thirdwebInAppWallet.auth.verifyEmailLoginOtp({ email: "you@example.com", otp: "6-DIGIT_CODE_HERE" });
+   * } catch(e) {
+   *    // Error verifying the OTP code
+   *    console.error(e)
+   * }
+   * ```
+   * @param param0 - param0.email We will send the email an OTP that needs to be entered in order for them to be logged in.
+   * @returns `{{ isNewUser: boolean }}` IsNewUser indicates if the user is a new user to your platform
+   * @internal
+   */
+  async sendEmailLoginOtp({
+    email,
+  }: Parameters<
+    BaseLogin["sendEmailLoginOtp"]
+  >[0]): Promise<SendEmailOtpReturnType> {
+    return this.BaseLogin.sendEmailLoginOtp({
+      email,
+    });
+  }
+
+  /**
+   * @internal
+   */
+  async sendSmsLoginOtp({
+    phoneNumber,
+  }: Parameters<
+    BaseLogin["sendSmsLoginOtp"]
+  >[0]): Promise<SendEmailOtpReturnType> {
+    return this.BaseLogin.sendSmsLoginOtp({
+      phoneNumber,
+    });
+  }
+
+  /**
+   * Used to verify the otp that the user receives from thirdweb
+   *
+   * See {@link Auth.sendEmailLoginOtp} for how the headless call flow looks like. Simply swap out the calls to `loginWithThirdwebEmailOtp` with `verifyThirdwebEmailLoginOtp`
+   * @param args - props.email We will send the email an OTP that needs to be entered in order for them to be logged in.
+   * props.otp The code that the user received in their email
+   * @returns `{{user: InitializedUser}}` An InitializedUser object containing the user's status, wallet, authDetails, and more
+   * @internal
+   */
+  async verifyEmailLoginOtp(
+    args: Parameters<BaseLogin["verifyEmailLoginOtp"]>[0],
+  ) {
+    return this.BaseLogin.verifyEmailLoginOtp(args);
+  }
+
+  /**
+   * @internal
+   */
+  async verifySmsLoginOtp(args: Parameters<BaseLogin["verifySmsLoginOtp"]>[0]) {
+    return this.BaseLogin.verifySmsLoginOtp(args);
+  }
+
+  /**
+   * Logs any existing user out of their wallet.
+   * @returns `{{success: boolean}}` true if a user is successfully logged out. false if there's no user currently logged in.
+   * @internal
+   */
+  async logout(): Promise<LogoutReturnType> {
+    const { success } = await this.AuthQuerier.call<LogoutReturnType>({
+      procedureName: "logout",
+      params: undefined,
+    });
+    const isRemoveAuthCookie = await this.localStorage.removeAuthCookie();
+    const isRemoveUserId = await this.localStorage.removeWalletUserId();
+
+    return {
+      success: success || isRemoveAuthCookie || isRemoveUserId,
+    };
+  }
+}