SIWN: React Native

In this guide, we'll take a look at how to add sign-in with neynar to a React native application!

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

  1. Navigate to server directory: Navigate to the server directory

    cd server
    
  2. Install Project Dependencies: Based on the package manager run one of the following commands to install all required dependencies:

    npm i
    
    yarn install
    
    pnpm i
    
    bun i
    
  3. 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

  1. Start the server:
npm run start
yarn start
pnpm run start
bun run start

Client

Open new terminal

  1. Navigate to server directory: Navigate to the client directory

    cd client
    
  2. 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
    
  3. 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.
  4. 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

  5. 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 sure what you built with us on Farcaster by tagging @neynar and if you have any questions, reach out to us on warpcast or Telegram!