Neynar Documentation

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

Typescript

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;
}