Skip to content

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

NextJS App config

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

Client ID for the app

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

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

AuthProvider Flutter app Login

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, email using the configured providers. Authenticated users can instantly access the Arcana wallet to sign blockchain transactions.

See Also


Last update: December 1, 2023 by DocX, shalz