Quickstart: Implementing Particle Auth within applications built with Flutter

Particle Auth is the standard SDK used for standalone social logins, allowing for 2-click onboarding using Google, X, email, and so on. Flutter is one of numerous platforms supported by Particle Auth and will be covered here.

Specifically, this document will go through the step-by-step process of configuring, initializing, and using Particle Auth with Flutter.

For complete documentation covering the implementation of Particle Auth with Flutter in more depth, head over to the Flutter SDK reference.


1

Installing Particle Auth

To begin, you’ll need to add and install Particle Auth’s primary SDK, particle_auth_core, to your Flutter application; this is a requirement before moving onto platform-specific configuration.

This can be done through the following command.

Terminal
flutter pub add particle_auth_core
2

Configuring Particle Auth

Once installed, you’re ready to configure Particle Auth and initialize the SDK.

To do this, you’ll need 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; these are required to properly initialize the SDK.

Retrieving these keys can be done through the following steps.

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


Android

Prerequisites

When using Particle Auth’s Flutter SDK on Android, you’ll need to ensure your project meets a few different requirements (otherwise, you’ll likely run into compatibility issues); these are listed below.

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

Configuring build.gradle

To begin configuring your project, you’ll need to go ahead and open your build.gradle file, often found at the following file path: ${project name}/android/app/build.gradle.

Within your build.gradle file, you’ll need to add four new lines to ensure Particle Auth runs appropriately:

  1. minSdkVersion, which in most cases will be set to 23.
  2. manifestPlaceholders["PN_PROJECT_ID"], the projectId previously retrieved from the Particle dashboard.
  3. manifestPlaceholders["PN_PROJECT_CLIENT_KEY"], the clientKey previously retrieved from the Particle dashboard.
  4. manifestPlaceholders["PN_APP_ID"], the appId previously retrieved from the Particle dashboard.

Below is an example of how this may look.

build.gradle
// Example
defaultConfig {
  applicationId "com.example.particle_auth_test"

  minSdkVersion 23 // Required by Particle Auth
  targetSdkVersion flutter.targetSdkVersion
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName

  manifestPlaceholders["PN_PROJECT_ID"] = "YOUR PROJECT ID"
  manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "YOUR CLIENT KEY"
  manifestPlaceholders["PN_APP_ID"] = "YOUR APP ID"
}

Staying within your build.gradle file, you’ll need to ensure that you’re using version 17 of Java in both compileOptions and kotlinOptions, alongside enabling dataBinding, as shown below.

build.gradle
// Example
compileOptions {
  sourceCompatibility JavaVersion.VERSION_17
  targetCompatibility JavaVersion.VERSION_17
}

kotlinOptions {
  jvmTarget = JavaVersion.VERSION_17.toString()
}

dataBinding {
  enabled = true
}

Finally, for dependency management, within build.gradle you’ll need to ensure that the repositories object in both buildscript and allprojects has maven { setUrl("https://jitpack.io") } present, such as is shown in the following snippet.

build.gradle
// Example
buildscript {
  ...
  repositories {
      google()
      mavenCentral()
      maven { setUrl("https://jitpack.io") }  // Add this
  }

  dependencies {
      ...
  }
}


allprojects {
  repositories {
      google()
      mavenCentral()
      maven { setUrl("https://jitpack.io") }  // Add this
  }
}

...


iOS

Alternatively, if you’re building an iOS application with Flutter, this entails a unique and iOS-specific configuration process, as will be covered in this section.

Prerequisites

Before beginning, ensure your project meets the following prerequisites:

  • 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 apps/{project name}.xcworkspace.

1

Configure ParticleNetwork-Info.plist

At the root of your Xcode project, create a new file, ParticleNetwork-Info.plist. Ensure this is marked under Target Membership.

Now, with a fresh ParticleNetwork-Info.plist file, go ahead and fill it in with the following values, previously retrieved from the Particle dashboard:

ParticleNetwork-Info.plist
    <?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> <!-- Replace this with your project ID -->
      <key>PROJECT_CLIENT_KEY</key>
      <string>YOUR_PROJECT_CLIENT_KEY</string> <!-- Replace this with your client key -->
      <key>PROJECT_APP_UUID</key>
      <string>YOUR_PROJECT_APP_UUID</string> <!-- Replace this with your app ID -->
    </dict>
    </plist>
2

Configuring Info.plist: Face ID

Furthermore, to enable Face ID for your app, add a usage description to your Info.plist file by including the following code:

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

Configuring your Podfile

Finally, you’ll need to edit your Podfile to ensure particle_auth_core is properly imported. Head over to the linked example to complete this, if you haven’t already.

Another important note before continuing.

Our SDK is a static library (XCFramework). When using the Particle Auth Flutter SDK, you’ll need to specify that you’re using a static framework through the snippet below.

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
3

Initializing Particle Auth

At this point, you’ve installed and configured Particle Auth; the only step remaining before the SDK can be used is initialization.

Particle Auth can be initialized by simply setting your project ID and client key (previously retrieved from the Particle dashboard) through ParticleInfo.set. An example of this has been included in the snippet below.

Upon setting these values, you’ll need to 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).
// Set the project info, get it from https://dashboard.particle.network.
ParticleInfo.set(projectId, clientKey);
// Initialize ParticleAuth and ParticleAuthCore.
ParticleBase.init(ChainInfo.Ethereum, env);
ParticleAuthCore.init()
4

Facilitating social login

You’re now ready to facilitate social login and interacting with the resulting accounts.

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 (.select_account, .consent, .none).

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.
final userInfo = await ParticleAuthCore.connect(LoginType.google,
          prompt: SocialLoginPrompt.select_account);

// Additionally, you can implement custom authentication through JWT.
// Learn more: https://developers.particle.network/guides/configuration/auth/jwt
final userInfo = await ParticleAuthCore.connect(LoginType.jwt,
          account: "the JWT");

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

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

final evmAddress = await Evm.getAddress();
final solanaAddress = await Solana.getAddress();

bool isSuccess = await ParticleAuthCore.switchChain(ChainInfo.Solana);
final userInfo = await ParticleAuthCore.getUserInfo();

// If you're using account abstraction through particle_aa, you'll need to retrieve their address through the following:
final accountName = AccountName.BICONOMY_V2();
final smartAccountConfig =
          SmartAccountConfig.fromAccountName(accountName, eoaAddress);
List<dynamic> response = await EvmService.getSmartAccount(
    <SmartAccountConfig>[smartAccountConfig]);
final smartAccountAddress = (response[0] as Map<String, dynamic>)["smartAccountAddress"]
    as String;

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

final evmAddress = await Evm.getAddress();
const receiverAddress = "0x0000000000000000000000000000000000000000";
final value = BigInt.from(0.000000001 * pow(10, 18));
const data = "0x";

final transaction = await EvmService.createTransaction(evmAddress, data, value, receiverAddress);
String txHash = await Evm.sendTransaction(transaction);
Take a look at the complete demo project here.