Merge pull request #2145 from Web3Auth/feat/email-passwordless-captcha

Adds Email Passwordless Captcha

Author: chaitanyapotti

package-lock.json

@@ -51,6 +51,7 @@
     "@coinbase/wallet-sdk": "^4.3.x",
     "@mertasan/tailwindcss-variables": "^2.7.0",
     "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",

packages/modal/package.json

@@ -1,14 +1,22 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import json from "@rollup/plugin-json";
+import replace from "@rollup/plugin-replace";
 import url from "@rollup/plugin-url";
 import svgr from "@svgr/rollup";
+import { readJSONFile } from "@toruslabs/torus-scripts/helpers/utils.js";
 import path from "path";
 import postcss from "rollup-plugin-postcss";
+
+const pkg = await readJSONFile(path.resolve("./package.json"));
 // TODO: use ssr module for cjs build
 
 export const baseConfig = {
   input: ["./src/index.ts", "./src/react/index.ts", "./src/vue/index.ts"],
   plugins: [
+    replace({
+      "process.env.WEB3AUTH_VERSION": `"${pkg.version}"`,
+      preventAssignment: true,
+    }),
     postcss({
       config: {
         path: path.resolve("./postcss.config.js"),

packages/modal/rollup.config.mjs

@@ -2,6 +2,8 @@ import { EVM_CONNECTORS } from "@web3auth/no-modal";
 
 import { ConnectorsModalConfig } from "./interface";
 
+export const version = process.env.WEB3AUTH_VERSION;
+
 export const defaultConnectorsModalConfig: ConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

packages/modal/src/config.ts

@@ -186,14 +186,11 @@ function Login(props: LoginProps) {
         authBuildEnv,
       });
 
-      let token = "";
-      if (authConnection === AUTH_CONNECTION.SMS_PASSWORDLESS) {
-        const res = await captchaRef.current?.execute({ async: true });
-        if (!res) {
-          throw WalletLoginError.connectionError("Captcha token is required");
-        }
-        token = res.response;
+      const res = await captchaRef.current?.execute({ async: true });
+      if (!res) {
+        throw WalletLoginError.connectionError("Captcha token is required");
       }
+      const token = res.response;
 
       const result = await handler.sendVerificationCode({ captchaToken: token });
       if (result?.error) {

packages/modal/src/ui/components/Login/Login.tsx

@@ -2,6 +2,7 @@ import { post } from "@toruslabs/http-helpers";
 import { AUTH_CONNECTION, BUILD_ENV, storageAvailable } from "@web3auth/auth";
 import { WalletInitializationError } from "@web3auth/no-modal";
 
+import { version } from "../../config";
 import { PASSWORDLESS_BUILD_ENV_MAP } from "../config";
 import {
   CodeInitiateRequestBodyParams,
@@ -20,6 +21,8 @@ export abstract class PasswordlessHandler {
 
   trackingIdentifier?: string;
 
+  version: string = `web3auth-${version.split(".")[0]}`;
+
   constructor(params: PasswordlessHandlerParams) {
     if (!params.authConnection) throw WalletInitializationError.invalidParams("authConnection is required");
     if (!params.web3authClientId) throw WalletInitializationError.invalidParams("web3authClientId is required");
@@ -120,7 +123,7 @@ export abstract class PasswordlessHandler {
     };
   }
 
-  abstract sendVerificationCode(params?: { captchaToken: string }): Promise<IStartResponse>;
+  abstract sendVerificationCode(params: { captchaToken: string }): Promise<IStartResponse>;
 
   abstract verifyCode(code: string): Promise<IVerifyResponse>;
 }

packages/modal/src/ui/handlers/AbstractHandler.ts

@@ -14,7 +14,7 @@ export default class EmailPasswordlessHandler extends PasswordlessHandler {
     if (this.sessionStorageAvailable) this.trackingId = window.sessionStorage.getItem("trackingId") ?? undefined;
   }
 
-  async sendVerificationCode() {
+  async sendVerificationCode({ captchaToken }: { captchaToken?: string }) {
     const { loginHint, network, web3authClientId } = this.passwordlessParams;
 
     const finalParams: CodeInitiateRequestBodyParams = {
@@ -24,9 +24,10 @@ export default class EmailPasswordlessHandler extends PasswordlessHandler {
       login_hint: loginHint,
       tracking_id: this.trackingId,
       whitelabel: this.whiteLabelParams,
-      version: "",
+      version: this.version,
       network,
       flow_type: EMAIL_FLOW.code,
+      captcha_token: captchaToken,
     };
 
     return super.start(finalParams);
@@ -41,7 +42,7 @@ export default class EmailPasswordlessHandler extends PasswordlessHandler {
       code,
       connection: "email",
       tracking_id: this.trackingId as string,
-      version: "",
+      version: this.version,
       network,
       flow_type: EMAIL_FLOW.code,
     };

packages/modal/src/ui/handlers/EmailPasswordlessHandler.ts

@@ -28,7 +28,7 @@ export default class SmsPasswordlessHandler extends PasswordlessHandler {
       login_hint: loginHint,
       tracking_id: this.trackingId,
       whitelabel: this.whiteLabelParams,
-      version: "",
+      version: this.version,
       network,
       captcha_token: captchaToken,
     };
@@ -44,7 +44,7 @@ export default class SmsPasswordlessHandler extends PasswordlessHandler {
       code,
       connection: this.connection,
       tracking_id: this.trackingId as string,
-      version: "",
+      version: this.version,
       network,
     };
     return super.verify(params);

packages/modal/src/ui/handlers/SmsPasswordlessHandler.ts

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
+const { EnvironmentPlugin } = require("webpack");
 const generateWebpackConfig = require("../../webpack.config");
 
 const pkg = require("./package.json");
@@ -67,6 +67,7 @@ const config = generateWebpackConfig({
       },
     ],
   },
+  plugins: [new EnvironmentPlugin({ WEB3AUTH_VERSION: pkg.version })],
   ssrModule,
 });