React Native Implementation

How to integrate SIWN?

💡

Example integration

Check out this sample application (github) that integrates Sign in with Neynar and allows users to cast.

Step 0: Set up your app in the Neynar developer portal

Go to the Neynar Developer Portal settings tab and update the following

  1. Name - Displayed to the user in Step 3.
  2. Logo URL - Displayed to the user in Step 3. Use a PNG or SVG format.

Step 1: Install the package

yarn add @neynar/react-native-signin
npm install @neynar/react-native-signin

Step 2: Find clientId and apiKey

clientId -> Neynar Developer Portal, Settings tab. e.g. 00b75745-xxxx-xxxx-xxxx-xxxxxxxxxxxx\

apiKey -> Neynar API Key

Step 3: Add a button in your Signin screen

import {NeynarSigninButton, ISuccessMessage} from "@neynar/react-native-signin";

const NEYNAR_API_KEY = '';
const NEYNAR_CLIENT_ID = '';

const SigninScreen = () => {
    const handleSignin = async (data: ISuccessMessage) => {
        console.log(`User with fid -> ${data.fid} can use signer -> ${data.signer_uuid} to interact with farcaster`)
    };

    const handleError = (err) => {
        console.log(err)
    }

    return (<NeynarSigninButton apiKey={NEYNAR_API_KEY}
        clientId={NEYNAR_CLIENT_ID}
        successCallback={handleSignin}
        errorCallback={handleError}/>);
};
export default SigninScreen;

And all set 🥳


Appendix

interface ISuccessMessage is exported from @neynar/react-native-signin which looks like this

interface ISuccessMessage {
    fid: string;
    is_authenticated: true;
    signer_uuid: string;
}