firebase_multi_factor_auth

Description:

firebase multi factor auth

Table of Contents #

Table of Contents
General
Disclaimer
Setup

1. Add the Plugin
2. Firebase initalization
3. Enable Cloud Firestore (Database)
4. Enable internet for android apps
5. Enable google client id for web apps


Implementation

1. main.dart
2. Wrap your app in the FirebaseMultiFactorAuth widget

2.1 Login Widget
2.2 OTP Phone Widget
2.3 OTP Verification Widget
2.4 First Login Widget


3. Main Widget


Common errors

Google Sign In


How does it work?

1. Firebase Multi Factor Auth Widget
2. Auth Controller Widget
3. OTP Controller Widget
4. FirebaseMultiFactorAuth


Post Scriptum

General #
This library enables the firebase multi factor authentication for your flutter app.
The first implemented method is the google sign in. The second method is the phone number sign in.
If you use google mail for login and two different phone numbers for MFA, you create two accounts.
It will not be checked if your phone number is already used for another account.
An example project with working android and web instance lies under example/.
Other platforms are not implemented or tested yet.
But you can add it ;) It is open source.
You do not need to use the provided widgets.
You can use the functions, widgets and capabilities directly.
Disclaimer #
Firebase multi factor authentication without credit card for testing purposes only?
Sure!
This is a proof of concept (poc).
This library is not affiliated with Firebase or Google.

It is only for testing purposes when you do not have a credit card and want to test firebase multi factor authentication.

Usually you don't have to pay for a certain amount of MFA requests. Only for this amount this library is allowed to use.
You are responsible for any damage or loss of profit for google that may occur.
Setup #
1. Add the Plugin #
flutter pub add firebase_multi_factor_auth
copied to clipboard
2. Firebase initalization #
You can follow this guide as well: Add Firebase to your Flutter app
# Install the CLI if not already done so
dart pub global activate flutterfire_cli

# Run the `configure` command, select a Firebase project and platforms
flutterfire configure
copied to clipboard
3. Enable Cloud Firestore (Database) #
# Project Settings > Database > Create Database
# Select a location
# Add a collection named "private"
# Add a collection named "public"
copied to clipboard
4. Enable internet for android apps #
Add following line to AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
copied to clipboard
5. Enable google client id for web apps #
Example web/index.html.
In your web/index.html add following line:
<meta name="google-signin-client_id" content="YOUR_OWN_ID.apps.googleusercontent.com">

Follow: https://pub.dev/packages/google_sign_in
or see: https://www.balbooa.com/gridbox-documentation/how-to-get-google-client-id-and-client-secret
copied to clipboard
Implementation #
1. main.dart #
Example main.dart.
Add following before you run the app
void main() async {
WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
); // this will be only possible if you run 'flutterfire configure' before!

runApp(const App());
}
copied to clipboard
2. Wrap your app in the FirebaseMultiFactorAuth widget #
Example app.dart.
FirebaseMultiFactorAuthWidget(
loginWidget: LoginWidget(),
otpControllerWidget: OTPControllerWidget(
phoneInputWidget: OTPPhoneWidget(),
otpSentWidget: OTPVerificationWidget(),
firstLoginWidget: UsernameInputWidget(),
),
mainWidget: MainWidget(),
),
),
copied to clipboard
2.1 Login Widget #
Example login_widget.dart.
Implement your login page with the loginFirstProvider function.
The function below will trigger the google sign in flow.
ElevatedButton.icon(
label: Text("Login Google"),
icon: Icon(Icons.g_mobiledata_outlined),
onPressed: () {
FirebaseMultiFactorAuth.loginFirstProvider(
context: context, authType: MultiFactorAuthType.GOOGLE);
},
),
copied to clipboard
2.2 OTP Phone Widget #
Example otp_phone_input.dart.
Implement your phone number input widget.
With the function below you trigger the number checking and otp sending flow.
FirebaseMultiFactorAuth.inputPhoneNumberSendOTP(
context: context,
phoneNumber: phoneController.text
);
copied to clipboard
2.3 OTP Verification Widget #
Example otp_verification_input.dart.
Implement your otp input widget.
With the function below you trigger the otp verification flow.
await FirebaseMultiFactorAuth.inputPhoneOTP(
context: this.context,
otpCode: _otpController.text);
copied to clipboard
2.4 First Login Widget #
Example first_login_widget.dart.
Implement the widget that is shown on the user's first login.
With the function below you disable the first login widget for the user's next login.
/* Your code and maybe some firestore calls */

await FirebaseMultiFactorAuth.setFirstLogin(
context: context,
isFirstLogin: false);
copied to clipboard
3. Main Widget #
The main widget is just your app that will be allowed to run when and if the user is logged in via two factors.
Common errors #
Google Sign In #
Error while singing in with google: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null, null)

## Android SHA-1 app not registered
1. Just add the SHA-1 key to your firebase project settings.
1.1. Open android/ folder in Android Studio
1.2. Open Gradle tab on the right side
1.3. Execute Gradle Task "gradle signingReport"
1.4. Copy SHA-1 key from the console
1.5. Add SHA-1 key to your firebase project settings.

## Support mail not added
2. Add a support mail to your firebase project settings.
2.1. Open firebase project settings
2.2. Add a support mail
2.3. Save
copied to clipboard
How does it work? #
1. Firebase Multi Factor Auth Widget #
The widget is the main widget that wraps your app.
It enables the three main providers: AuthProvider, UserProvider and OTPProvider.
2. Auth Controller Widget #
The widget listens on AuthProvider state changes and handles the different cases of the user logged in, not logged in, logged in with one factor and logged in with two factors.
3. OTP Controller Widget #
The widget listens on OTPProvider state changes and handles the different cases of the otp states.
Those are:

OTPState.PHONE_INPUT
OTPState.OTP_SENT
OTPState.FIRST_LOGIN

The 3. state describes the otp flow after the user is logged in but before he saw the on first login page.
4. FirebaseMultiFactorAuth #
The class is the main class that contains all the functions easily available to the libraries user.
Post Scriptum #
P.S.: The concept and this implementation was first developed in late 2022 and is still in development.
P.P.S.: Google declined my application as dev! 😡😂