feat: add phone login for embedded wallet (#2366)

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>
Co-authored-by: Manan Tank <manantankm@gmail.com>

Author: 3 people

.changeset/serious-crews-shake.md

@@ -0,0 +1,31 @@
+---
+"@thirdweb-dev/wallets": minor
+---
+
+Adds Login with SMS in EmbeddedWallet.
+
+Note that the `phoneNumber` requires the `+` symbol along with the IsoCountry code before the actual phone number.
+
+For a list of supported country code, you can use the `supportedSmsCountries` object which contains a list of all support country information.
+
+Usage:
+
+```typescript
+const embeddedWalletSdk = new EmbeddedWalletConnector({
+  clientId: "YOUR_THIRDWEB_CLIENT_ID",
+  // ...
+});
+
+// phone number needs to have the country code as prefix
+await embeddedWalletSdk.sendVerificationSms({ phoneNumber: "+11234567890" });
+
+const authResult = await embeddedWalletSdk.authenticate({
+  strategy: "phone_number_verification",
+  verificationCode: "123456",
+});
+
+const walletAddress = await embeddedWalletSdk.connect({
+  authResult,
+});
+const signer = await embeddedWalletSdk.getSigner();
+```

.changeset/tidy-pumpkins-agree.md

@@ -0,0 +1,26 @@
+---
+"@thirdweb-dev/react": minor
+---
+
+Add Login with SMS in EmbeddedWallet
+
+Note that by having `phone` before `email` in the options array, the phone login option will be presented first.
+
+Use `['email', 'phone']` to have the email option presented first.
+
+```ts
+<ThirdwebProvider
+    clientId={import.meta.env.VITE_TEMPLATE_CLIENT_ID}
+    activeChain={activeChain}
+    supportedWallets={[
+    embeddedWallet({
+        auth: {
+        options: ["phone", "email", "apple", "google"],
+        },
+    }),
+    ...defaultWallets,
+    ]}
+>
+    <App />
+</ThirdwebProvider>
+```

legacy_packages/react/src/evm/hooks/wallets/useEmbeddedWallet.ts

@@ -1,4 +1,6 @@
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import {
+  useAddress,
   useCreateWalletInstance,
   useSetConnectedWallet,
   useSetConnectionStatus,
@@ -7,17 +9,12 @@ import {
   useWallets,
 } from "@thirdweb-dev/react-core";
 import {
+  EmbeddedWallet,
   walletIds,
   type AuthParams,
-  EmbeddedWallet,
 } from "@thirdweb-dev/wallets";
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
 import { embeddedWallet } from "../../../wallet/wallets/embeddedWallet/embeddedWallet";
-import {
-  UseQueryResult,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
 
 /**
  * Hook to connect `EmbeddedWallet` which allows users to login via Email or social logins
@@ -194,25 +191,65 @@ export function useEmbeddedWalletUserEmail(): UseQueryResult<
   string | undefined
 > {
   const wallet = useWallet();
-  const queryClient = useQueryClient();
+  const address = useAddress();
 
   const emailQuery = useQuery<string | undefined, string>(
-    [wallet?.walletId, "embeddedWallet-email"],
+    [wallet?.walletId, address, "embeddedWallet-email"],
     () => {
       if (wallet && wallet.walletId === walletIds.embeddedWallet) {
-        return (wallet as EmbeddedWallet).getEmail();
+        return (wallet as EmbeddedWallet).getEmail() ?? "";
       }
+      return "";
     },
     {
       retry: false,
       enabled: wallet?.walletId === walletIds.embeddedWallet,
     },
   );
 
-  // Invalidate the query when the wallet changes
-  useEffect(() => {
-    queryClient.invalidateQueries([wallet?.walletId, "embeddedWallet-email"]);
-  }, [wallet, queryClient]);
+  return emailQuery;
+}
+
+/**
+ * Hook to get the user's phone number from connected `EmbeddedWallet`
+ *
+ * @example
+ * ```ts
+ * const phoneNumberQuery = useEmbeddedWalletUserPhoneNumber();
+ *
+ * if (phoneNumberQuery.isFetching) {
+ *  return <div> Loading... </div>;
+ * }
+ *
+ * if (phoneNumberQuery.data) {
+ *  return <div> Connected with {phoneNumberQuery.data} </div>;
+ * }
+ *
+ * return <div> Not connected </div>;
+ * ```
+ *
+ * @walletConnection
+ * @returns Hook's `data` property contains the `string` email if `EmbeddedWallet` is connected, otherwise `undefined`
+ */
+export function useEmbeddedWalletUserPhoneNumber(): UseQueryResult<
+  string | undefined
+> {
+  const wallet = useWallet();
+  const address = useAddress();
+
+  const emailQuery = useQuery<string | undefined, string>(
+    [wallet?.walletId, address, "embeddedWallet-phone-number"],
+    () => {
+      if (wallet && wallet.walletId === walletIds.embeddedWallet) {
+        return (wallet as EmbeddedWallet).getPhoneNumber() ?? "";
+      }
+      return "";
+    },
+    {
+      retry: false,
+      enabled: wallet?.walletId === walletIds.embeddedWallet,
+    },
+  );
 
   return emailQuery;
 }

legacy_packages/react/src/evm/locales/en.ts

@@ -1,5 +1,5 @@
-import { ThirdwebLocale } from "./types";
 import { DeepPartial, immutableOverride } from "../utils/applyOverrides";
+import { ThirdwebLocale } from "./types";
 
 // wallets that connect via extension and QR scan
 function extensionAndQRScanScreens(walletName: string) {
@@ -210,20 +210,27 @@ export function enDefault(): ThirdwebLocale {
         signInWithGoogle: "Sign in with Google",
         signInWithFacebook: "Sign in with Facebook",
         signInWithApple: "Sign in with Apple",
+        signInWithEmail: "Sign in with Email",
         emailPlaceholder: "Enter your email address",
         submitEmail: "Continue",
         signIn: "Sign in",
         emailRequired: "Email address is required",
         invalidEmail: "Invalid email address",
         maxAccountsExceeded:
           "Maximum number of accounts exceeded. Please notify the app developer.",
+        invalidPhone: "Invalid phone number",
+        invalidEmailOrPhone: "Invalid email address or phone number",
+        countryCodeMissing: "Phone number must start with a country code",
+        phonePlaceholder: "Enter phone number",
+        signInWithPhone: "Sign in with phone number",
+        phoneRequired: "phone number is required",
         socialLoginScreen: {
           title: "Sign in",
           instruction: "Sign into your account in the pop-up",
           failed: "Failed to sign in",
           retry: "Retry",
         },
-        emailLoginScreen: {
+        otpLoginScreen: {
           title: "Sign in",
           enterCodeSendTo: "Enter the verification code sent to",
           newDeviceDetected: "New device detected",

legacy_packages/react/src/evm/locales/es.ts

@@ -213,19 +213,27 @@ export function esDefault(): ThirdwebLocale {
         signInWithGoogle: "Iniciar sesión con Google",
         signInWithFacebook: "Iniciar sesión con Facebook",
         signInWithApple: "Iniciar sesión con Apple",
+        signInWithEmail: "Iniciar sesión con correo electrónico",
         emailPlaceholder: "Ingresa tu dirección de correo electrónico",
         submitEmail: "Continuar",
         signIn: "Iniciar sesión",
         emailRequired: "Se requiere dirección de correo electrónico",
         invalidEmail: "Dirección de correo electrónico inválida",
         maxAccountsExceeded: "Número máximo de cuentas alcanzado",
+        invalidPhone: "Número de teléfono inválido",
+        invalidEmailOrPhone:
+          "Dirección de correo electrónico o número de teléfono inválido",
+        countryCodeMissing: "Phone number must start with a country code",
+        phonePlaceholder: "Ingresa tu número de teléfono",
+        signInWithPhone: "Iniciar sesión con número de teléfono",
+        phoneRequired: "Se requiere número de teléfono",
         socialLoginScreen: {
           title: "Iniciar sesión",
           instruction: "Inicie sesión en su cuenta en la ventana abierta",
           failed: "Error al iniciar sesión",
           retry: "Reintentar",
         },
-        emailLoginScreen: {
+        otpLoginScreen: {
           title: "Iniciar sesión",
           enterCodeSendTo: "Ingresa el código de verificación enviado a",
           newDeviceDetected: "Nuevo dispositivo detectado",

legacy_packages/react/src/evm/locales/ja.ts

@@ -212,19 +212,26 @@ export function jaDefault(): ThirdwebLocale {
         signInWithGoogle: "Googleでサインイン",
         signInWithFacebook: "Facebookでサインイン",
         signInWithApple: "Appleでサインイン",
+        signInWithEmail: "電子メールでサインインする",
         emailPlaceholder: "メールアドレスを入力してください",
         submitEmail: "続ける",
         emailRequired: "メールアドレスが必要です",
         invalidEmail: "無効なメールアドレス",
         signIn: "サインイン",
         maxAccountsExceeded: "アカウントの最大数を超えました",
+        invalidPhone: "無効な電話番号",
+        invalidEmailOrPhone: "無効なメールアドレスまたは電話番号",
+        countryCodeMissing: "Phone number must start with a country code",
+        phonePlaceholder: "電話番号を入力してください",
+        signInWithPhone: "電話番号でログイン",
+        phoneRequired: "電話番号が必要です",
         socialLoginScreen: {
           title: "サインイン",
           instruction: "ポップアップウィンドウでアカウントにサインインします", // TODO: check if this is correct
           failed: "サインインに失敗しました",
           retry: "再試行",
         },
-        emailLoginScreen: {
+        otpLoginScreen: {
           title: "サインイン",
           enterCodeSendTo: "送信された確認コードを入力してください",
           newDeviceDetected: "新しいデバイスが検出されました",

legacy_packages/react/src/evm/locales/tl.ts

@@ -215,19 +215,26 @@ export function tlDefault(): ThirdwebLocale {
         signInWithGoogle: "Mag-sign in gamit ang Google",
         signInWithFacebook: "Mag-sign in gamit ang Facebook",
         signInWithApple: "Mag-sign in gamit ang Apple",
+        signInWithEmail: "Mag-sign in gamit ang email",
         emailPlaceholder: "Ilagay ang iyong email address",
         submitEmail: "Magpatuloy",
         signIn: "Mag-sign in",
         emailRequired: "Kinakailangan ang email address",
         invalidEmail: "Hindi wastong email address",
         maxAccountsExceeded: "Naabot mo na ang maximum na bilang ng accounts",
+        invalidPhone: "Hindi wastong numero ng telepono",
+        invalidEmailOrPhone: "Hindi wastong email address o numero ng telepono",
+        countryCodeMissing: "Phone number must start with a country code",
+        phonePlaceholder: "Ilagay ang iyong numero ng telepono",
+        signInWithPhone: "Mag-login gamit ang numero ng telepono",
+        phoneRequired: "Kinakailangan ang numero ng telepono",
         socialLoginScreen: {
           title: "Mag-sign in",
           instruction: "Mag-sign in sa iyong account sa pop-up",
           failed: "Hindi nagawa ang pag-sign in",
           retry: "Subukan muli",
         },
-        emailLoginScreen: {
+        otpLoginScreen: {
           title: "Mag-sign in",
           enterCodeSendTo: "Ilagay ang verification code na ipinadala sa",
           newDeviceDetected: "Natuklasan ang bagong device",

legacy_packages/react/src/evm/locales/types.ts

@@ -131,7 +131,7 @@ export type ThirdwebLocale = {
         submitButton: string;
         title: string;
       };
-      emailLoginScreen: {
+      otpLoginScreen: {
         enterCodeSendTo: string;
         enterRecoveryCode: string;
         failedToSendCode: string;
@@ -143,6 +143,7 @@ export type ThirdwebLocale = {
         title: string;
         verify: string;
       };
+      signInWithEmail: string;
       emailPlaceholder: string;
       emailRequired: string;
       enterPassword: {
@@ -153,6 +154,12 @@ export type ThirdwebLocale = {
         wrongPassword: string;
       };
       invalidEmail: string;
+      invalidEmailOrPhone: string;
+      invalidPhone: string;
+      countryCodeMissing: string;
+      phonePlaceholder: string;
+      signInWithPhone: string;
+      phoneRequired: string;
       signIn: string;
       signInWithApple: string;
       signInWithFacebook: string;