Multi-Factor Authentication with Flutter and Firebase

Multi-Factor Authentication with Flutter and Firebase

Multi-factor authentication is a feature that allows the user to add an extra layer of security. It can be a code received by SMS or saved in a special app. You’ll need to provide this code to connect when you connect to your app. If your application is manipulating sensitive data, it’s often a good idea to add Multi-factor authentication, so your user's data is more secure.

🚀 Phone multi-factor Authentication is now supported in FlutterFire! You’re going to be able to offer an extra layer of security to your users.

In this tutorial, you’ll learn how to add phone multi-factor authentication to your Flutter app, on Android, iOS, and Web!

💡 Only phone is currently supported. The support for other methods (action code) is coming soon. Moreover, Android, iOS, and Web platforms are supported.

Before you begin #

  1. Go to your Firebase console, and enable the email and password provider.
  2. Ensure that your app is verifying user emails. MFA requires email verification. It’s to prevent locking out the real owner of an email from the account.

You can verify the email of your user with user.sendEmailVerification() method.

Enabling MFA #

To use MFA, you first need to activate it in your Google Cloud console:

  1. Go to the Identity Platform MFA page in the Google Cloud console.
  2. In the box titled SMS-Based Multi-Factor Authentication, click Enable.
  3. Enter the phone numbers you'll use for testing. While optional, registering test phone numbers is strongly recommended to avoid throttling during development.
  4. If you haven't already authorized your app's domain, add it to the allow list by clicking Add domain on the right (required for Web).
  5. Click Save.

There are multiple patterns for MFA enrollment that you can check in the official documentation. Choose the one that suits your app best.

Verifying your app #

For iOS, you’ll need an extra setup step for verifying your app; check the steps “Verifying your app” step on the official guide. You can either choose APN or reCaptcha verification.

Enrolling a second factor #

To enroll a new secondary factor for a user:

  1. Re-authenticate the user.
  2. Ask the user for their phone number.

Note: Google stores and uses phone numbers to improve spam and abuse prevention across all Google services. Ensure you obtain appropriate consent from your users before sending their phone numbers to the Identity Platform.

  1. Get the multi-factor session for the user:

  2. Verify the phone number with the multi factor session:

  3. Get the SMS code from the user and create a new phone credential:

  4. Enroll the new factor:

Complete example:

Signing users in with a second factor #

To sign in a user with two-factor SMS verification:

  1. Sign the user in with their first factor, then catch the error. This error contains a resolver, hints on the enrolled second factors, and an underlying session proving the user successfully authenticated with the first factor.

  2. If the user has multiple secondary factors enrolled, ask them which one to use:

  3. Send a verification message to the user's phone using the resolver’s session and the hint (note that you don’t need the user’s phoneNumber):

  4. Resolve the sign in with the resolver:

Complete example:

Congratulations! 🎉 You successfully signed in a user using multi-factor authentication.

Enjoyed this blog post? Please consider sharing it:

Sign up to receive our latest updates