Skip to content

Quick Start: Flutter Apps

Already using Arcana Auth?

Arcana Auth SDK v1.0.7 -> v1.0.8: Follow the instructions in the Migration Guide and upgrade easily!

Arcana Auth SDK version < v1.0.7: Note that there may be breaking changes that require you to reconfigure your app and also update the integration code. For more information, see archives for Migration Guides and Release Notes.

Follow these steps to begin using the Arcana Auth product:

  1. Use the Arcana Developer Dashboard and register the app; obtain a unique Client ID.
  2. Set up social providers that will be enabled for onboarding app users.
  3. Install the SDK and integrate the app with the Arcana Auth Flutter SDK. Use the Client ID to create a new AuthProvider and use either the built-in plug-and-play login UI or custom UI to onboard users.
  4. Allow authenticated users to instantly access the Arcana wallet.
  5. Add code in the app for programmatically accessing Web3 wallet operations supported by the Arcana wallet.

uth Usage Overview Auth Usage Overview

Register & Configure

Before integrating an app with the Arcana Auth Flutter SDK, follow the instructions to register and then configure the app using the Arcana Developer Dashboard. As part of the app registration, a unique value, Client ID, is assigned to each app. This is required for integrating the app with the Arcana Auth Flutter SDK.

During app configuration, developers can enable configure one or more authentication providers to onboard app users.

Password-less Option

If the app is registered but none of the supported authentication providers are enabled and configured for user onboarding, then by default, only the passwordless login option is available.

Install Arcana Auth Flutter 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

Integrate App

Once installed, integrate the app with the Arcana Auth Flutter SDK, specify the unique client ID assigned to the registered app in the previous step when creating an AuthProvider.

import 'package:arcana_sdk/arcana_sdk.dart';

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

Once initialized, you can call the AuthProvider functions for onboarding users and signing blockchain transactions.

Onboard Users

Add code in the app to onboard users when a user chooses to log in using one of the configured social providers or via OTP.

Add Social Login

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

Login with OTP

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

Logout

Call the logout method in response to a user's choice to log out. Once a user is authenticated, the Arcana wallet can be displayed in the context of the Flutter app. The Arcana wallet UI also provides an option to log out via the profile tab.

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

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

auth.showWallet();
auth.hideWallet();

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

Flutter apps can use clearCache to clear the Webview cache:

auth.clearCache();

Flutter app developers can also enable any of the supported Web3 operations in the Arcana Auth SDK once the users have authenticated. These web operations such as 'send transaction' could trigger blockchain transactions. A transaction notification will be displayed requesting the user to approve or reject the request.

Sign Blockchain Transactions

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

Make an EIP-1193 Request

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

Get information for the logged-in user:

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

Initiate send transaction request:

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

Get the user account address:

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

After integrating the Flutter mobile app with the Arcana Auth Flutter SDK and adding code to onboard users via configured providers such as 'Google' and calling Web3 wallet operation requests, developers can deploy the app. Depending upon the environment selected during the Auth SDK initialization earlier, the app will be deployed on the Arcana Testnet or Mainnet.

Deploy App

An app integrated with the Arcana Auth Flutter SDK can be deployed for use only after the developer has completed these steps:

  • Register and configure the app via the Arcana Developer Dashboard
  • Integrate the app with the Arcana Auth Flutter SDK
  • Add code to onboard users
  • Add code to allow authenticated users to sign the blockchain transactions

Developers can choose to deploy one instance of the app (say, under active development) on the Arcana Testnet while simultaneously deploying a stable version of their app (say, one validated on Testnet and ready for users) on the Arcana Mainnet.

By default, when an app is registered, a 'Testnet' configuration profile is associated with the app, and a unique Client ID is assigned to this 'Testnet' profile. To deploy your app on the Arcana Mainnet, you need to create a corresponding 'Mainnet' configuration profile and update the Arcana Auth Flutter SDK integration code to use the new Client ID assigned to the app's 'Mainnet' configuration profile. For details on how to deploy your app on the Arcana Testnet / Mainnet, see App Deployment Guide.

Testnet > Mainnet

If you have deployed your Unity app on Arcana Testnet and are looking to migrate it on the Mainnet, see Testnet > Mainnet Migration Guide.

That is all!

The Flutter mobile app is now ready to onboard users. Once the user logs in, the Arcana wallet will be instantly accessible for Web3 wallet operations through the UI. Developers can also add code in the Flutter mobile app and call wallet functions programmatically via the supported Web3 operations listed above. When a user action or programmatically invoked wallet operation triggers a blockchain transaction, a transaction notification will pop up in the Flutter mobile app context, asking the user to review the transaction and accept or reject the blockchain request.

See also


Last update: August 21, 2023 by DocX, shaloo, shalz