Get Started: Flutter Apps

'Flutter' Web3 apps can easily onboard users via social login by integrating with the Arcana Auth Flutter SDK!

Prerequisites

Flutter v3.15.0 or higher

1. Register & Configure

Log into the Arcana Developer Dashboard:

https://dashboard.arcana.network

In the Manage Apps dashboard screen, click the first card and create a new app entry to register app. Each app is assigned a unique Client ID at registration. The Client ID is required for integrating the app with the Arcana Auth SDK.

A default Testnet configuration profile is associated with the registered app. In the Manage Apps dashboard screen, select the registered app card and click 'Testnet' configuration settings. Choose Social Auth to configure user onboarding providers. Optionally enable gasless transactions in Arcana wallet to incentivize app users.

2. Install SDK

The Arcana Auth Flutter SDK is available at 'Pub.dev' as a Flutter plugin package called arcana_auth_flutter.

Add the following line to the dependencies section in your app's pubspec.yaml file:

pubspec.yaml

dependencies:
  flutter:       # Required for every Flutter project
    sdk: flutter # Required for every Flutter project
  flutter_localizations: # Required to enable localization
    sdk: flutter         # Required to enable localization
  arcana_auth_flutter: ^0.0.6 # Required for integrating with Arcana Auth SDK

Use latest Arcana Auth Flutter SDK

Use latest Arcana Auth Flutter SDK release v0.0.6 available at pub.dev.

3. Integrate

Once installed, integrate the app with the Arcana Auth Flutter SDK. Create an AuthProvider instance and specify the unique client ID assigned to the registered app.

import 'package:arcana_sdk/arcana_sdk.dart';

final auth = AuthProvider(clientId:"xar_xxxx_...");
auth.init(context: context);

Next, add code to onboard users and allow authenticated users to sign blockchain transactions using Arcana wallet.

Onboard Users

Add code to onboard users through one of the configured social login providers or via OTP login option.

Arcana JWT Token

Upon successful authentication, Arcana Auth SDK returns a unique JWT token to the app called the Arcana JWT Token. App developers can use this token to verify user login and subsequently generate another token for app use. Learn more about how to verify the Arcana JWT Token for apps deployed on Testnet and Mainnet.

LoginUser InfoWallet VisibilityCache

Social Login

auth.loginWithSocial("google").then((_) => {
// On login Success
}).catchError(...);

OTP Login

auth.loginWithOTP("${email_id}").then((_) => {
// On login Success
}).catchError(...);

Logout

Call the logout method in response to a user's choice to log out. The built-in Arcana wallet UI has a Logout option in the user profile tab.

auth.logout().then((_) => {
// On logout
});

Get User Address

auth.getAccount().then((account) => ...);

Get User Details

auth.getUserInfo().then((UserInfo info) => ...);

Show/Hide Wallet UI

Developers can choose to show or hide the wallet as per the app requirements.

auth.showWallet();

auth.hideWallet();

Check Wallet Visibility

To determine in the Flutter app if the Arcana wallet is visible in the app's context, get the visibility status:

var isVisible = auth.isVisible();

Clear Cache

Flutter apps can use clearCache to clear the Webview cache:

auth.clearCache();

Sign Transactions

The AuthProvider supports the JSON-RPC requests for the following Web3 operations:

EIP-1193 RequestSendTransaction

auth.request(method: "...", params: [...]).then(() => ...);

auth.sendTransaction({ to: "", value: "" }).then((hash) => ...);

4. Deploy

Finally, deploy the app on Testnet (default). For Mainnet deployment, see Testnet > Mainnet Migration Guide.

That's all!

The 'Flutter' mobile Web3 app is now powered by the Arcana Auth Flutter SDK to onboard users via social login and allow authenticated users to sign blockchain transactions using the Arcana wallet.