> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gelato.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedded Wallet Integrations

Embedded wallets enable users to interact with your dApp using familiar login methods like email, phone, or social accounts. Gelato Gasless SDK integrates seamlessly with popular embedded wallet providers.

## Quick Start

<Tabs>
  <Tab title="Dynamic">
    ### Installation

    ```bash theme={null}
    npm install @gelatocloud/gasless @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @tanstack/react-query wagmi viem
    ```

    ### Setup

    1. Create an app at [Dynamic Dashboard](https://app.dynamic.xyz/) and enable `Embedded Wallets`
    2. Get your Gelato API Key from [Gelato App](https://app.gelato.cloud/)

    ```bash theme={null}
    NEXT_PUBLIC_DYNAMIC_APP_ID=your_dynamic_environment_id
    NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
    ```

    ### Configure Providers

    ```typescript theme={null}
    import { DynamicContextProvider, useDynamicContext } from "@dynamic-labs/sdk-react-core";
    import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
    import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
    import { WagmiProvider, createConfig, http } from "wagmi";
    import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
    import { baseSepolia } from "viem/chains";

    const queryClient = new QueryClient();

    export default function Providers({ children }: { children: React.ReactNode }) {
      return (
        <DynamicContextProvider
          settings={{
            environmentId: process.env.NEXT_PUBLIC_DYNAMIC_APP_ID!,
            walletConnectors: [EthereumWalletConnectors],
          }}
        >
          <WagmiProvider config={createConfig({
            chains: [baseSepolia],
            transports: { [baseSepolia.id]: http() },
          })}>
            <QueryClientProvider client={queryClient}>
              <DynamicWagmiConnector>{children}</DynamicWagmiConnector>
            </QueryClientProvider>
          </WagmiProvider>
        </DynamicContextProvider>
      );
    }
    ```

    ### Create Gelato Bundler Client

    ```typescript theme={null}
    import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";
    import { isEthereumWallet } from "@dynamic-labs/ethereum";
    import { isDynamicWaasConnector } from "@dynamic-labs/wallet-connector-core";
    import { prepareAuthorization, SignAuthorizationReturnType } from "viem/actions";

    const { primaryWallet } = useDynamicContext();

    if (!primaryWallet || !isEthereumWallet(primaryWallet)) return;

    const connector = primaryWallet.connector;
    if (!connector || !isDynamicWaasConnector(connector)) return;

    const client = await primaryWallet.getWalletClient();

    client.account.signAuthorization = async (parameters) => {
      const preparedAuthorization = await prepareAuthorization(client, parameters);
      const signedAuthorization = await connector.signAuthorization(preparedAuthorization);

      return {
        address: preparedAuthorization.address,
        chainId: preparedAuthorization.chainId,
        nonce: preparedAuthorization.nonce,
        r: signedAuthorization.r,
        s: signedAuthorization.s,
        v: signedAuthorization.v,
        yParity: signedAuthorization.yParity,
      } as SignAuthorizationReturnType;
    };

    const account = toGelatoSmartAccount({
      client: client,
      owner: client.account,
    });

    const bundler = await createGelatoBundlerClient({
      account,
      apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
      client,
      pollingInterval: 100,
    });
    ```

    [Dynamic Docs](https://docs.dynamic.xyz/)
  </Tab>

  <Tab title="Privy">
    ### Installation

    ```bash theme={null}
    npm install @gelatocloud/gasless @privy-io/react-auth @privy-io/wagmi @tanstack/react-query viem
    ```

    ### Setup

    1. Create an app at [Privy Dashboard](https://dashboard.privy.io/) and enable `Embedded Wallets`
    2. Get your Gelato API Key from [Gelato App](https://app.gelato.cloud/)

    ```bash theme={null}
    NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id
    NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
    ```

    ### Configure Providers

    ```typescript theme={null}
    import { PrivyProvider, PrivyClientConfig } from "@privy-io/react-auth";
    import { WagmiProvider, createConfig } from "@privy-io/wagmi";
    import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
    import { http } from "viem";
    import { baseSepolia } from "viem/chains";

    const queryClient = new QueryClient();

    const wagmiConfig = createConfig({
      chains: [baseSepolia],
      transports: { [baseSepolia.id]: http() },
    });

    const privyConfig: PrivyClientConfig = {
      embeddedWallets: {
        createOnLogin: "users-without-wallets",
        requireUserPasswordOnCreate: false,
      },
      loginMethods: ["email"],
    };

    export const App = () => (
      <PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!} config={privyConfig}>
        <QueryClientProvider client={queryClient}>
          <WagmiProvider config={wagmiConfig} reconnectOnMount={false}>
            <YourApp />
          </WagmiProvider>
        </QueryClientProvider>
      </PrivyProvider>
    );
    ```

    ### Create Gelato Bundler Client

    ```typescript theme={null}
    import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";
    import { useWallets, useSign7702Authorization } from "@privy-io/react-auth";
    import { createWalletClient, custom, Hex } from "viem";
    import { prepareAuthorization, PrepareAuthorizationParameters } from "viem/actions";
    import { baseSepolia } from "viem/chains";

    const { wallets } = useWallets();
    const { signAuthorization } = useSign7702Authorization();

    const primaryWallet = wallets[0];
    const provider = await primaryWallet?.getEthereumProvider();

    const client = createWalletClient({
      account: primaryWallet.address as Hex,
      chain: baseSepolia,
      transport: custom(provider),
    });

    client.account.signAuthorization = async (parameters) => {
      const preparedAuthorization = await prepareAuthorization(client, parameters);
      return await signAuthorization({
        chainId: preparedAuthorization.chainId,
        contractAddress: preparedAuthorization.address,
        nonce: preparedAuthorization.nonce,
      });
    };

    const account = toGelatoSmartAccount({
      client: client,
      owner: client.account,
    });

    const bundler = await createGelatoBundlerClient({
      account,
      apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
      client,
      pollingInterval: 100,
    });
    ```

    [Privy Docs](https://docs.privy.io/)
  </Tab>

  <Tab title="Web3Auth">
    ### Installation

    ```bash theme={null}
    npm install @gelatocloud/gasless @web3auth/modal @web3auth/ethereum-provider viem
    ```

    ### Setup

    1. Create an app at [Web3Auth Dashboard](https://dashboard.web3auth.io/)
    2. Get your Gelato API Key from [Gelato App](https://app.gelato.cloud/)

    ```bash theme={null}
    NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=your_web3auth_client_id
    NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
    ```

    ### Initialize Web3Auth

    ```typescript theme={null}
    import { Web3Auth } from "@web3auth/modal";
    import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
    import { createWalletClient, custom } from "viem";
    import { baseSepolia } from "viem/chains";

    const chainConfig = {
      chainNamespace: "eip155",
      chainId: "0x14a34",
      rpcTarget: "https://sepolia.base.org",
      displayName: "Base Sepolia",
      ticker: "ETH",
      tickerName: "Ethereum",
    };

    const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

    const web3auth = new Web3Auth({
      clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!,
      web3AuthNetwork: "sapphire_devnet",
      privateKeyProvider,
    });

    await web3auth.initModal();
    const provider = await web3auth.connect();
    ```

    ### Create Gelato Bundler Client

    ```typescript theme={null}
    import { createGelatoBundlerClient } from "@gelatocloud/gasless";
    import { toKernelSmartAccount } from "permissionless/accounts";

    const client = createWalletClient({
      chain: baseSepolia,
      transport: custom(provider),
    });

    const account = await toKernelSmartAccount({
      client,
      version: "0.3.1",
      entryPoint: {
          address: entryPoint07Address,
          version: "0.7"
      },
      owners: [client],
    });

    const bundler = await createGelatoBundlerClient({
      account,
      apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
      client,
      pollingInterval: 100,
    });
    ```

    [Web3Auth Docs](https://web3auth.io/docs/)
  </Tab>

  <Tab title="Turnkey">
    ### Installation

    ```bash theme={null}
    npm install @gelatocloud/gasless @turnkey/sdk-browser @turnkey/viem viem
    ```

    ### Setup

    1. Create an organization at [Turnkey Dashboard](https://app.turnkey.com/)
    2. Get your Gelato API Key from [Gelato App](https://app.gelato.cloud/)

    ```bash theme={null}
    NEXT_PUBLIC_TURNKEY_ORG_ID=your_turnkey_org_id
    NEXT_PUBLIC_GELATO_API_KEY=your_gelato_api_key
    ```

    ### Initialize Turnkey

    ```typescript theme={null}
    import { Turnkey } from "@turnkey/sdk-browser";
    import { createAccount } from "@turnkey/viem";
    import { createWalletClient, http } from "viem";
    import { baseSepolia } from "viem/chains";

    const turnkey = new Turnkey({
      apiBaseUrl: "https://api.turnkey.com",
      defaultOrganizationId: process.env.NEXT_PUBLIC_TURNKEY_ORG_ID!,
    });

    const account = await createAccount({
      client: turnkey.apiClient(),
      organizationId: process.env.NEXT_PUBLIC_TURNKEY_ORG_ID!,
      signWith: walletAddress,
    });

    const client = createWalletClient({
      account,
      chain: baseSepolia,
      transport: http(),
    });
    ```

    ### Create Gelato Bundler Client

    ```typescript theme={null}
    import { createGelatoBundlerClient, toGelatoSmartAccount } from "@gelatocloud/gasless";

    const account = toGelatoSmartAccount({
      client: client,
      owner: client.account,
    });

    const bundler = await createGelatoBundlerClient({
      account,
      apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
      client,
      pollingInterval: 100,
    });
    ```

    [Turnkey Docs](https://docs.turnkey.com/)
  </Tab>
</Tabs>

## Execute Transactions

All providers support the same payment methods:

<Tabs>
  <Tab title="Sponsored">
    ```typescript theme={null}
    const nonce = await publicClient.getTransactionCount({
      address: primaryWallet.address as Hex,
    });

    const authorization = await client.signAuthorization({
      address: account.authorization.address,
      nonce,
    });

    const hash = await bundler.sendUserOperation({
      account,
      calls: [{ to: account.address, value: 0n, data: "0x" }],
      authorization,
    });
    ```
  </Tab>

  <Tab title="ERC-20">
    ```typescript theme={null}
    import { token } from "@gelatocloud/gasless";

    const nonce = await publicClient.getTransactionCount({
      address: primaryWallet.address as Hex,
    });

    const authorization = await client.signAuthorization({
      address: account.authorization.address,
      nonce,
    });

    const tokenAddress = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; // USDC (Base Sepolia)
    const hash = await bundler.sendUserOperation({
      account,
      calls: [{ to: account.address, value: 0n, data: "0x" }],
      authorization,
    });
    ```
  </Tab>

  <Tab title="Native">
    ```typescript theme={null}
    import { native } from "@gelatocloud/gasless";

    const nonce = await publicClient.getTransactionCount({
      address: primaryWallet.address as Hex,
    });

    const authorization = await client.signAuthorization({
      address: account.authorization.address,
      nonce,
    });

    const hash = await bundler.sendUserOperation({
      account,
      calls: [{ to: account.address, value: 0n, data: "0x" }],
      authorization,
    });
    ```
  </Tab>
</Tabs>

## Smart Account Types

All providers support multiple smart account types:

| Type     | Description                                                       |
| -------- | ----------------------------------------------------------------- |
| `gelato` | Gelato Smart Account (EIP-7702 optimized), Also supports ERC-4337 |
| `kernel` | Kernel Account (ERC-4337 + optional EIP-7702)                     |
| `safe`   | Safe Account (ERC-4337)                                           |

```typescript theme={null}
const account = toGelatoSmartAccount({
  client: client,
  owner: client.account,
});

const bundler = await createGelatoBundlerClient({
  account,
  apiKey: process.env.NEXT_PUBLIC_GELATO_API_KEY as string,
  client,
  pollingInterval: 100,
});
```

## Additional Resources

* [Supported Networks](/paymaster-&-bundler/additional-resources/supported-networks)
* [Smart Accounts](/paymaster-&-bundler/features/smart-accounts)
* [GitHub Examples](https://github.com/gelatodigital/gasless/tree/master/examples)