This was an interesting experiment but isn't really going to be scalable or easily turned into a package — everything works though. What I'm going to do is turn it into a package from scratch, focusing on the Flutter native StreamBuilder and rxdart observables and Dart Streams to manage the state of multiple widgets when necessary, instead of using Provider or other high-level packages. This repo will still be up as a learning experience for others.

A benchmark for Authentication through Firebase in Flutter.

Heavily inspired design by the flutter_login package, by Near Huscarl. Even though it is not as pretty or so intensely parameterized, the overall structure of the code is much more simple and accessible — in part, this is due to using AnimatedSwitcher and Visibility widgets to handle animations, instead of customized raw animations.

Firebase is enabled, however, for security reasons, I chose to omit the json settings files. They are listed inside the .gitignore file.

More info can be found in the docs/ folder.

I chose to create a real Firebase server for the tests^*. So, instead of mocking the Firebase instance, you will find tests which make real requests, thus, needing to use Flutter Driver.

The test utils.dart file features some very handy functions and classes that I spent a lot of time trying to make work. Some of the notable mentions are:

• How to extract widget states and StatelessWidgets from the WidgetTester.
  • Inspired by stateful_components_test.dart, inside the flutter/flutter repo.
• How to test rendered text from the WidgetTester.
  • Directly from text_field_test.dart, inside the flutter/flutter repo.

^{* Basically because I haven't been able to find a trustworthy package for the mocks, and haven't found the patience to implement one myself either. The closest I have been able to a reliable mock is in the firebase_auth package itself. Check out firebase_auth_test.dart.}

Email and Password Validation were both accomplished through the use of regular expressions.

• Email Validation uses this regex.
• Password Validation uses this regex. And the error messages appear in this order:
  1. Minimum eight characters
  2. At least one uppercase letter
  3. One lowercase letter
  4. One number
  5. One special character

My architecture sucks and yours is amazing, I know, I know.

But if it ain't broken, don't fix it. So I'm not going to remake everything unless there's huge benefit to it.

One of the biggest problems, besides the one with labelText and Provider, is the fact that most of what's in my validator is basically featured inside firebase_auth's API anyway. Ditching out my validator could really reduce a lot of my code's complexity. But I didn't know that beforehand.

Unfortunately, the source's TextFormField doesn't allow us to disable the errorText, which, in my case, can mess up the design quite badly, since I chose to present the errors in the labelText. However, there seems to be a more or less easy way of fixing this if we add a parameter to the original TextFormField, which is what I did. You can find out more about it in this SO answer (or in Issue #52634).

Since my architecture has the initial Form changing because of the internal AnimatedSwitcher, I think that the Provider's notifyListeners() and the formKey.currentState.save() could happen concurrently.

I couldn't find a clean solution solution to that, so I "fixed" it by delaying the saving with — inside login_workflow_provider.dart —:

Future<void> save() async =>
    await Future.delayed(Duration(milliseconds: 100), () {
      _formKey.currentState.save();
    });

More info about this problem can be found in Issue #31 or in this StackOverflow question.