Flutterfire: Firebase + Flutter + Web Having No Data

Created on 13 Jun 2020 · 7Comments · Source: FirebaseExtended/flutterfire

I originally asked this question in this SO post.

1. The Problem

I'm trying to integrate my Flutter app — it works fine, with tests and mocks, on Android and iOS so far — to the web, but, despite following the HTML configurations and other tutorials and my simple authentication app working fine overall, I get that no data is reaching it. My snapshots have snapshot.hasData == false and its connectionState is ConnectionState.waiting.

2. The Code

I'm not having any errors aside from this weird, no-data behavior. My index.html file is configured this way:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="feedbacker">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>feedbacker</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <!-- Firebase -->

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
  https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = { ... }; // copy-paste from Firebase's configuration setup
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

  <script src="main.dart.js"></script>
</body>
</html>

3. Additional Info

I've tried many variations of firebasejs' versions and none of them worked, specially not the most recent ones.

The version of the revelant packages I'm using are:

firebase_auth: ^0.15.2
google_sign_in: ^4.5.1
flutter_facebook_login: ^3.0.0

google_sign_in and flutter_facebook_login are optional workflows and they also aren't working.

I won't be able to share the whole app here because there's too much stuff there. Given the amount of problems I'm having now, I should have started to port it to the web at the beginning, though I didn't know Flutter supported it at the time.

web cloud_firestore bug

Source

psygo

All 7 comments

Hi @psygo .
Can you please provide your flutter run -d Chrome a complete reproducible minimal code sample
Thank you

TahaTesser on 15 Jun 2020

Have you tried moving the firebase script tags to within the <head> tag on the page?

This part:

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
  https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = { ... }; // copy-paste from Firebase's configuration setup
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

That should ensure that firebase is loaded before the main.dart.js script needs it.

ditman on 15 Jul 2020

👍1

Sorry for the delay, I'll try your solution this week hopefully.

psygo on 26 Jul 2020

👍1

Hey @psygo. We need more information to resolve this issue but there hasn't been an update in 7 weekdays. I'm marking the issue as stale and if there are no new updates in the next 7 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

google-oss-bot on 4 Aug 2020

It didn't work unfortunately, still obtaining no data from Firebase after putting the scripts inside the <head>.

psygo on 4 Aug 2020

Check your Firebase rules

liveaffiliates on 18 Aug 2020

Hey 👋

The rework of the Auth & Firestore plugins as part of the FlutterFire roadmap was published over a week ago with a ton of fixes and new features. Please could you try the new version and see if this is still an issue for you?

Any errors that may be happening should be more reliably coming through now - so the latest issue may actually indicate whats wrong, if anything. I'd also confirm your Firebase Firestore security rules are set correctly as @liveaffiliates suggested.

If this is still an issue on the latest plugin versions then please submit a new up to date GitHub issue.

For help migrating to the new plugins please see the new migration guide: https://firebase.flutter.dev/docs/migration