> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neynar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Implementation - OLD

> Legacy React Native implementation guide for Sign in with Neynar (SIWN) integration in Farcaster apps

## How to integrate SIWN?

<Tip>
  ### Example integration

  Check out this sample application ([github](https://github.com/neynarxyz/farcaster-examples/tree/main/wownar-react-native)) that integrates Sign in with Neynar and allows users to cast.
</Tip>

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

Go to the [Neynar Developer Portal](https://dev.neynar.com) 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

<CodeGroup>
  ```typescript yarn theme={"system"}
  yarn add @neynar/react-native-signin
  ```

  ```typescript npm theme={"system"}
  npm install @neynar/react-native-signin
  ```
</CodeGroup>

### Step 2: Find `clientId` and `apiKey`

clientId -> [Neynar Developer Portal](https://dev.neynar.com), Settings tab. e.g. `00b75745-xxxx-xxxx-xxxx-xxxxxxxxxxxx`\\

apiKey -> [Neynar API Key](/docs/getting-started-with-neynar#api-key)

### Step 3: Add a button in your Signin screen

<CodeGroup>
  ```typescript Typescript theme={"system"}
  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;
  ```
</CodeGroup>

### And all set

### Appendix

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

```js theme={"system"}
interface ISuccessMessage {
    fid: string;
    is_authenticated: true;
    signer_uuid: string;
}
```