I will document how I add user authentication to the flutter defult app (counter app). I start with the source code created by default when we create a project in flutter. For Flutter 3, this is a counter app where the player clicks a button to increment a buttom on the screen.
This page will cover Firebase initialisation only. I will cover User management (log in, sign up, etc) on another post.
I use https://github.com/firebase/quickstart-flutter/tree/main/authentication for guidance on how to implement Firebase authentication.
Using this link, I will modify the default counter app code. I will document every step as I change the default counter app code.
On the Firebase Console
I enabled email/password authentication on FireBase: https://console.firebase.google.com/u/0/project/pascall-2022/authentication/providers. There are other authentication options (such as SMS, etc) but let us ignore them now.
On VS Code
Add Authentication to default (counter) app
flutter pub add firebase_crashlytics
dart pub global activate flutterfire_cli
This puts the flutterfire to $HOME/.pub-cache/bin. Add this to $PATH. You can check $PATH, and $HOME, in VSCode terminal window by using the echo command, e.g. echo $HOME.
Now I can run
$ flutterfire configure
This asks you to select the platforms (iOS, Android, Web) supported in the Flutter app. For each selected platform, the FlutterFire CLI creates a new Firebase app in your Firebase project. It also creates a Firebase configuration file (firebase_options.dart
) and adds it to your lib/
directory.
Note that kIsWeb in the code is a Dart constant that tells us whether this is running as a web app. The initialisation is done if and only if this is running as an Android or an IOS app.
Add logging
$ flutter pub add logging
and add the following in main.dart before calling runApp:
I also created a local variable (local variable starts with _), _log
:
Logger _log = Logger('main');
Make sure that any use of _log
must happen after you set the logging level by. For example,
Logger.root.level = Level.INFO;
See Flutter Page 3 for more on logging
.
Delete ‘const’ when calling ‘MyApp()’
runApp(const MyApp());
changed to runApp(MyApp());
I also deleted the first line in MyApp where a call is made to super
. I am not sure why this line is necessary.
// MyApp({Key? key}) : super(key: key);
In Flutter, the widgets have keys. The widget keys are only used in special circumstances, e.g. when you change the order of your stateful widgets in a display. At this stage, I do not have a plan to use keys. I delete the line with impunity.
Running as a Mac app
I tried to run the app on Mac first but it did not work. The message was that XCODE version needed to be 13.3 or higher. I am now downloading Xcode_13.4.kip. It is a slow download of 10 gigabytes from developer.apple.com. I read that it would be much slower if I were downloading it from the App Store. It downloaded as an xip file. Now it is trying to “expand”. This was complete in about 10 minutes. I noted that the XCODE.APP file was created in the Downloads folder, a huge file at 30+ GB. I copied it to Applications folder overwriting the previous version of XCODE.
I tried to run it to check but it said that “The application requires macOS 12.0 or later.” I have 11.6. I am now downloading the new OS, macOS Monterey. I hope this will not create new problems. The update speed is not fast. It says “About 35 minutes remaining” after 1.5 of 12.4 GB is downloaded. I will exit this now and close my browser. Just in case.
Monterey OS installation is complete. But I still get “The application requires macOS 12.0 or later” when I try to Run counterlogin app in VS Code. I am trying the following:
flutter pub upgrade firebase_auth
flutter pub outdated
flutterfire configure
sudo gem install cocoapods
It still fails to run. I give up.
Running as a Chrome app
I select ‘Chrome (web-javascript)’ instead and run counterlogin without debugging. I was able to start it but it could not do a FirebaseAuth.instance call. The error was
The following FirebaseException was thrown building PrintWall(dirty, state: _PrintWallState#ec124):
[core/not-initialized] Firebase has not been correctly initialized.
Usually this means you've attempted to use a Firebase service before calling
`Firebase.initializeApp`.
View the documentation for more information:
https://firebase.flutter.dev/docs/overview#initialization
Sometimes these problems disappear with new flutter or flutterfire releases. Let us hope. Until then (or until I know better), I give up on running this as a chrome app either.
Running as an Android app
Unlike MacOS and Chrome, the Android version of the app works. I am able to intialise the Firebase connection.
Next step is log in. I follow https://firebase.google.com/docs/auth/flutter/start .