If using login providers like Privy, itβs best to use this signer product. Users wonβt see a double login and developers will get full write functionality to Farcaster.
Context
This guide covers setting up a full app with frontend and backend to start writing with a logged in user. You can pick and choose the right pieces from this guide as needed. Weβll go over:- Creating a signer key for the user so they can sign in
- Storing the userβs credentials in local storage
- Writing casts to Farcaster using the signer
The ideal user flow
Terminology To understand the ideal user flow, letβs quickly go over some terminology:- Authentication: This is where an account proves they are who they say they are. Flows like Sign in with Farcaster (SIWF) or login providers like Privy allow this for app logins.
- Authorization: this is where an account gives the app certain access privileges to take actions on behalf of the account. This is what Neynar signers allow for writing data to the protocol.
- SIWN: Connect Farcaster accounts
- or 3rd party login providers like Privy
- the 1st step on authentication happens on Privy login and the 2nd step of authorization happens on Neynar
- The second step requires the user to scan a QR code or tap on a link to then generate a signer on a Farcaster client like Warpcast
- Generating a signer requires paying onchain fees. Neynar sponsors signers by default so users pay $0.
Setting up a next.js app
Creating a next app
We are going to need a frontend as well as a backend server, so we are going to use Next.js for this guide. Run the following command to create a new next.js app:Configuring env variables
Firstly, letβs configure the env variables we will need. Create a new.env.local
file and add these two variables:
- The neynar api key should be the api key that you can view on your dashboard
- the mnemonic should be the mnemonic associated with the developer account which will be used to create the signers e.g.
@your_company_name
account on Farcaster (to state the obvious out loud, you wonβt need user mnemonics at any point)
Creating API route for generating the signature
Create a newroute.ts
file in the src/app/api/signer
folder and add the following:
utils/getSignedKey.ts
file and add the following:
appAccountKey.signKeyRequest
function from the @farcaster/hub-nodejs
package to create a sign key request. Finally, we use the registerSignedKey
function from the neynarClient to return the signedKey.
Letβs now initialise our neynarClient
in a new lib/neynarClient.ts
file like this:
getFid
in the signature generation, so letβs create a utils/getFid.ts
file and create that as well:
app/page.tsx
and add the following:

api/signer/route.ts
file letβs add a GET function as well to fetch the signer using the signer uuid like this:
page.tsx
file to fetch the signer and set it in local storage using some useEffects:
Allowing users to write casts
Letβs now use the signer that we get from the user to publish casts from within the app. Create a newapi/cast/route.ts
file and add the following:
publishCast
function to publish a cast using the signer uuid and the text which I am getting from the body of the request.
Head back to the page.tsx
file and add a handleCast
function to handle the creation of casts like this:
page.tsx
file should look similar to this: