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

# Flutter Quickstart

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

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

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

***

<Steps>
  <Step title="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.

    ```shell Terminal theme={null}
    flutter pub add particle_auth_core
    ```
  </Step>

  <Step title="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](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; these are required to properly initialize the SDK.

    Retrieving these keys can be done through the following steps.

    <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

    #### 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)](https://developer.android.com/jetpack/androidx/migrate?authuser=0).
    * 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.

    ```groovy build.gradle theme={null}
    // 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.

    ```groovy build.gradle theme={null}
    // 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.

    ```groovy build.gradle theme={null}
    // 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`.

    <Steps>
      <Step title="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](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> <!-- 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>
        ```
      </Step>

      <Step title="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:

        ```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 ensure `particle_auth_core` is properly imported. Head over to the [linked example](https://github.com/Particle-Network/particle-flutter/blob/master/particle-auth-core/example/ios/Podfile) to complete this, if you haven't already.
      </Step>
    </Steps>

    <Note>
      <p>Another important note before continuing.</p>
      <p>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.</p>

      ```ruby theme={null}
      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>
  </Step>

  <Step title="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`).

    ```dart theme={null}
    // 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()
    ```
  </Step>

  <Step title="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`).

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

    ```dart theme={null}
    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/social-logins/configuration/auth/jwt
    final userInfo = await ParticleAuthCore.connect(LoginType.jwt,
              account: "the 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.

```dart theme={null}
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.

```dart theme={null}
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);
```

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