Web3Auth is a popular embedded wallet provider that supports social logins, making it easier for users to onboard without managing private keys. However, users still need to acquire crypto to pay for gas, which can create friction.
By integrating Web3Auth with Connect 4337, you can offer a seamless social login experience while leveraging Cometh Connect's smart wallets to sponsor gas fees, batch transactions, and more. This combination simplifies blockchain interactions and improves the UX of your dApp.
Setup
To use Web3Auth with Connect 4337, first create an application that integrates with Web3Auth.
For a quick start, Web3Auth provides example starter projects, available here.
Integration
After following the Web3Auth documentation, you will have access to a web3auth object as shown below that you can pass as an owner to createSafeSmartAccount:
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from "@web3auth/base"
import { Web3Auth } from "@web3auth/modal"
import type { EIP1193Provider } from "viem"
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"
import { providerToSmartAccountSigner } from "@cometh/connect-sdk-4337"
const rpcUrl = process.env.RPC_URL;
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x66eee", // Hex of 421614
rpcTarget: rpcUrl,
displayName: "Arbitrum Sepolia Testnet",
blockExplorerUrl: "https://sepolia.arbiscan.io/",
ticker: "AETH",
tickerName: "AETH",
logo: "https://cryptologos.cc/logos/arbitrum-arb-logo.png",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3Auth({
clientId,
uiConfig: {},
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
privateKeyProvider,
});
// Initialize for PnP Modal SDK
await web3auth.initModal();
// Trigger the login
await web3auth.connect();
// Get the Provider and EOA address (this will be the address of the signer) from Web3Auth
const web3authProvider = web3auth.provider as EIP1193Provider
if (!web3authProvider) {
throw new Error("No provider found")
}
const signer = await providerToSmartAccountSigner(web3authProvider);