This is an example Next.js app to demonstrate how you can use Frames alongside Privy's Farcaster login feature to create novel, cross-app experiences for your users.
When a user first opens this app in their Farcaster client a few things happen. Behind the scenes, Privy automatically logs the user in with their Farcaster account, The client injexts the available wallet automatically (Warplet Wallet in Farcaster and Coinbase Wallet in TBA).
This app is built with NextJS, and makes uses of miniapp-sdk @farcaster/miniapp-sdk
Note: If you are looking to use Wagmi in your app, checkout Miniapp Starter with Wagmi for a complete implementation.
To see this demo in action, share https://privy-frames-v2-demo.vercel.app/ in any Farcaster client that supports Frames (e.g. Farcaster, TBA) and interact with it.
-
Configure a new Privy app with Farcaster login enabled.
-
Fork this repository, clone it, and open it in your command line:
git clone https://github.com/<your-github-handle>/privy-frames-v2-demo- Install the necessary dependencies using your preferred package manager:
npm i- Initialize your environment variables by copying the contents of
.env.example.localto a new.env.localfile, and fill in the required values. You'll need to set a base URL, and your Privy app ID.
NEXT_PUBLIC_URL=<insert-the-url-for-your-frame>
PRIVY_APP_ID=<insert-your-privy-app-id>That's it! To run the demo locally, execute npm run dev and open http://localhost:3000.
You can test this Frame using Farcaster Developer site to preview the miniapp. Please note that a localhost URL will not work with the developer Tools, so you should set up a public tunnel to your local app using a tool like ngrok or Cloudflare.
src/page.tsxto see how to use Privy to seamlessly login a user in a Farcaster frame