Skip to content

Commit a3f6964

Browse files
AyushBherwani1998AyushBherwani1998
committed
add sfa guides
1 parent 71a2362 commit a3f6964

5 files changed

Lines changed: 522 additions & 7 deletions

File tree

‎src/pages/guides/sfa-android-firebase.mdx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ instructions.
5050

5151
## How to set up Custom verifier
5252

53-
Once, you have set up the Web3Auth Dashboard, created a new project, and set up Firbase, it's time
53+
Once, you have set up the Web3Auth Dashboard, created a new project, and set up Firebase, it's time
5454
to create a Custom Verifier for your Firebase application. We already have detail instructions on
5555
how to create a Custom Verifier for Firebase, please head to our
5656
[documentation](https://web3auth.io/docs/auth-provider-setup/authentication-service-providers#firebase).
@@ -90,13 +90,13 @@ dependencies {
9090
```
9191

9292
For the prerequisites, and other mandatory configuration of the SDK, please head to our
93-
[installation documentation](/docs/sdk/core-kit/sfa-android/install.mdx).
93+
[installation documentation](/docs/sdk/core-kit/sfa-android/install).
9494

9595
### Initialization
9696

9797
After successfully installing the package, the next step is to initialize `SingleFactorAuth` in your
9898
Android app. This sets up the necessary configurations using Web3Auth network and prepares the SDK.
99-
[Learn more about SingleFactorAuth Initialization](/docs/sdk/core-kit/sfa-android/initialize.mdx).
99+
[Learn more about SingleFactorAuth Initialization](/docs/sdk/core-kit/sfa-android/initialize).
100100

101101
```kotlin
102102
class MainActivity : AppCompatActivity() {
@@ -149,6 +149,8 @@ SingleFactorAuth and takes `LoginParams` as input. After successfully logging in
149149
return the `TorusKey`.
150150

151151
Learn more about [SingleFactorAuth LoginParams](/docs/sdk/core-kit/sfa-android/usage#loginparams).
152+
To more about Firebase login methods, please
153+
[checkout the Firebase documentation](https://firebase.google.com/docs/auth/android/start).
152154

153155
```kotlin
154156
private var auth: FirebaseAuthauth = Firebase.auth
@@ -231,7 +233,7 @@ dependencies {
231233
}
232234
```
233235

234-
After successfully installing SDK, it's time to `Credentials` instance to retrive user's EOA
236+
After successfully installing SDK, it's time to create `Credentials` instance to retrive user's EOA
235237
address, and interact with blockchain. To retrive the user's private key, we'll use the `TorusKey`
236238
instance.
237239

@@ -244,10 +246,10 @@ Log.d(TAG, credentials.address)
244246
```
245247

246248
To retrive user's balance, and interacting with Blockcahin, you can follow our detailed guide on how
247-
to
248-
[interact with EVM chain guides](https://web3auth.io/docs/connect-blockchain/evm/ethereum/android#get-balance).
249+
to [interact with EVM chain guides](/docs/connect-blockchain/evm/ethereum/android#get-balance).
249250
Since, you already have created `Credentials` instance, and retrived the user's EOA address, you can
250-
skip that part.
251+
skip that part. To interact with Solana blockchain, you can checkout our
252+
[Solana blockchain guide](/docs/connect-blockchain/solana/android).
251253

252254
## Conclusion
253255

‎src/pages/guides/sfa-flutter-firebase.mdx‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
---
2+
title: Using Firebase with Web3Auth Flutter SFA SDK
3+
image: "guides/banners/sfa-flutter-firebase.png"
4+
description:
5+
Web3Auth Single Factor Authentication (SFA) Flutter SDK with Firebase enables secure blockchain
6+
authentication using Email and Password login. The process involves setting up Firebase and
7+
Web3Auth, initializing the SDK, and interacting with the Ethereum blockchain.
8+
type: guide
9+
tags: [mobile, flutter, ethereum, SFA]
10+
date: May 19, 2024
11+
author: Web3Auth Team
12+
---
13+
14+
import SEO from "@site/src/components/SEO";
15+
import TabItem from "@theme/TabItem";
16+
import Tabs from "@theme/Tabs";
17+
18+
<SEO
19+
title="Using Firebase with Web3Auth Flutter SFA SDK"
20+
description="Learn how to use Web3Auth Single Factor Auth with Firebase in your Flutter Application."
21+
image="https://web3auth.io/docs/guides/banners/sfa-flutter-firebase.png"
22+
slug="/guides/sfa-flutter-firebase"
23+
/>
24+
25+
In this guide, we'll talk about how we can use Web3Auth Single Factor Auth with Firebase in your
26+
Flutter application.
27+
28+
As an overview, the guide is quite simple, with functionality to log in, display user details, and
29+
perform blockchain interactions. The signing of the blockchain transactions is done through the
30+
Web3Auth embedded wallet. You can check out the infrastructure docs,
31+
["Web3Auth Wallet Management Infrastructure"](/docs/infrastructure/infrastructure) for a high-level
32+
overview of the Web3Auth architecture and implementation. For those who want to skip straight to the
33+
code, you can find it on
34+
[GitHub](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-flutter/sfa-flutter-quick-start).
35+
36+
## How to set up Web3Auth Dashboard
37+
38+
If you haven't already, sign up on the Web3Auth platform. It is free and gives you access to the
39+
Web3Auth's base plan. After the basic setup, explore other features and functionalities offered by
40+
the Web3Auth Dashboard. It includes custom verifiers, whitelabeling, analytics, and more. Head to
41+
[Web3Auth's documentation](/docs/dashboard-setup) page for detailed instructions on setting up the
42+
Web3Auth Dashboard.
43+
44+
## How to set up Firebase for Flutter
45+
46+
If you haven't already setup the Firebase for your Flutter app, please setup the Firebase, as it's
47+
the prerequisites for the guide. Head to the
48+
[Firebase's documentation](https://firebase.google.com/docs/flutter/setup) for the details
49+
instructions.
50+
51+
## How to set up Custom verifier
52+
53+
Once, you have set up the Web3Auth Dashboard, created a new project, and set up Firebase, it's time
54+
to create a Custom Verifier for your Firebase application. We already have detail instructions on
55+
how to create a Custom Verifier for Firebase, please head to our
56+
[documentation](https://web3auth.io/docs/auth-provider-setup/authentication-service-providers#firebase).
57+
58+
## Integrating Web3Auth SFA in Flutter
59+
60+
Once, you have set up the Custom Verifier, it's time to integrate Web3Auth in your Flutter
61+
application. For the implementation, we'll use the "single_factor_auth_flutter. This SDK facilitates
62+
integration with Web3Auth. This way you can easily manage embedded wallet in your Flutter
63+
application.
64+
65+
### Installation
66+
67+
To install the single_factor_auth_flutter package, you have two options. You can either manually add
68+
the package in the `pubspec.yaml` file, or you can use the `flutter pub add` command.
69+
70+
<Tabs defaultValue = "console"
71+
values={[
72+
{ label: "Console", value: "console", },
73+
{ label: "Pubspec", value: "pubspec", },
74+
]}
75+
>
76+
77+
<TabItem value="console">
78+
Add `single_factor_auth_flutter` using `flutter pub add` command.
79+
80+
```sh
81+
flutter pub add single_factor_auth_flutter
82+
```
83+
84+
</TabItem>
85+
86+
<TabItem value="pubspec">
87+
Add `single_factor_auth_flutter` as a dependency to your `pubspec.yaml`.
88+
89+
```yaml
90+
dependencies:
91+
single_factor_auth_flutter: ^2.0.1
92+
```
93+
94+
</TabItem>
95+
</Tabs>
96+
97+
### Initialization
98+
99+
After successfully installing the package, the next step is to initialize `SingleFactAuthFlutter` in
100+
your Flutter app. This sets up the necessary configurations using Web3Auth network and prepares the
101+
SDK.
102+
[Learn more about SingleFactAuthFlutter Initialization](/docs/sdk/core-kit/sfa-flutter/initialize).
103+
104+
```dart
105+
final singleFactorAuthFlutter = SingleFactAuthFlutter();
106+
107+
await singleFactAuthFlutter.init(
108+
Web3AuthNetwork(network: TorusNetwork.cyan),
109+
);
110+
```
111+
112+
### Session Management
113+
114+
To check whether the user is authenticated, you can use the `initialize` method. For a user already
115+
authenticated, the result would be a non-nullable `TorusKey`. You can navigate to different views
116+
based on the result.
117+
118+
```dart
119+
try {
120+
final TorusKey? torusKey = await singleFactAuthFlutter.initialize();
121+
122+
if (torusKey != null) {
123+
log('Active session found. Private Key: ${torusKey.privateKey}');
124+
} else {
125+
log("No active session found.")
126+
}
127+
} catch (e) {
128+
log("Error initializing SFA: $e");
129+
}
130+
```
131+
132+
### Authentication
133+
134+
If the user is not authenticated, you should utilize the `getKey` method. For the guide, we will add
135+
Email Password login using Firebase. The `getKey` method is pretty straightforward in
136+
`SingleFactAuthFlutter` and takes `LoginParams` as input. After successfully logging in, the method
137+
will return the `TorusKey`.
138+
139+
Learn more about
140+
[SingleFactAuthFlutter LoginParams](/docs/sdk/core-kit/sfa-flutter/usage#loginparams). For
141+
interacting with Firebase we'll create a `FirebaseHelper` class.
142+
143+
```dart
144+
import 'dart:developer';
145+
146+
import 'package:firebase_auth/firebase_auth.dart';
147+
import 'package:flutter/material.dart';
148+
149+
class FirebaseHelper {
150+
final FirebaseAuth _auth;
151+
152+
FirebaseHelper({required FirebaseAuth auth}) : _auth = auth;
153+
154+
// Sign in with Email and Password
155+
Future<UserCredential> signInWithEmailAndPassword(
156+
String email,
157+
String password,
158+
) async {
159+
try {
160+
return await _auth.signInWithEmailAndPassword(
161+
email: email,
162+
password: password,
163+
);
164+
} catch (e) {
165+
log(e.toString());
166+
rethrow;
167+
}
168+
}
169+
170+
// Sign out
171+
Future<void> signOut(BuildContext context) async {
172+
await _auth.signOut();
173+
}
174+
175+
// Get the current user
176+
User? getCurrentUser() {
177+
return _auth.currentUser;
178+
}
179+
}
180+
```
181+
182+
Once we hace created the FirebaseHelper class, we can use it login the user, and get the idToken.
183+
Once we have the idToken, we can use it to `getKey` method to authenticate user. To more about
184+
Firebase login methods, please
185+
[checkout the Firebase documentation](https://firebase.google.com/docs/auth/flutter/start).
186+
187+
```dart
188+
final firebaseHelper = FirebaseHelper(auth: FirebaseAuth.instance);
189+
190+
final userCredential = await firebaseHelper.signInWithEmailAndPassword(
191+
'sfa.flutter@w3a.link',
192+
'Testing@123',
193+
);
194+
195+
final torusSFAKey = await singleFactorAuthFlutter.getKey(userCredential.user);
196+
197+
log(torusSFAKey.privateKey);
198+
log(torusSFAKey.publicAddress);
199+
```
200+
201+
## Set up Blockchain Providers
202+
203+
Once we have successfully authenticated the user, the next step would be to fetch the user details,
204+
retrieve wallet address and prepare blockchain providers for interactions. For this guide, we are
205+
supporting only Ethereum ecosystem, but the general idea can be used for any blockchain ecosystem.
206+
207+
For interacting with ethereum chains, we'll use the [web3dart](https://pub.dev/packages/web3dart)
208+
SDK. To install the web3dart package, you have two options. You can either manually add the package
209+
in the `pubspec.yaml` file, or you can use the `flutter pub add` command.
210+
211+
<Tabs defaultValue = "console"
212+
values={[
213+
{ label: "Console", value: "console", },
214+
{ label: "Pubspec", value: "pubspec", },
215+
]}
216+
>
217+
218+
<TabItem value="console">
219+
Add `web3dart` using `flutter pub add` command.
220+
221+
```sh
222+
flutter pub add web3dart
223+
```
224+
225+
</TabItem>
226+
227+
<TabItem value="pubspec">
228+
Add `web3dart` as a dependency to your `pubspec.yaml`.
229+
230+
```yaml
231+
dependencies:
232+
web3dart: ^2.7.3
233+
```
234+
235+
</TabItem>
236+
</Tabs>
237+
238+
After successfully installing package, it's time to create `Credentials` instance to retrive user's
239+
EOA address, and sign the transactions. To retrive the user's private key, we'll use the `TorusKey`
240+
instance.
241+
242+
```dart
243+
// highlight-next-line
244+
final credentials = EthPrivateKey.fromHex(torusKey.privateKey);
245+
246+
// User's EOA address
247+
log(credentials.address)
248+
```
249+
250+
To retrive user's balance, and interacting with Blockcahin, you can follow our detailed guide on how
251+
to [interact with EVM chain guides](/docs/connect-blockchain/evm/ethereum/flutter#get-balance).
252+
Since, you already have created `Credentials` instance, and retrived the user's EOA address, you can
253+
skip that part. To interact with Solana blockchain, you can checkout our
254+
[Solana blockchain guide](/docs/connect-blockchain/solana/flutter).
255+
256+
## Conclusion
257+
258+
Voila, you have learned how to use Web3Auth SFA SDK with Flutter application.
259+
260+
If you are interested in learning more about SFA SDK, please checkout our
261+
[documentation for Flutter SFA SDK](/docs/sdk/core-kit/sfa-flutter/). You can find the code used for
262+
the guide on our
263+
[examples repo](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-flutter/sfa-flutter-quick-start).

0 commit comments

Comments
 (0)