In this guide, we’ll take a look at how to add sign-in with neynar to a React native application!
Navigate to server directory
Install Project Dependencies
Configure Environment Variables
.env
to add your NEYNAR_API_KEY
and NEYNAR_CLIENT_ID
. You can find them in your dashboardStart the server
Navigate to client directory
Install Project Dependencies
Configure Environment Variables
.env
to add your COMPUTER_IP_ADDRESS
. Refer find-IP-address article to get the IP address of your Computer.Start the app
Run App
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.NeynarSigninButton
component from the @neynar/react-native-signin
package and pass in a bunch of props like fetchAuthorizationUrl
, successCallback
, errorCallback
, and redirectUrl
.
fetchAuthorizationUrl
we fetch the url from our server and then pass it.successCallback
we are creating a function Context/AppContext.ts
that fetches the user info from the backend and safely stores it.errorCallBack
we simply just console log the error.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
fileSignin.tsx
file.