Neynar Documentation

Setting up your application

Prerequisites

Node.js: A JavaScript runtime built on Chrome’s V8 JavaScript engine. Ensure you have Node.js installed on your system.
Expo Go: Install Expo Go on your phone

Cloning the repo

Clone the repo from GitHub using the following command and open it up in your favourite code editor using the following commands:

npx degit https://github.com/neynarxyz/farcaster-examples/tree/main/wownar-react-native react-native-siwn
cd react-native-siwn

Once you’ve cloned your repo we can start installing the packages and setting up the env variables!

Server

Navigate to server directory

Navigate to the server directory

cd server

Install Project Dependencies

Based on the package manager run one of the following commands to install all required dependencies:

npm

npm i

yarn

yarn install

pnpm

pnpm i

bun

bun i

Configure Environment Variables

Copy the example environment file:

cp .env.example .env

Edit .env to add your NEYNAR_API_KEY and NEYNAR_CLIENT_ID. You can find them in your dashboard

Start the server

Start the server:

npm

npm run start

yarn

yarn start

pnpm

pnpm run start

bun

bun run start

Client

Open new terminal

Navigate to client directory

Navigate to the client directory

cd client

Install Project Dependencies

Based on the package manager run one of the following commands to install all required dependencies:

For yarn

yarn install

For npm

npm install

Configure Environment Variables

Copy the example environment file:

cp .env.example .env

Edit .env to add your COMPUTER_IP_ADDRESS. Refer find-IP-address article to get the IP address of your Computer.

Start the app

Make sure your phone and computer is connected to the same network

For yarn

yarn start

For npm

npm run start

you’ll see a QR Code

Run App

Open the Expo Go app on your phone and scan the QR Code. You should now be able to see a button to sign in with neynar in your app!

How does it work?

You’re probably wondering how it all works, so let’s break it down!

Server

In our server, we have 3 API routes, you can take a look at them in server/index.js:

/get-auth-url (GET): This API route gets the authorization URL using the fetchAuthorizationUrl function from the neynar client.
/user (GET): This API route takes in the fid as a query parameter and returns the user data like display name and pfp url using the fetchBulkUsers function.
/cast (POST): This API route takes in the signer UUID and text in the body and publishes the cast on behalf of the user using the publishCast function.

Client

On the client side, we use the NeynarSigninButton component from the @neynar/react-native-signin package and pass in a bunch of props like fetchAuthorizationUrl, successCallback, errorCallback, and redirectUrl.

For fetchAuthorizationUrl we fetch the url from our server and then pass it.
For successCallback we are creating a function Context/AppContext.ts that fetches the user info from the backend and safely stores it.
For errorCallBack we simply just console log the error.
For redirectURL we are using a URL of the format exp://${COMPUTER_IP_ADDRESS}:8081. The COMPUTER_IP_ADDRESS is the one you added in your .env file
There are also a lot of customisation options that you can find commented out in the Signin.tsx file.

Conclusion

This guide taught us how to add sign-in with neynar to a React native app, check out the GitHub repository. Lastly, make sure to share what you built with us on Farcaster by tagging @neynar and if you have any questions, reach out to us on warpcast or Slack!