Email Login

Web3Modal SDK enables passwordless Web3 onboarding (no seed phrases) and authentication. It offers blazing-fast, hardware-secured, passwordless login, Web3 onboarding, and access to over 20 blockchains with a few lines of code — even if you have an existing auth solution.

caution

Email Login is currently in alpha and it's not recommended for production apps.

Wagmi v2

You can start integrating Email Login into Web3Modal SDK using either default or custom mode.

Default

<script setup>
  import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue'
  import { mainnet, arbitrum } from 'viem/chains'

  // 1. Get projectId at https://cloud.walletconnect.com
  const projectId = 'YOUR_PROJECT_ID'

  // 2. Create wagmiConfig
  const metadata = {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
  }

  const chains = [mainnet, arbitrum]
  const wagmiConfig = defaultWagmiConfig({
    chains, // required
    projectId, // required
    metadata, // required
    enableWalletConnect: true, // Optional - true by default
    enableInjected: true, // Optional - true by default
    enableEIP6963: true, // Optional - true by default
    enableCoinbase: true, // Optional - true by default
    enableEmail: true // Optional - false by default
  })

  // 3. Create modal
  createWeb3Modal({ wagmiConfig, projectId, chains })
</script>

<template> // Rest of your app ... </template>

Custom

<script setup lang="ts">
  import { createWeb3Modal } from '@web3modal/wagmi/vue'
  import { emailConnector } from '@web3modal/wagmi'

  import { http, createConfig } from '@wagmi/core'
  import { mainnet, sepolia } from '@wagmi/core/chains'
  import { coinbaseWallet, walletConnect, injected } from '@wagmi/connectors'

  // 1. Define constants
  const projectId = 'YOUR_PROJECT_ID'

  const metadata = {
    name: 'Web3Modal',
    description: 'Web3Modal Example',
    url: 'https://web3modal.com',
    icons: ['https://avatars.githubusercontent.com/u/37784886']
  }

  const wagmiConfig = createConfig({
    chains: [mainnet, sepolia],
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http()
    },
    connectors: [
      walletConnect({ projectId, metadata, showQrModal: false }),
      injected({ shimDisconnect: true }),
      coinbaseWallet({
        appName: metadata.name,
        appLogoUrl: metadata.icons[0]
      }),
      emailConnector({ chains, options: { projectId } })
    ]
  })

  // 3. Create modal
  createWeb3Modal({ wagmiConfig, projectId, chains })
</script>

<template> // Rest of your app ... </template>

Ethers

You can start integrating Email Login into Web3Modal SDK using either default or custom mode.

Default

<script setup>
  import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/vue'

  // 1. Get projectId at https://cloud.walletconnect.com
  const projectId = 'YOUR_PROJECT_ID'

  // 2. Set chains
  const mainnet = {
    chainId: 1,
    name: 'Ethereum',
    currency: 'ETH',
    explorerUrl: 'https://etherscan.io',
    rpcUrl: 'https://cloudflare-eth.com'
  }

  // 3. Create modal
  const metadata = {
    name: 'My Website',
    description: 'My Website description',
    url: 'https://mywebsite.com',
    icons: ['https://avatars.mywebsite.com/']
  }

  createWeb3Modal({
    ethersConfig:
    ethersConfig: defaultConfig({
      metadata,
      enableEmail: true
    }),
    chains: [mainnet],
    projectId
  })
</script>

<template> // Rest of your app ... </template>

Custom

<script setup lang="ts">
  import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/vue'

  // 1. Get projectId at https://cloud.walletconnect.com
  const projectId = 'YOUR_PROJECT_ID'

  // 2. Set chains
  const mainnet = {
    chainId: 1,
    name: 'Ethereum',
    currency: 'ETH',
    explorerUrl: 'https://etherscan.io',
    rpcUrl: 'https://cloudflare-eth.com'
  }

  // 3. Create modal
  const metadata = {
    name: 'My Website',
    description: 'My Website description',
    url: 'https://mywebsite.com',
    icons: ['https://avatars.mywebsite.com/']
  }

  createWeb3Modal({
    ethersConfig: defaultConfig({
      metadata,
      defaultChainId: 1,
      enableEIP6963: true,
      enableInjected: true,
      enableCoinbase: true,
      enableEmail: true,
      rpcUrl: '...' // used for the Coinbase SDK
    }),
    chains: [mainnet],
    projectId
  })
</script>

<template> // Rest of your app ... </template>