Skip to main content

connect & connectTo

Functions to connect users to Web3Auth in the browser.

Import​

import { Web3Auth } from "@web3auth/modal";

Choosing the Right Connection Method​

You can connect users to Web3Auth in two main ways, depending on your application's needs:

  • Use connect() when you want to display the default Web3Auth modal. This is ideal if you want to provide users with a pre-built, user-friendly interface where they can choose from all available login options (social logins, wallets, etc.) with minimal setup.

  • Use connectTo(connector, params) when you want to build a fully custom login experience. This method lets you bypass the Web3Auth modal and connect directly to a specific wallet connector (such as Google, Facebook, or a particular wallet). Choose this if you want to design your own UI for login options, or if you want to restrict users to a specific authentication method. This method also allows you to use JWT based login configurations.

Summary:

  • Use connect() for the standard modal experience.
  • Use connectTo() for custom UIs or direct connection to a specific login method.

Usage​

info

This is the most common way to connect to Web3Auth. It opens the Web3Auth modal UI, allowing users to select from available login options.

// Initialize Web3Auth first
const web3auth = new Web3Auth({
  // Your configuration options
});

await web3auth.init();

// Show the modal and connect
const provider = await web3auth.connect();

Return Types​

connect(): Promise<IProvider | null>;
connectTo<T extends WALLET_CONNECTOR_TYPE>(connector: T, params?: LoginParamMap[T]): Promise<IProvider | null>;

Return Values​

  • IProvider | null
    • On successful login, returns an IProvider instance containing the respective provider corresponding to your selected blockchain.
    • On unsuccessful login, returns null.
tip

Read more about connecting your users with the selected blockchain in the Providers SDK Reference.