connect & connectTo

Functions to connect users to Embedded Wallets in the browser.

Import

import { Web3Auth } from '@web3auth/modal'

Choosing the right connection method

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

• Use connect() when you want to display the default Embedded Wallets/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 (for example, social logins, wallets) 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

Basic Modal

info

This is the most common way to connect to Embedded Wallets. It opens the Embedded Wallets/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
await web3auth.connect()

const provider = web3auth.connection?.ethereumProvider ?? null

Custom UI

info

This method allows you to build your own custom connection UI. It bypasses the Embedded Wallets/Web3Auth modal UI, allowing you to create your own custom UI for login options. This can be useful if you want to hide Embedded Wallets from your end users.

import { WALLET_CONNECTORS, AUTH_CONNECTION } from '@web3auth/modal'

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

await web3auth.init()

// Connect directly to Google
await web3auth.connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.GOOGLE,
})

const provider = web3auth.connection?.ethereumProvider ?? null

Return types

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

Return values

• Connection | null: On successful sign-in, returns a Connection object with ethereumProvider, solanaWallet, and connectorName. On unsuccessful sign-in, returns null.
• For the EIP-1193 provider, use web3auth.connection?.ethereumProvider after connect() or connectTo().

tip

Read more about connecting your users with the selected blockchain in the JavaScript Ethereum integration guide.