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.

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

Once installed, you’re ready to begin configuring Particle Auth.

To start, you’ll need to retrieve three key values from the Particle dashboard: 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:

Access the Particle Dashboard

Sign up or Log in into the Particle dashboard

Create a new project or enter an existing project

Create a new iOS/Android application, or skip this step if you already have one

Retrieve the project ID, client key, and application ID

For more information on the Particle dashboard, take a look at the dashboard quickstart.

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).
• 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.

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.

    <?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>

<key>NSFaceIDUsageDescription</key>
  <string>We use Face ID for secure access to the app.</string>

// 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

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

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.

// 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();

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).

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