How to enable Email and Social Login on your Web3 App for your users?

Learn how to use Reown AppKit to enable email and social login for your Web3 app, allowing users to connect their wallets and interact with the blockchain.

In this tutorial, you will learn how to:

  1. Set up Reown AppKit.
  2. Configure a wallet connection modal and enable interactions.
  3. Enable email and social login.

This guide takes approximately 10 minutes to complete.

Let’s get started!

Setting Up Wallet Interaction using AppKit

Using AppKit, you can enable wallet interactions for your Web3 app with just a few lines of code.

Below is an in-depth guide that will teach you how to set up wallet interactions using AppKit. Please ensure you complete the setup of AppKit before proceeding with the rest of this guide.

Enable Email and Social login

After setting up AppKit following the guide linked in the previous section, you should notice a connect button on your web app that allows users to connect their wallets.

The createAppKit function is configured so that email and social logins are enabled by default on the wallet connection modal. Therefore, developers do not need to take any extra steps to enable them.

However, if you want to choose whether to enable or disable these options, you can do so. Let’s look at how we can do this.

const modal = createAppKit({
  adapters: [wagmiAdapter], 
  projectId,
  networks: [mainnet, arbitrum],
  features: {
    email: true, // is set to true by default
    socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'] //  these social login methods are enabled by default
  }
})

So what's happening in the above code? Let's break it down step-by-step:All of AppKit’s additional features are configured inside the features object:

  1. Email – This parameter controls whether the connection modal will include an email login option. It is set to true by default, so developers don’t need to configure it explicitly. However, if you don't want the connection modal to include email login, you can set the email parameter to false.
  2. Socials – This parameter allows you to choose which social platform logins you want to enable for your users. For instance, if you only pass 'google', only Google login will be available. If you want to disable social login entirely, simply pass an empty array: socials: [].

The createAppKit() function creates and configures the wallet connection modal for your Web3 app.

Conclusion

And that’s it! You have now learned how to use AppKit to enable email and social login on your Web3 app for your users. If you are wondering how you can customize the AppKit or the wallet connection modal even further, please refer to the docs here.

What's Next?

If you're wondering how to use Reown for various use cases and build apps with great UX, feel free to check out our other blogs here.

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles