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