Skip to content

Get Started: Flutter Apps

Already using Arcana Auth Flutter SDK?

Make sure you are using the latest release v0.0.6 available at pub.dev.

Overview

These are the high-level steps to get started with the Arcana Auth product:

  1. Register your app using the Arcana Developer Dashboard and get a unique Client ID assigned to it. This Client ID will be required later during app integration. Configure social providers for authenticating users, select the built-in Arcana wallet UI or build a custom wallet UI.
  2. Install and integrate the Arcana Auth SDK. Create a new AuthProvider using Client ID and choose either the built-in login UI or custom login UI for onboarding users.
  3. Implement programmatic access to Arcana wallet operations in your app as per the business logic. Authenticated users can instantly access the Arcana wallet UI or a custom wallet UI as configured by the developer during app registration.
  4. Deploy your app on the Testnet for validation. Next, migrate app deployment from Testnet to the Mainnet by replicating the Testnet configuration profile or choosing a different configuration for the Mainnet deployment.

uth Usage Overview Auth Usage Overview

Steps

Step 1: Register & Configure

Before integrating an app with the Arcana Auth Flutter SDK, follow the instructions to register and configure the app through 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 one or more authentication providers for onboarding users.

Password-less Option

When an app is registered, and no authentication providers are set up for onboarding, only the passwordless login option is available by default.

Step 2: 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

Step 3: 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.

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

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.

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

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

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.

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

Step 4: 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 Flutter 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.

After logging in, users instantly access the Arcana wallet for Web3 wallet operations through the UI. Developers can also programmatically invoke wallet functions in the Flutter mobile app using supported Web3 operations. When a user action or programmatically invoked operation triggers a blockchain transaction, a notification will appear in the Flutter mobile app, prompting the user to review and approve or decline the transaction.

See also


Last update: October 2, 2023 by shalz