# Web3Auth signer

[Web3Auth](https://web3auth.io/) 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.

* Refer to the [Web3Auth documentation site](https://web3auth.io/docs/index.html) for instructions on setting up an application with the Web3Auth.
* For a quick start, Web3Auth provides example starter projects, available [here](https://web3auth.io/docs/examples?product=Plug+and+Play\&sdk=Plug+and+Play+Web+Modal+SDK).

## 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`:

<pre class="language-typescript"><code class="lang-typescript">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,
<strong>});
</strong>
// 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);
  
</code></pre>

#### Use it with Connect 4337:

```typescript
import {
    createComethPaymasterClient,
    createSafeSmartAccount,
    createSmartAccountClient,
} from "@cometh/connect-sdk-4337";
import { type Hex, type PublicClient, createPublicClient, http } from "viem";
import { arbitrumSepolia } from "viem/chains";


const apiKey = process.env.COMETH_API_KEY;
const bundlerUrl = process.env.4337_BUNDLER_URL;
const paymasterUrl = process.env.NEXT_PUBLIC_4337_PAYMASTER_URL;

const publicClient = createPublicClient({
    chain: arbitrumSepolia,
    transport: http(),
    cacheTime: 60_000,
    batch: {
        multicall: { wait: 50 },
    },
}) as PublicClient;

const smartAccount = await createSafeSmartAccount({
    apiKey,
    signer,
    chain: arbitrumSepolia,
    publicClient,
    smartAccountAddress //if smart account already exists
 });
 
const walletAddress = smartAccount.address

const paymasterClient = await createComethPaymasterClient({
    transport: http(paymasterUrl),
    chain: arbitrumSepolia,
    publicClient,
});

const smartAccountClient = createSmartAccountClient({
    account: smartAccount,
    chain: arbitrumSepolia,
    bundlerTransport: http(bundlerUrl, {
        retryCount: 5,
        retryDelay: 1000,
        timeout: 20_000,
    }),
    paymaster: paymasterClient,
    userOperation: {
        estimateFeesPerGas: async () => {
            return await paymasterClient.getUserOperationGasPrice();
        },
    },
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cometh.io/advanced/other-signers-auth-providers/web3auth-signer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.