Email & Socials

To allow users to authenticate using their email or social accounts, you need to configure the features parameter in the createAppKit function.

Wagmi

const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata,
  features: {
    email: true, // default to true
    socials: [
      "google",
      "x",
      "github",
      "discord",
      "apple",
      "facebook",
      "farcaster",
    ],
    emailShowWallets: true, // default to true
  },
  allWallets: "SHOW", // default to SHOW
});

Options

• email [boolean] : This boolean defines whether you want to enable email login. Default true
• socials [array] : This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. The default value of undefined displays everything. Set it to false to disable this feature. You can also pass an empty array to disable it.
• emailShowWallets [boolean] : This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and socials are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default true

User flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to verify the user’s authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and email login.

2. Eventually the user can optionally choose to move from a non-custodial wallet to a self-custodial one by pressing “Upgrade Wallet” on AppKit. This will open the (WalletConnect secure website) that will walk your user through the upgrading process.

UI Variants

AppKit SDK offers multiple UI variants to customize the user experience for the authentication process.

By configuring the emailShowWallets option in the features parameter, you can control the initial connect screen behavior:

• emailShowWallets: true: When this option is enabled, the initial connect screen will display the available wallet options directly to the user. This allows users to choose their preferred wallet immediately.

• emailShowWallets: false: If this option is disabled, the initial connect screen will show a button instead. When the user clicks this button, they will be directed to a new screen that lists all the available wallet options. This can help simplify the initial interface and reduce visual clutter.

By configuring the socials option in the features parameter, you can control the amount of social providers you want to show on the connect screen:

• socials: ['google']: When you only set one social provider, it will give you a button with `connect with provider.

• socials: ['google', 'discord']: When you set 2 social provider, it will give you 2 buttons next to each other with the logo of the social provider

• socials: ['google', 'x', 'discord', 'apple', 'github']: When you set more than 2 social providers, the first provider in the array will get a button with connect with provider. The other providers will get a button with the logo of the social provider next to each other.

• socials: [] or socials: false: When you want to disable social logins.

• email: false: When you want to disable email login.

By configuring the allWallets option inside the createAppKit function, you can control whether if and when you want to display all wallets.

• allWallets: 'HIDE': When you do not want to display all wallets.

• allWallets: 'SHOW': When you want to display all wallets.

• allWallets: 'ONLY_MOBILE': When you want to display all wallets only on a mobile device.

Nuxt-specific considerations

When implementing social authentication in Nuxt, make sure to handle the authentication flow within <client-only> components to avoid SSR issues:

<script setup lang="ts">
import { useAppKitAccount } from '@reown/appkit/vue'

const { isConnected } = useAppKitAccount()
</script>

<template>
  <client-only>
    <div v-if="isConnected">
      <p>Connected via social login!</p>
    </div>
    <appkit-button v-else />
  </client-only>
</template>