Rename to init + adds login_mode + adds connectTo hook in web3auth modal

arch1995 · arch1995 · commit e0957a52d2b2 · 2025-05-15T15:58:06.000+05:30
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ Hop on to the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a
 Web3Auth needs to initialise as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialisation is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for Ethereum blockchain will look like this:
 
 ```js
-import { Web3Auth } from "@web3auth/modal";
+import { Web3Auth } from "web3auth";
 
 //Initialize within your constructor
 const web3auth = new Web3Auth({
@@ -62,7 +62,7 @@ const web3auth = new Web3Auth({
   },
 });
 
-await web3auth.initModal();
+await web3auth.init();
 ```
 
 ### Login your User
diff --git a/demo/wagmi-react-app/src/components/Main.tsx b/demo/wagmi-react-app/src/components/Main.tsx
@@ -16,7 +16,7 @@ import styles from "../styles/Home.module.css";
 
 const Main = () => {
   const { provider, isConnected } = useWeb3Auth();
-  const { loading: connecting, connect, error: connectingError, connectorName } = useWeb3AuthConnect();
+  const { loading: connecting, connect, error: connectingError, connectorName, connectTo } = useWeb3AuthConnect();
   const { disconnect } = useWeb3AuthDisconnect();
   const { signMessageAsync, data: signedMessageData } = useSignMessage();
   const { address, isConnected: isWagmiConnected } = useAccount();
@@ -210,9 +210,14 @@ const Main = () => {
       {connecting ? (
         <p>Connecting to {connectorName}...</p>
       ) : (
-        <button onClick={() => connect()} className={styles.card}>
-          Login
-        </button>
+        <>
+          <button onClick={() => connect()} className={styles.card}>
+            Login with Modal
+          </button>
+          <button onClick={() => connectTo("auth", { authConnection: "facebook" })} className={styles.card}>
+            Login with Facebook
+          </button>
+        </>
       )}
       {connectingError && <p>Error: {connectingError.message}</p>}
     </>
diff --git a/packages/modal/README.md b/packages/modal/README.md
@@ -43,7 +43,7 @@ Hop on to the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a
 Web3Auth needs to initialise as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialisation is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for Ethereum blockchain will look like this:
 
 ```js
-import { Web3Auth } from "@web3auth/modal";
+import { Web3Auth } from "web3auth";
 
 //Initialize within your constructor
 const web3auth = new Web3Auth({
@@ -54,7 +54,7 @@ const web3auth = new Web3Auth({
   },
 });
 
-await web3auth.initModal();
+await web3auth.init();
 ```
 
 ### Login your User
diff --git a/packages/modal/src/interface.ts b/packages/modal/src/interface.ts
@@ -9,6 +9,5 @@ export interface ConnectorsModalConfig {
   hideWalletDiscovery?: boolean;
 }
 export interface IWeb3AuthModal extends IWeb3Auth {
-  initModal(options?: { signal?: AbortSignal }): Promise<void>;
   connect(): Promise<IProvider | null>;
 }
diff --git a/packages/modal/src/modalManager.ts b/packages/modal/src/modalManager.ts
@@ -17,6 +17,7 @@ import {
   type IWeb3AuthCoreOptions,
   IWeb3AuthState,
   log,
+  LOGIN_MODE,
   type LoginMethodConfig,
   type ProjectConfig,
   type WALLET_CONNECTOR_TYPE,
@@ -61,7 +62,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     log.info("modalConfig", this.modalConfig);
   }
 
-  public async initModal(options?: { signal?: AbortSignal }): Promise<void> {
+  public async init(options?: { signal?: AbortSignal }): Promise<void> {
     const { signal } = options || {};
 
     super.checkInitRequirements();
@@ -512,7 +513,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
 
   private onSocialLogin = async (params: { connector: WALLET_CONNECTOR_TYPE; loginParams: AuthLoginParams }): Promise<void> => {
     try {
-      await this.connectTo(WALLET_CONNECTORS.AUTH, params.loginParams);
+      await this.connectTo(WALLET_CONNECTORS.AUTH, params.loginParams, LOGIN_MODE.MODAL);
     } catch (error) {
       log.error(`Error while connecting to connector: ${params.connector}`, error);
     }
@@ -523,7 +524,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     loginParams: { chainNamespace: ChainNamespaceType };
   }): Promise<void> => {
     try {
-      await this.connectTo(params.connector as WALLET_CONNECTOR_TYPE, params.loginParams);
+      await this.connectTo(params.connector as WALLET_CONNECTOR_TYPE, params.loginParams, LOGIN_MODE.MODAL);
     } catch (error) {
       log.error(`Error while connecting to connector: ${params.connector}`, error);
     }
diff --git a/packages/modal/src/react/context/Web3AuthInnerContext.ts b/packages/modal/src/react/context/Web3AuthInnerContext.ts
@@ -46,7 +46,7 @@ export function Web3AuthInnerProvider(params: PropsWithChildren<Web3AuthProvider
       try {
         setInitError(null);
         setIsInitializing(true);
-        await web3Auth.initModal({ signal: controller.signal });
+        await web3Auth.init({ signal: controller.signal });
       } catch (error) {
         setInitError(error as Error);
       } finally {
diff --git a/packages/modal/src/react/hooks/useWeb3AuthConnect.ts b/packages/modal/src/react/hooks/useWeb3AuthConnect.ts
@@ -1,4 +1,4 @@
-import type { IProvider, WALLET_CONNECTOR_TYPE, Web3AuthError } from "@web3auth/no-modal";
+import type { IProvider, LoginParamMap, WALLET_CONNECTOR_TYPE, Web3AuthError } from "@web3auth/no-modal";
 import { useCallback, useEffect, useState } from "react";
 
 import { useWeb3AuthInner } from "../hooks/useWeb3AuthInner";
@@ -9,6 +9,7 @@ export interface IUseWeb3AuthConnect {
   error: Web3AuthError | null;
   connectorName: WALLET_CONNECTOR_TYPE | null;
   connect(): Promise<IProvider | null>;
+  connectTo<T extends WALLET_CONNECTOR_TYPE>(connector: T, params?: LoginParamMap[T]): Promise<IProvider | null>;
 }
 
 export const useWeb3AuthConnect = (): IUseWeb3AuthConnect => {
@@ -44,11 +45,31 @@ export const useWeb3AuthConnect = (): IUseWeb3AuthConnect => {
     }
   }, [web3Auth]);
 
+  const connectTo = useCallback(
+    async <T extends WALLET_CONNECTOR_TYPE>(connector: T, params?: LoginParamMap[T]) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const provider = await web3Auth.connectTo(connector, params);
+        if (provider) {
+          setConnectorName(web3Auth.connectedConnectorName);
+        }
+        return provider;
+      } catch (error) {
+        setError(error as Web3AuthError);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [web3Auth]
+  );
+
   return {
     isConnected,
     loading,
     error,
     connectorName,
     connect,
+    connectTo,
   };
 };
diff --git a/packages/modal/src/ui/loginModal.tsx b/packages/modal/src/ui/loginModal.tsx
@@ -10,6 +10,7 @@ import {
   CONNECTOR_EVENTS,
   type IConnectorDataEvent,
   log,
+  LOGIN_MODE,
   type LoginMethodConfig,
   type MetaMaskConnectorData,
   type WALLET_CONNECTOR_TYPE,
@@ -367,7 +368,7 @@ export class LoginModal {
     listener.on(CONNECTOR_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {
       log.debug("connected with connector", data);
       // only show success if not being reconnected again.
-      if (!data.reconnected) {
+      if (!data.reconnected && data.loginMode === LOGIN_MODE.MODAL) {
         this.setState({
           status: MODAL_STATUS.CONNECTED,
           modalVisibility: true,
diff --git a/packages/modal/src/ui/public/index.html b/packages/modal/src/ui/public/index.html
@@ -29,7 +29,7 @@ <h1>Test web3auth app</h1>
             theme: "dark",
             // version: "1",
           });
-          await modal.initModal();
+          await modal.initSdk();
           console.log("modal init");
           modal.addSocialLogins(
             "auth",
diff --git a/packages/modal/src/vue/Web3AuthProvider.ts b/packages/modal/src/vue/Web3AuthProvider.ts
@@ -74,7 +74,7 @@ export const Web3AuthProvider = defineComponent({
           try {
             initError.value = null;
             isInitializing.value = true;
-            await newWeb3Auth.initModal({ signal: controller.signal });
+            await newWeb3Auth.init({ signal: controller.signal });
           } catch (error) {
             initError.value = error as Error;
           } finally {
diff --git a/packages/modal/src/vue/composables/useWeb3AuthConnect.ts b/packages/modal/src/vue/composables/useWeb3AuthConnect.ts
@@ -1,4 +1,4 @@
-import { IProvider, WALLET_CONNECTOR_TYPE, WalletInitializationError, Web3AuthError } from "@web3auth/no-modal";
+import { IProvider, LoginParamMap, WALLET_CONNECTOR_TYPE, WalletInitializationError, Web3AuthError } from "@web3auth/no-modal";
 import { Ref, ref, watch } from "vue";
 
 import { useWeb3AuthInner } from "./useWeb3AuthInner";
@@ -9,6 +9,7 @@ export interface IUseWeb3AuthConnect {
   error: Ref<Web3AuthError | null>;
   connectorName: Ref<WALLET_CONNECTOR_TYPE | null>;
   connect(): Promise<IProvider | null>;
+  connectTo<T extends WALLET_CONNECTOR_TYPE>(connector: T, params?: LoginParamMap[T]): Promise<IProvider | null>;
 }
 
 export const useWeb3AuthConnect = (): IUseWeb3AuthConnect => {
@@ -46,11 +47,28 @@ export const useWeb3AuthConnect = (): IUseWeb3AuthConnect => {
     }
   };
 
+  const connectTo = async <T extends WALLET_CONNECTOR_TYPE>(connectorType: T, loginParams?: LoginParamMap[T]) => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const localProvider = await web3Auth.value.connectTo(connectorType, loginParams);
+      connectorName.value = web3Auth.value.connectedConnectorName;
+      return localProvider;
+    } catch (err) {
+      error.value = err as Web3AuthError;
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  };
+
   return {
     isConnected,
     loading,
     error,
     connectorName,
     connect,
+    connectTo,
   };
 };
diff --git a/packages/no-modal/src/base/connector/interfaces.ts b/packages/no-modal/src/base/connector/interfaces.ts
@@ -17,7 +17,7 @@ import {
 import type { ChainNamespaceType, ConnectorNamespaceType, CustomChainConfig } from "../chain/IChainInterface";
 import type { IWeb3AuthCoreOptions } from "../core/IWeb3Auth";
 import { Web3AuthError } from "../errors";
-import type { ProjectConfig } from "../interfaces";
+import type { LoginModeType, ProjectConfig } from "../interfaces";
 import type { ProviderEvents, SafeEventEmitterProvider } from "../provider/IProvider";
 import { WALLET_CONNECTOR_TYPE } from "../wallet";
 import { CONNECTOR_CATEGORY, CONNECTOR_EVENTS, CONNECTOR_STATUS } from "./constants";
@@ -96,7 +96,13 @@ export type BaseConnectorLoginParams = {
 
 export type ConnectorFn = (params: ConnectorParams) => IConnector<unknown>;
 
-export type CONNECTED_EVENT_DATA = { connector: WALLET_CONNECTOR_TYPE; provider: IProvider; reconnected: boolean };
+export type CONNECTED_EVENT_DATA = {
+  connector: WALLET_CONNECTOR_TYPE;
+  provider: IProvider;
+  reconnected: boolean;
+  // only available from no-modal instance.
+  loginMode?: LoginModeType;
+};
 
 export interface IConnectorDataEvent {
   connectorName: string;
diff --git a/packages/no-modal/src/base/constants.ts b/packages/no-modal/src/base/constants.ts
@@ -15,3 +15,8 @@ export const WIDGET_TYPE = {
 } as const;
 
 export const WEB3AUTH_STATE_STORAGE_KEY = "Web3Auth-state";
+
+export const LOGIN_MODE = {
+  MODAL: "modal",
+  NO_MODAL: "no-modal",
+} as const;
diff --git a/packages/no-modal/src/base/interfaces.ts b/packages/no-modal/src/base/interfaces.ts
@@ -3,7 +3,7 @@ import { type SmartAccountType } from "@toruslabs/ethereum-controllers";
 import { AuthConnectionConfigItem, type WhiteLabelData } from "@web3auth/auth";
 
 import { type ChainNamespaceType, type CustomChainConfig } from "./chain/IChainInterface";
-import { MODAL_SIGN_IN_METHODS, SMART_ACCOUNT_WALLET_SCOPE, WIDGET_TYPE } from "./constants";
+import { LOGIN_MODE, MODAL_SIGN_IN_METHODS, SMART_ACCOUNT_WALLET_SCOPE, WIDGET_TYPE } from "./constants";
 import { WALLET_CONNECTOR_TYPE } from "./wallet";
 
 export interface WhitelistResponse {
@@ -123,4 +123,6 @@ export interface WalletRegistryItem {
   imgExtension?: string;
 }
 
+export type LoginModeType = (typeof LOGIN_MODE)[keyof typeof LOGIN_MODE];
+
 export type WalletRegistry = { others: Record<string, WalletRegistryItem>; default: Record<string, WalletRegistryItem> };
diff --git a/packages/no-modal/src/noModal.ts b/packages/no-modal/src/noModal.ts
@@ -22,6 +22,8 @@ import {
   type IWeb3AuthCoreOptions,
   IWeb3AuthState,
   log,
+  LOGIN_MODE,
+  LoginModeType,
   type LoginParamMap,
   PLUGIN_NAMESPACES,
   PLUGIN_STATUS,
@@ -69,6 +71,8 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
     idToken: null,
   };
 
+  private loginMode: LoginModeType = LOGIN_MODE.NO_MODAL;
+
   constructor(options: IWeb3AuthCoreOptions, initialState?: IWeb3AuthState) {
     super();
     if (!options.clientId) throw WalletInitializationError.invalidParams("Please provide a valid clientId in constructor");
@@ -222,7 +226,12 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
    * Connect to a specific wallet connector
    * @param connectorName - Key of the wallet connector to use.
    */
-  async connectTo<T extends WALLET_CONNECTOR_TYPE>(connectorName: T, loginParams?: LoginParamMap[T]): Promise<IProvider | null> {
+  async connectTo<T extends WALLET_CONNECTOR_TYPE>(
+    connectorName: T,
+    loginParams?: LoginParamMap[T],
+    loginMode?: LoginModeType
+  ): Promise<IProvider | null> {
+    this.loginMode = loginMode || "no-modal";
     const connector = this.getConnector(connectorName, (loginParams as { chainNamespace?: ChainNamespaceType })?.chainNamespace);
     if (!connector || !this.commonJRPCProvider)
       throw WalletInitializationError.notFound(`Please add wallet connector for ${connectorName} wallet, before connecting`);
@@ -510,7 +519,7 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
   }
 
   protected subscribeToConnectorEvents(connector: IConnector<unknown>): void {
-    connector.on(CONNECTOR_EVENTS.CONNECTED, async (data: CONNECTED_EVENT_DATA) => {
+    connector.on(CONNECTOR_EVENTS.CONNECTED, async (data: Omit<CONNECTED_EVENT_DATA, "loginMode">) => {
       if (!this.commonJRPCProvider) throw WalletInitializationError.notFound(`CommonJrpcProvider not found`);
       const { provider } = data;
 
@@ -548,7 +557,7 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       this.status = CONNECTOR_STATUS.CONNECTED;
       log.debug("connected", this.status, this.connectedConnectorName);
       this.connectToPlugins(data);
-      this.emit(CONNECTOR_EVENTS.CONNECTED, { ...data });
+      this.emit(CONNECTOR_EVENTS.CONNECTED, { ...data, loginMode: this.loginMode });
     });
 
     connector.on(CONNECTOR_EVENTS.DISCONNECTED, async () => {

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,5 @@ export interface ConnectorsModalConfig {`
`9`	`9`	`hideWalletDiscovery?: boolean;`
`10`	`10`	`}`
`11`	`11`	`export interface IWeb3AuthModal extends IWeb3Auth {`
`12`		`- initModal(options?: { signal?: AbortSignal }): Promise<void>;`
`13`	`12`	`connect(): Promise<IProvider \| null>;`
`14`	`13`	`}`