Integrate Firebase with Web3Auth Flutter SFA SDK

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.

flutter pub add single_factor_auth_flutter

dependencies:
  single_factor_auth_flutter: ^5.2.0

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.

import 'package:single_factor_auth_flutter/single_factor_auth_flutter.dart';

final _singleFactorAuthFlutterPlugin = SingleFactAuthFlutter();

await _singleFactorAuthFlutterPlugin.init(
  SFAParams(
    network: Web3AuthNetwork.mainnet,
    clientId: "YOUR_WEB3AUTH_CLIENT_ID",
  ),
);

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 SFAKey. You can navigate to different views based on the result.

try {
  final SFAKey? torusKey = await _singleFactorAuthFlutterPlugin.initialize();
} catch (e) {
  // Handle error
}

Authentication​

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

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 connect 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 sfaKey = await singleFactAuthFlutter.connect(loginParams);

log(sfaKey.privateKey);
log(sfaKey.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.

flutter pub add web3dart

dependencies:
  web3dart: ^2.7.3

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

final credentials = EthPrivateKey.fromHex(sfaKey.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.