6 Easy Steps to Adding 2FA to Your Flutter App with Firebase Authentication.

Two-factor authentication (2FA) is an essential security feature for any app that deals with sensitive information. Adding 2FA to your Flutter app can help prevent unauthorized access and provide an extra layer of security for your users. In this article, we’ll discuss how to add 2FA to your Flutter app using Firebase Authentication.

What is Firebase Authentication?

6 Easy Steps to Adding 2FA to Your Flutter App with Firebase Authentication.

Firebase Authentication is a service provided by Google that allows developers to authenticate users using a variety of methods, including email and password, phone numbers, and third-party providers such as Google, Facebook, and Twitter. Firebase Authentication provides a secure and easy-to-use authentication system that can be integrated into any app, including Flutter apps.

Below are the steps how you can add 2-factor authentication to your flutter app using firebase.

Step 1: Add Firebase Authentication to your Flutter app

To add Firebase Authentication to your Flutter app, you need to add the Firebase Authentication package to your project. To do this, add the following dependency to your pubspec.yaml file.This will allow you to use the Firebase Authentication package in your Flutter app:

dependencies:
  firebase_auth: ^3.3.0

Step 2: Initialize Firebase Authentication

To use Firebase Authentication in your Flutter app, you need to initialize it first. You can do this by adding the following code to your main.dart file. This initializes Firebase Authentication in your Flutter app and allows you to use the Firebase Auth package:

import 'package:firebase_auth/firebase_auth.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Step 3: Add a phone number input field

To implement 2FA using phone numbers, you need to add a phone number input field to your login page. This input field should allow the user to enter their phone number.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Phone number',
    hintText: 'Enter your phone number',
  ),
  keyboardType: TextInputType.phone,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  validator: (value) {
    if (value!.isEmpty) {
      return 'Please enter your phone number';
    }
    return null;
  },
  onSaved: (value) {
    _phoneNumber = value!;
  },
),

Step 4: Send a verification code to the user’s phone number

Once the user submits their phone number, you can use Firebase Authentication to send a verification code to their phone number. To do this, you can use the verifyPhoneNumber method provided by the Firebase Auth package. This method sends a verification code to the user’s phone number and handles the various states of the verification process. When the code is sent, the codeSent callback is called with the verification ID and a resend token. You can use the verification ID later to verify the code entered by the user. Here’s an example:

void _sendVerificationCode(String phoneNumber) async {
  await FirebaseAuth.instance.verifyPhoneNumber(
    phoneNumber: phoneNumber,
    verificationCompleted: (PhoneAuthCredential credential) {},
    verificationFailed: (FirebaseAuthException e) {},
    codeSent: (String verificationId, int? resendToken) {
      _verificationId = verificationId;
      _resendToken = resendToken;
    },
    codeAutoRetrievalTimeout: (String verificationId) {},
    timeout: const Duration(seconds: 60),
  );
}

Step 5: Prompt the user to enter the verification code

Once the verification code is sent to the user’s phone number, you need to prompt the user to enter the code they received. To do this, you can add another input field to your login page like this:

String verificationCode;

TextField(
  onChanged: (value) {
    verificationCode = value;
  },
  decoration: InputDecoration(
    hintText: 'Enter verification code',
  ),
),

And then use the signInWithCredential method provided by the Firebase Auth package to verify the code. This method creates a PhoneAuthCredential object with the verification ID and the code entered by the user. It then uses the signInWithCredential method to authenticate the user with the Firebase Authentication service. Here’s an example:

void signInWithPhoneNumber() async {
  // Get the verification ID from the code sent to the user's phone
  final PhoneVerificationCompleted verificationCompleted =
      (AuthCredential phoneAuthCredential) {
    _auth.signInWithCredential(phoneAuthCredential);
  };

  final PhoneVerificationFailed verificationFailed =
      (FirebaseAuthException authException) {
    print('Phone number verification failed. Code: ${authException.code}. Message: ${authException.message}');
  };

  final PhoneCodeSent codeSent =
      (String verificationId, [int? forceResendingToken]) async {
    // Save the verification ID and resend token for later use
    this._verificationId = verificationId;
    this._resendToken = forceResendingToken;
  };

  final PhoneCodeAutoRetrievalTimeout codeAutoRetrievalTimeout =
      (String verificationId) {
    // Save the verification ID for later use
    this._verificationId = verificationId;
  };

  // Verify the phone number
  await _auth.verifyPhoneNumber(
    phoneNumber: '+1${_phoneNumberController.text}',
    timeout: const Duration(seconds: 60),
    verificationCompleted: verificationCompleted,
    verificationFailed: verificationFailed,
    codeSent: codeSent,
    codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
  );

  // Create a PhoneAuthCredential object with the verification ID and code entered by the user
  final PhoneAuthCredential credential = PhoneAuthProvider.credential(
    verificationId: _verificationId,
    smsCode: verificationCode,
  );

  // Authenticate the user with the Firebase Authentication service
  final UserCredential userCredential =
      await FirebaseAuth.instance.signInWithCredential(credential);

  // Check if the user has 2FA enabled
  final User? user = FirebaseAuth.instance.currentUser;
  if (user != null && user.multiFactor.enrolledFactors.isEmpty) {
    // User does not have 2FA enabled, prompt them to enable it
    _showEnable2FAAlert();
  } else {
    // User has 2FA enabled, proceed to app
    _navigateToApp();
  }
}

Step 6: Add a 2FA requirement

Finally, you can add a 2FA requirement to certain parts of your Flutter app by checking whether the user is enrolled in 2FA before allowing access. Here’s an example of how to do this:

// Check if the user has 2FA enabled
final User? user = FirebaseAuth.instance.currentUser;
if (user != null && user.multiFactor.enrolledFactors.isEmpty) {
  // User does not have 2FA enabled, prompt them to enable it
  _showEnable2FAAlert();
} else {
  // User has 2FA enabled, proceed to app
  _navigateToApp();
}

In this example, we retrieve the current user from Firebase Authentication and check whether they have any enrolled factors for multi-factor authentication. If the user does not have any enrolled factors, we prompt them to enable 2FA otherwise we navigate user to the app.

Conclusion

In the context of 2FA and Flutter, the importance of secure authentication practices cannot be overstated. 2FA, or two-factor authentication, is an additional layer of security that helps protect user accounts from unauthorized access. By requiring a second factor, such as a code sent to a mobile device, in addition to a password, 2FA makes it more difficult for attackers to gain access to sensitive information.

When it comes to developing 2FA functionality in Flutter, it is important to follow best practices for secure coding and testing. This includes properly implementing encryption and hashing algorithms, securely storing sensitive data, and thoroughly testing the functionality to ensure it is working as intended.

Furthermore, it is important to consider the user experience when implementing 2FA in a Flutter app. While security is the top priority, the 2FA process should also be as user-friendly and seamless as possible to encourage adoption and reduce friction for users.

In conclusion, implementing 2FA in Flutter requires a focus on both security and usability. By following best practices and testing thoroughly, developers can help ensure that user accounts are properly protected against unauthorized access.