Skip to main content

Using Firebase with Web3Auth Flutter SFA SDK

mobileflutterethereumSFAWeb3Auth Team | May 19, 2024

In this guide, we'll talk about how we can use Web3Auth Single Factor Auth with Firebase in your Flutter application.

As an overview, the guide is quite simple, with functionality to log in, display user details, and perform blockchain interactions. The signing of the blockchain transactions is done through the Web3Auth embedded wallet. You can check out the infrastructure docs, "Web3Auth Wallet Management Infrastructure" for a high-level overview of the Web3Auth architecture and implementation. For those who want to skip straight to the code, you can find it on GitHub.

How to set up Web3Auth Dashboard

If you haven't already, sign up on the Web3Auth platform. It is free and gives you access to the Web3Auth's base plan. After the basic setup, explore other features and functionalities offered by the Web3Auth Dashboard. It includes custom verifiers, whitelabeling, analytics, and more. Head to Web3Auth's documentation page for detailed instructions on setting up the Web3Auth Dashboard.

How to set up Firebase for Flutter

If you haven't already setup the Firebase for your Flutter app, please setup the Firebase, as it's the prerequisites for the guide. Head to the Firebase's documentation for the details instructions.

How to set up Custom verifier

Once, you have set up the Web3Auth Dashboard, created a new project, and set up Firebase, it's time to create a Custom Verifier for your Firebase application. We already have detail instructions on how to create a Custom Verifier for Firebase, please head to our documentation.

Integrating Web3Auth SFA in Flutter

Once, you have set up the Custom Verifier, it's time to integrate Web3Auth in your Flutter application. For the implementation, we'll use the "single_factor_auth_flutter. This SDK facilitates integration with Web3Auth. This way you can easily manage embedded wallet in your Flutter application.

Installation

To install the single_factor_auth_flutter package, you have two options. You can either manually add the package in the pubspec.yaml file, or you can use the flutter pub add command.

Add single_factor_auth_flutter using flutter pub add command.

flutter pub add single_factor_auth_flutter

Initialization

After successfully installing the package, the next step is to initialize SingleFactAuthFlutter in your Flutter app. This sets up the necessary configurations using Web3Auth network and prepares the SDK. Learn more about SingleFactAuthFlutter Initialization.

final singleFactorAuthFlutter = SingleFactAuthFlutter();

await singleFactAuthFlutter.init(
Web3AuthNetwork(network: TorusNetwork.cyan),
);

Session Management

To check whether the user is authenticated, you can use the initialize method. For a user already authenticated, the result would be a non-nullable TorusKey. You can navigate to different views based on the result.

try {
final TorusKey? torusKey = await singleFactAuthFlutter.initialize();

if (torusKey != null) {
log('Active session found. Private Key: ${torusKey.privateKey}');
} else {
log("No active session found.")
}
} catch (e) {
log("Error initializing SFA: $e");
}

Authentication

If the user is not authenticated, you should utilize the getKey method. For the guide, we will add Email Password login using Firebase. The getKey method is pretty straightforward in SingleFactAuthFlutter and takes LoginParams as input. After successfully logging in, the method will return the TorusKey.

Learn more about SingleFactAuthFlutter LoginParams. For interacting with Firebase we'll create a FirebaseHelper class.

import 'dart:developer';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class FirebaseHelper {
final FirebaseAuth _auth;

FirebaseHelper({required FirebaseAuth auth}) : _auth = auth;

// Sign in with Email and Password
Future<UserCredential> signInWithEmailAndPassword(
String email,
String password,
) async {
try {
return await _auth.signInWithEmailAndPassword(
email: email,
password: password,
);
} catch (e) {
log(e.toString());
rethrow;
}
}

// Sign out
Future<void> signOut(BuildContext context) async {
await _auth.signOut();
}

// Get the current user
User? getCurrentUser() {
return _auth.currentUser;
}
}

Once we hace created the FirebaseHelper class, we can use it login the user, and get the idToken. Once we have the idToken, we can use it to getKey method to authenticate user. To more about Firebase login methods, please checkout the Firebase documentation.

final firebaseHelper = FirebaseHelper(auth: FirebaseAuth.instance);

final userCredential = await firebaseHelper.signInWithEmailAndPassword(
'sfa.flutter@w3a.link',
'Testing@123',
);

final user = userCredential.user;
final token = await user.getIdToken(true);

final loginParams = LoginParams(
// Replace with your verifier
verifier: 'web3auth-firebase-examples',
// Replace with the verifierId value, can be email, sub, or custom
verifierId: 'sfa.flutter@w3a.link',
idToken: token!,
)

final torusKey = await singleFactAuthFlutter.getKey(loginParams);

log(torusKey.privateKey);
log(torusKey.publicAddress);

Set up Blockchain Providers

Once we have successfully authenticated the user, the next step would be to fetch the user details, retrieve wallet address and prepare blockchain providers for interactions. For this guide, we are supporting only Ethereum ecosystem, but the general idea can be used for any blockchain ecosystem.

For interacting with ethereum chains, we'll use the web3dart SDK. To install the web3dart package, you have two options. You can either manually add the package in the pubspec.yaml file, or you can use the flutter pub add command.

Add web3dart using flutter pub add command.

flutter pub add web3dart

After successfully installing package, it's time to create Credentials instance to retrive user's EOA address, and sign the transactions. To retrive the user's private key, we'll use the TorusKey instance.

final credentials = EthPrivateKey.fromHex(torusKey.privateKey);

// User's EOA address
log(credentials.address)

To retrive user's balance, and interacting with Blockcahin, you can follow our detailed guide on how to interact with EVM chain guides. Since, you already have created Credentials instance, and retrived the user's EOA address, you can skip that part. To interact with Solana blockchain, you can checkout our Solana blockchain guide.

Conclusion

Voila, you have learned how to use Web3Auth SFA SDK with Flutter application.

If you are interested in learning more about SFA SDK, please checkout our documentation for Flutter SFA SDK. You can find the code used for the guide on our examples repo.