Connect 700+ Wallets and Socials in Your Farcaster Mini Apps Using Reown AppKit

If you are building Farcaster Mini Apps, Reown Appkit provides the perfect out of the box interface for you to enable your users to connect 500+ self-custodial wallets, Farcaster wallet or create their first wallet using Email or Social login.

By integrating Reown Appkit into your Farcaster Mini Apps, you will get the following features out of the box:

  • Email & Social Login
  • Sign in with Farcaster wallet
  • Sign in with 500+ wallets
  • Swaps
  • Onramp
  • Transaction History
  • Network Switching

In this tutorial, you will learn how to:

  1. Build a simple Farcaster Mini App with wallet connections enabled.
  2. Integrate Reown AppKit into your Farcaster Mini App.
  3. Enable Email and Social logins for your Farcaster Mini App.

This guide takes approximately 10 minutes to complete. Let’s get started!

Obtain a Project Id and Set up Reown AppKit

First, you need to create a project and obtain a projectId from Reown Cloud Dashboard. You will need this later to configure Reown AppKit.

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.

Build a Simple Farcaster Mini App

Assuming that you are building Farcaster Mini Apps using React or Next, you need to ensure that you have Farcaster’s Frame SDK installed.

If you haven’t done this, please install it by running the command below.

npm install @farcaster/frame-sdk

In order for your Farcaster Mini App to function and load as expected, you need to use the sdk.actions.ready() function as shown below. This prevents showing a blank or incomplete UI by keeping the branded splash screen visible until everything’s fully loaded.

Please ensure that you have set up and integrated Reown AppKit in your <App /> component using the guide linked above.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { sdk } from '@farcaster/frame-sdk'

// Initialize Farcaster Mini App
sdk.actions.ready()
  .catch((error: unknown) => console.error('Failed to initialize Farcaster Mini App:', error))

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

You can also clone this example repository below that has the above code configured with AppKit.

https://github.com/rohit-710/appkit-farcaster-mini-app

Enable Email and Social Logins for your Farcaster Mini App

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

The createAppKit function is configured in such a way 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.

Additionally, Farcaster Mini Apps that are using Reown AppKit and providing social logins must add the mini app’s domain and https://farcaster.xyz as the allowed domains for their projectId on the Reown Dashboard.

After you have completed all of the steps listed above, you can proceed with testing your Farcaster Mini App.

Testing your Farcaster Mini App

In order to test your Farcaster Mini App to ensure that everything works as expected, please navigate here: https://farcaster.xyz/~/developers/mini-apps/preview

Enter your Farcaster Mini App’s URL in the text box and click on “Open URL as Mini App” and you will be able to see a preview of what your Farcaster Mini App will look like.

You can now test out all the interactions, and if everything works as expected, you can go ahead and publish your Farcaster Mini App.

Conclusion

And that’s it! You have now learned how to build a simple Farcaster Mini App using Reown AppKit to enable wallet connections from 500+ wallets, email, and social logins.

Reown AppKit is a powerful solution for developers looking to integrate wallet connections and other Web3 functionalities into their apps on any EVM and non-EVM chain. In just a few simple steps, you can provide your users with seamless wallet access, one-click authentication, social logins, and notifications, streamlining their experience while enabling advanced features like on-ramp functionality and smart accounts. By following this guide, you'll quickly get up and running with Reown’s AppKit, enhancing your app’s user experience and interaction with blockchain technology.

You can view the complete code repository below.

https://github.com/rohit-710/appkit-farcaster-mini-app

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 below.

https://reown.com/blog

Need help?

For support, please join the official Reown Discord Server.

Related articles

More articles