Flutter Code Sample

Before integrating a Flutter Web3 app with the Arcana Auth SDK, address the pre-requisites first. Then install the arcana_auth_flutter package and integrate the SDK.

Prerequisites

Log in to the Arcana Developer Dashboard: https://dashboard.arcana.network. Thenregister and configure the required user onboarding options. For details, see how to configure authentication providers.

By default, a Testnet configuration profile is created after the app is registered. A unique Client ID is assigned to the Flutter app. Note this value, it will be required later during app integration.

Install SDK

The Arcana arcana_auth_flutter package is offered as a 'Flutter Plugin'. Set up the latest version using the 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

An-note

For a complete Flutter app integration example, see the Auth Examples GitHub Repository.

Integrate App

Refer to the Flutter sample code in the repository mentioned earlier. In the lib/main.dart file, the arcana_auth_flutter/arcana_sdk.dart file is imported. Create a new instance of AuthProvider by specifying the Client ID assigned to the Flutter app during app registration.

sample-auth-flutter/lib/main.dart

import 'dart:convert';
import 'dart:math';
import 'package:arcana_auth_flutter/common.dart';
import 'package:arcana_sdk_example/strings.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:arcana_auth_flutter/arcana_sdk.dart';

void main() {
  runApp(MaterialApp(home: const MyApp()));
}

...

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final auth = AuthProvider(
      clientId: "xar_test_xxxxxxxxxxxxxxxx35e1811b0c2e33619f8");
  TextEditingController heightController = TextEditingController();
  TextEditingController widthController = TextEditingController();
  String logs = '';
  String action = '';
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

...

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    setState(() {
      logs = '';
    });
    auth.init(context: context); // Important!!! initialize before calling other methods
  }

Make sure to call the init method of the AuthProvider first before calling any other methods.

Onboard Users

Next, add code to onboard users. In this example, we use the custom login UI option and use loginWithSocial method of the AuthProvider to onboard users via 'Google' as the social login provider.

sample-auth-flutter/lib/main.dart

...
Row(
  children: [
    Expanded(
      child: ElevatedButton(
          onPressed: () {
            auth.loginWithSocial("google").then((_) {
              action = "login_complete";
              setState(() {});
            });
            logs = '';
            action = 'login_google';
            setState(() {});
          },
          child: Text("Login with google")),
    )
  ],
),
...

Once a user authenticates, the built-in Arcana wallet is displayed in the app's context and can be used for signing blockchain transactions. See Arcana wallet User Guide for more Web3 wallet operation details.

Use Web3 Wallet Operations

Developers can add code as required to programmatically call Web3 wallet operations for authenticated users. See Arcana wallet Developer's Guide and the Arcana Developer Dashboard User Guide for details on wallet configuration.

That's all!

The Flutter app is successfully integrated and ready to onboard Web3 users via social login, or email as configured via the dashboard. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.