Quick Start: Flutter Apps
'Flutter' Web3 apps can easily onboard users via social login by integrating with the Arcana Auth Flutter SDK!
Prerequisites
- Flutter v3.15.0 or higher
1. Register & Configure
-
App must be registered via the Arcana Developer Dashboard: https://dashboard.arcana.network
-
Optionally, configure social login providers and gasless transactions for the app via the dashboard.
2. Install 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:
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
Use latest Arcana Auth Flutter SDK
Use latest Arcana Auth Flutter SDK release v0.0.6 available at pub.dev.
3. Integrate
Once installed, integrate the app with the Arcana Auth Flutter SDK. Create an AuthProvider
instance and specify the unique client ID assigned to the registered app.
import 'package:arcana_sdk/arcana_sdk.dart';
final auth = AuthProvider(clientId:"xar_xxxx_...");
auth.init(context: context);
Next, add code to onboard users and allow authenticated users to sign blockchain transactions using Arcana wallet.
Onboard Users
Add code to onboard users through one of the configured social login providers or via OTP login option.
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 access this token via getUser()
method and refer to the loginToken
field of the UserInfo
object.
Developers can use this token to verify the user and subsequently generate another token for app use if required.
In the future, the Arcana JWT Token will be deprecated. Use userDIDToken
to verify user.
Upon successful authentication, Arcana Auth SDK returns a unique DID token to the app called the Arcana DID Token. App developers can access this token via getUser()
method and refer to the userDIDToken
field of the UserInfo
object.
Developers can use this token to verify the user and subsequently generate another token for app use.
Social Login
auth.loginWithSocial("google").then((_) => {
// On login Success
}).catchError(...);
OTP Login
auth.loginWithOTP("${email_id}").then((_) => {
// On login Success
}).catchError(...);
Logout
Call the logout method in response to a user's choice to log out. The built-in Arcana wallet UI has a Logout option in the user profile tab.
auth.logout().then((_) => {
// On logout
});
Get User Address
auth.getAccount().then((account) => ...);
Get User Details
auth.getUserInfo().then((UserInfo info) => ...);
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();
Sign Transactions
The AuthProvider
supports the JSON-RPC requests for the following Web3 operations:
auth.request(method: "...", params: [...]).then(() => ...);
auth.sendTransaction({ to: "", value: "" }).then((hash) => ...);
4. Deploy
That's all!
The 'Flutter' mobile Web3 app is now powered by the Arcana Auth Flutter SDK to onboard users via social login and allow authenticated users to sign blockchain transactions using the Arcana wallet.
See also
- 'Flutter' integration example:
sample-auth-flutter
submodule in Auth Examples - Arcana Developer Dashboard User Guide
- Configuring Arcana wallet visibility
- Developer's Guide for Arcana wallet
- Handling Arcana Auth SDK error messages
- Arcana Auth SDK Usage Guide
- Arcana Auth SDK Reference Guide
- Arcana Auth Wagmi SDK Reference Guide
- Arcana Auth Flutter SDK Reference Guide
- Enabling Gasless Operations in an App
- Arcana Gasless (Standalone) SDK Quick Start Guide
- Arcana Gasless (Standalone) SDK Usage Guide
- Gasless Error Messages
Arcana Auth Flutter SDK Quicklinks