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

# React Native Quickstart

# Quickstart: Implementing Particle Auth within applications built with React Native

Particle Auth, the primary SDK driving standalone social logins, has native support for React Native; integration only takes a few steps.

This document will go through the step-by-step process of configuring, initializing, and using Particle Auth with React Native.

<Note>
  For complete documentation covering the implementation of Particle Auth on React Native in more depth, head over to the [React Native SDK reference](/social-logins/auth/mobile-sdks/react).
</Note>

***

<Steps>
  <Step title="Installing Particle Auth">
    Getting started, you'll need to install `@particle-network/rn-auth-core` alongside `@particle-network/rn-base`.

    To do this, execute the command(s) below.

    ```shell Terminal theme={null}
    npm install @particle-network/rn-auth-core
    npm install @particle-network/rn-base

    // Or

    yarn add @particle-network/rn-auth-core
    yarn add @particle-network/rn-base
    ```
  </Step>

  <Step title="Configuring Particle Auth">
    Once installed, you're ready to begin configuring Particle Auth.

    To start, you'll need to retrieve three key values from the [Particle dashboard](https://dashboard.particle.network): your project ID, client key, and app ID. These are used to authenticate your instance of Particle Auth and connect your project to the dashboard;.

    To retrieve these keys, follow the steps outlined below:

    <AccordionGroup>
      <Accordion title="Access the Particle Dashboard">
        Sign up or Log in into the [Particle dashboard](https://dashboard.particle.network)

        <div className="flex justify-center">
          <img className="block h-64 dark:hidden" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/login.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=82a68a9e5fce546a26db56e74d7c3b94" alt="Login into Particle." width="458" height="453" data-path="social-logins/images/login.png" />

          <img className="hidden h-64 dark:block" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/login.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=82a68a9e5fce546a26db56e74d7c3b94" alt="Login into Particle." width="458" height="453" data-path="social-logins/images/login.png" />
        </div>
      </Accordion>

      <Accordion title="Create a new project or enter an existing project">
        <div className="flex justify-center">
          <img className="block h-64 dark:hidden" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/project.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=1b5cd03116f224e1cba3a88a04a1f0a5" alt="Create Particle project." width="939" height="657" data-path="social-logins/images/project.png" />

          <img className="hidden h-64 dark:block" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/project.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=1b5cd03116f224e1cba3a88a04a1f0a5" alt="Create Particle project." width="939" height="657" data-path="social-logins/images/project.png" />
        </div>
      </Accordion>

      <Accordion title="Create a new iOS/Android application, or skip this step if you already have one">
        <div className="flex justify-center">
          <img className="block h-64 dark:hidden" src="https://mintcdn.com/particlenetwork-fccf74d2/Y2qQyWSdsJpFBZYU/social-logins/images/ios-app.svg?fit=max&auto=format&n=Y2qQyWSdsJpFBZYU&q=85&s=8a7ab16a953807b947f43ad521113ccf" alt="Create iOS app." width="1158" height="740" data-path="social-logins/images/ios-app.svg" />

          <img className="hidden h-64 dark:block" src="https://mintcdn.com/particlenetwork-fccf74d2/Y2qQyWSdsJpFBZYU/social-logins/images/ios-app.svg?fit=max&auto=format&n=Y2qQyWSdsJpFBZYU&q=85&s=8a7ab16a953807b947f43ad521113ccf" alt="Create iOS app." width="1158" height="740" data-path="social-logins/images/ios-app.svg" />
        </div>
      </Accordion>

      <Accordion title="Retrieve the project ID, client key, and application ID">
        <div className="flex justify-center">
          <img className="block h-64 dark:hidden" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/credentials.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=c196b87c62dc17aae0f624035e3a2c19" alt="Find app's credentials." width="1039" height="800" data-path="social-logins/images/credentials.png" />

          <img className="hidden h-64 dark:block" src="https://mintcdn.com/particlenetwork-fccf74d2/hR-XK15Ve4E3bk8E/social-logins/images/credentials.png?fit=max&auto=format&n=hR-XK15Ve4E3bk8E&q=85&s=c196b87c62dc17aae0f624035e3a2c19" alt="Find app's credentials." width="1039" height="800" data-path="social-logins/images/credentials.png" />
        </div>
      </Accordion>
    </AccordionGroup>

    For more information on the Particle dashboard, take a look at the [dashboard quickstart](/social-logins/dashboard).

    ***

    ### Android

    If you're planning on using Android for your React Native application, ensure you meet the following prerequisites (otherwise, expect compatibility issues):

    #### Prerequisites

    * minSdkVersion **23** or higher.
    * compileSdkVersion, targetSdkVersion **34** or higher.
    * JavaVersion **17**.
    * [Jetpack (AndroidX)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * Android Gradle Plugin Version: **8.5.1** or higher.
    * Gradle Version: **8.9** or higher. (before react-native:0.75.2, use 8.8)

    Once you've made sure your project meets these requirements, you'll need to move on and define the aforementioned configuration values (your project ID, client key, and app ID) within your `build.grade` file (which is generally found at `${project name}/android/app/build.gradle`).

    Specifically, within `build.gradle`, you'll need to set four different values:

    1. `dataBinding`, this should be enabled with `enabled = true`.
    2. `manifestPlaceholders["PN_PROJECT_ID"]`, the project ID previously retrieved from the Particle dashboard.
    3. `manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]`, the client key previously retrieved from the Particle dashboard.
    4. `manifestPlaceholders["PN_APP_ID"]`, the app ID previously retrieved from the Particle dashboard.

    ```groovy build.gradle theme={null}
    android {
      ...
      defaultConfig {
          ......
          manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
          manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
          manifestPlaceholders["PN_APP_ID"] = "Your app ID"
      }

      dataBinding {
          enabled = true
      }

    }
    ```

    ***

    ### iOS

    Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, you'll need to ensure that your project meets the following requirements:

    * **Xcode 15.0** or later.

    * **iOS 14** or later.

    With these requirements set, you'll need to open an exported iOS project and navigate to `ios/{project name}.xcworkspace`.

    <Steps>
      <Step title="Configuring ParticleNetwork-Info.plist">
        At the root of your Xcode project, create a new file, `ParticleNetwork-Info.plist`. Ensure this is marked under "Target Membership."

        From here, with a fresh `ParticleNetwork-Info.plist` file, go ahead and fill it in with the previously retrieved project keys (from the [Particle dashboard](https://dashboard.particle.network)):

        ```xml ParticleNetwork-Info.plist theme={null}
            <?xml version="1.0" encoding="UTF-8"?>
            <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
            <plist version="1.0">
            <dict>
              <key>PROJECT_UUID</key>
              <string>YOUR_PROJECT_UUID</string>
              <key>PROJECT_CLIENT_KEY</key>
              <string>YOUR_PROJECT_CLIENT_KEY</string>
              <key>PROJECT_APP_UUID</key>
              <string>YOUR_PROJECT_APP_UUID</string>
            </dict>
            </plist>
        ```
      </Step>

      <Step title="Configuring Info.plist: Face ID">
        Additionally, to enable Face ID (privacy setting) to your app, head over to (or create) the `Info.plist` file and include the following snippet:

        ```xml Info.plist theme={null}
        <key>NSFaceIDUsageDescription</key>
          <string>We use Face ID for secure access to the app.</string>
        ```
      </Step>

      <Step title="Configuring your Podfile">
        Finally, you'll need to edit your Podfile to align with the snippet below; this is required for all iOS projects that leverage Particle Auth Core.

        ```ruby theme={null}

        // add ParticleAuthCore pods to your target
        pod "Thresh", '2.0.2'
        pod "ParticleMPCCore", '2.0.2'
        pod "ParticleAuthCore", '2.0.2'
        pod "AuthCoreAdapter", '2.0.2'

        pod 'ParticleNetworkBase', '2.0.2'
        pod 'ConnectCommon', '2.0.2'

        pod 'SwiftyUserDefaults', :git ='https://github.com/SunZhiC/SwiftyUserDefaults.git', :branch ='master'
        pod 'SkeletonView', :git ='https://github.com/SunZhiC/SkeletonView.git', :branch ='main'


        post_install do |installer|
        installer.pods_project.targets.each do |target|
          target.build_configurations.each do |config|
          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            end
          end
         end
        ```

        <Note>
          <p>Specific note for using Expo.</p>
          <p>If you're working with Expo, your Podfile needs additional editing to ensure compatibility with Particle Auth Core, as below:</p>

          <p />

          <p>You can reference this [Podfile](https://github.com/Particle-Network/particle-react-native/blob/master/Expo-Examples/new-expo-app/ios/Podfile).</p>

          <p>
            ```ruby theme={null}
            post_install do |installer|
              installer.pods_project.targets.each do |target|
                  if target.name == 'ParticleNetworkBase' or
                     target.name == 'ParticleNetworkChains' or
                     target.name == 'ParticleWalletAPI' or
                     target.name == 'ParticleWalletGUI' or
                     target.name == 'ParticleWalletConnect' or
                     target.name == 'ParticleAA' or
                     target.name == 'ParticleConnectKit' or
                     target.name == 'ParticleConnect' or
                     target.name == 'ConnectWalletConnectAdapter' or
                     target.name == 'ConnectSolanaAdapter' or
                     target.name == 'ConnectEVMAdapter' or
                     target.name == 'ConnectPhantomAdapter' or
                     target.name == 'ConnectCommon' or
                     target.name == 'WalletConnectSwiftV2' or
                     target.name == 'CryptoSwift' or
                     target.name == 'SwiftyUserDefaults' or
                     target.name == 'RxSwift' or
                     target.name == 'RxCocoa' or
                     target.name == 'RxRelay' or
                     target.name == 'SwiftyJSON' or
                     target.name == 'Base58.swift' or
                     target.name == 'JXPagingView' or
                     target.name == 'JXSegmentedView' or
                     target.name == 'Starscream' or
                     target.name == 'SwiftMessages' or
                     target.name == 'SkeletonView' or
                     target.name == 'GRDB.swift' or
                     target.name == 'SnapKit' or
                     target.name == 'BigInt' or
                     target.name == 'Alamofire' or
                     target.name == 'RxAlamofire' or
                     target.name == 'Then' or
                     target.name == 'Thresh' or
                     target.name == 'ParticleMPCCore' or
                     target.name == 'ParticleAuthCore' or
                     target.name == 'AuthCoreAdapter'

                     target.build_configurations.each do |config|
                          config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
                  end
                end
            end
            ```
          </p>
        </Note>
      </Step>
    </Steps>
  </Step>

  <Step title="Initializing Particle Auth">
    Having now installed and configured Particle Auth based on the platform you're using, you'll need to initialize the SDK.

    Particle Auth can be initialized by first setting your project ID and client key through defining `ParticleInfo.projectId` and `ParticleInfo.clientKey`.

    After doing so, simply call the `init` method on `particleBase`. This takes the following parameters:

    * `chainInfo`, representing the primary chain you intend to use (for example, `ChainInfo.Ethereum`, `chainInfo.Polygon`).
    * `env`, affecting the information logged within your environment (`Env.dev`, `Env.production`, or `Env.staging`).

    The snippet below is an example of this.

    ```typeScript theme={null}
    // Set your project info, retrieved from https://dashboard.particle.network.
    ParticleInfo.projectId = ''; // your project id
    ParticleInfo.clientKey = ''; // your client key

    // Inititilze particleBase and particleAuthCore.
    const chainInfo = Ethereum;
    const env = Env.Dev;
    particleBase.init(chainInfo, env);
    particleAuthCore.init();
    ```
  </Step>

  <Step title="Facilitating social login">
    You're ready to facilitate social login and interacting with the resulting account.

    As shown below, you'll need to call `particleAuthCore.connect` to initiate social login, passing in the specific login type you'd like the user to onboard through (`.Google`, `.Twitter`, `.Discord`, etc.) alongside, if applicable, the type of account prompt used by the OAuth provider (`.SelectAccount`, `.Consent`, `.None`).

    <Tip>When a user logs in for the first time, if there is no account, we will create one. Based on the current chainInfo, a new address will be generated. For example, if the current chain is EVM-compatible, only an EVM address will be generated; if it's the Solana chain, only a Solana address will be generated. If you want to obtain both addresses, you can use `ParticleAuthCore.switchChain` to switch chains, and after waiting for 2 seconds, a new address for the selected chain will be generated for you.</Tip>

    ```typeScript theme={null}
    const userInfo = await particleAuthCore.connect(LoginType.google, null, supportAuthTypes, SocialLoginPrompt.SelectAccount);

    // Additionally, you can implement custom authentication through JWT.
    // Learn more: https://developers.particle.network/guides/configuration/auth/jwt
    const userInfo = await particleAuthCore.connect(LoginType.JWT, jwt);
    ```
  </Step>
</Steps>

## Examples of Utilization

### Retrieve User Information

With a user logged in, you'll be able to retrieve information about their account (such as their address, or specific details regarding the social login mechanism they used) through methods such as `evm.getAddress` and `particleAuthCore.getUserInfo` (`getUserInfo` returns an object with numerous points of information; to learn more, head over to its [API reference](/social-logins/api/server/getuserinfo)).

The following snippet is an example of retrieving a user's address on both EVM and Solana alongside pulling their broader account information.

```typeScript theme={null}
const evmAddress = await evm.getAddress();
const solanaAddress = await solana.getAddress();

const isSuccess = await particleAuthCore.switchChain(Solana);
const userInfo = await particleAuthCore.getUserInfo();

// If you're using account abstraction through @particle-network/rn-aa, you'll need to retrieve their address through the following:
const smartAccountParam = {
    name: AccountName.BICONOMY_V2().name,
    version: AccountName.BICONOMY_V2().version,
    ownerAddress: eoaAddress,
};
const result: SmartAccountInfo[] = await EvmService.getSmartAccount([smartAccountParam]);
const smartAccountAddress = result[0]?.smartAccountAddress;
```

### Send a Transaction

Now, as a final example, you can send a transaction, such as burning 0.000000001 ETH.

To do this, you'll need to construct a transaction with `EvmService.createTransaction` using standard parameters such as `evmAddress` (the sender), `data`, `value`, and `receiverAddress`,

Upon construction, the transaction can be sent through `evm.sendTransaction`; once the user signs/confirms, it'll be pushed to the network; an example of this is shown below.

```typeScript theme={null}
const evmAddress = await evm.getAddress();
const receiverAddress = "0x0000000000000000000000000000000000000000";
const value = BigNumber(0.000000001 * Math.pow(10, 18));
const data = "0x";

const transaction = EvmService.createTransaction(evmAddress, data, value, receiverAddress);
const txHash = await evm.sendTransaction(transaction);
```

<Tip>Take a look at the complete demo project [here](https://github.com/Particle-Network/particle-react-native/tree/master/particle-auth-core/example).</Tip>