🐛 [firebase_auth] FlutterWeb + FirebaseAuth(v1.2.0) + StreamBuilder not working on Hot Reload

[synapsecode]

BugReport: FlutterWeb + FirebaseAuth(v1.2.0) + StreamBuilder not working on Hot Reload

Hey! So over the past few weeks I have been testing out FirebaseAuth both for the web and Android
and the experience has been mostly bad.
I have tried to add as much information as I can to give you enough context.

My Goal

Basically, the StreamBuilder runs on the authStateChanges (or even idTokenChanges) stream from FirebaseAuth, It gives a uid immediately after signIn or when I reload the whole page (Flutter Web) but doesn't return a uid during hot reload eventhough I know the user has been authenticated. It works again when I reload the webpage.
It works perfectly on Android, just not on Flutter Web
Its very frustrating, and i could use some help from anyone!

---

Flutter Doctor Output

Click To Expand

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.2, on Microsoft Windows [Version 10.0.21296.1010], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.5.5)
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the
  "Desktop development with C++" workload, and include these components:
    MSVC v142 - VS 2019 C++ x64/x86 build tools
     - If there are multiple build tool versions available, install the latest
    C++ CMake tools for Windows
    Windows 10 SDK
[√] Android Studio (version 4.0)
[√] VS Code (version 1.56.2)
[√] Connected device (3 available)

---

Dart Versioning

Dart VM version: 2.8.4 (stable) (Wed Jun 3 12:26:04 2020 +0200) on "windows_x64"

---

Steps to Reproduce

• Create Flutter App
• Create Firebase App
• Enable Anonymous Authentication in Firebase Console
• Link Flutter to Firebase Android App (Usual Way)
• link Flutter to Firebase Web App (Usual Way)
• Add Dependencies (Shown Later)
• Add main.dart code (Shown Later)
• run using flutter run -d chrome

OR

• git clone my repository
• see the code and run it as usual

---

FirebaseSDKVersioning in /web/index.html

<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-firestore.js"></script>

//(the setup is correct as signIn works)

---

pubspec.yaml Dependencies

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  #Firebase Dependencies
  firebase_core: ^1.2.0
  firebase_auth: ^1.2.0

---

Flutter Code (main.dart)

Click To Expand

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

FirebaseAuth fa = FirebaseAuth.instance;
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb) {
    await Firebase.initializeApp();
  }
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth Demo',
      home: AuthDemo(),
    );
  }
}

class AuthDemo extends StatelessWidget {
  const AuthDemo({Key key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AuthDemo"),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () async {
              await fa.signInAnonymously();
            },
            child: Text("Anon"),
          ),
          ElevatedButton(
            onPressed: () async {
              await fa.signOut();
            },
            child: Text("SignOut"),
          ),
          SizedBox(height: 20),
          StreamBuilder(
            stream: fa.authStateChanges(),
            builder: (context, snapshot) {
              return Text(snapshot.data?.uid ?? "[NULL]");
            },
          )
        ],
      ),
    );
  }
}

---

Basically it returns the UID on page reload or just after signIn but when a hot reload is done, it shows null eventhough the user is loggedIn actually. This is precisely the problem!

Please Note

I tried to test it with v1.0.0 of both plugins to verify if my flutter version was incompatible but that didnt work too.
This works exactly as I expect (print UID on hot reload) for the dependency versions of:

firebase_core: "^0.7.0"
firebase_auth: "^0.20.1"

This is very very frustrating, There is absolutely no error, warning or on the console or anywhere.
The SignIn works but the authenticationState does not perist on Hot reload in the Web, (Works perfectly on android)
but it works perfectly for the web only on these older versions.
Is this a bug?
If not please help me.

---

Github Repository

https://github.com/synapsecode/firebase_auth_bug_demo

---

Thank you!

Manas Hejmadi

[rrousselGit]

This is a known issue and is not something we can fix.

The origin of the problem is a bug in the Dart SDK: dart-lang/sdk#45874
Since this isn't a bug in FlutterFire but rather the web SDK, I'm going to close this in favor of the previously mentioned issue.

[synapsecode]

Okay, I understand but why does it work as expected with the versions of:

firebase_core: "^0.7.0"
firebase_auth: "^0.20.1"

The Flutter Version and Dart SDK is still the same.
Could you please clarify, It would help me a lot

[rrousselGit]

We made some refactoring to fix a bug. But that refactoring revealed the Dart SDK bug.

We could revert the changes, but that would make the bug fixed reappear. Considering this issue is a dev-only bug, whereas the bug fixed happened in production, this is not worth it

[synapsecode]

Okay, so there's nothing that I can do to use StreamBuilder with the latest version of FirebaseAuth or FlutterWeb as of now?
Thanks for the effort!

[rrousselGit]

You can keep refreshing the page. The issue is only on web+hot-restart

Alternatively consider using a different platform during development