Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Firebase + Flutter + Web Having No Data #2755

Closed
psygo opened this issue Jun 13, 2020 · 7 comments
Closed

Firebase + Flutter + Web Having No Data #2755

psygo opened this issue Jun 13, 2020 · 7 comments
Labels
platform: web Issues / PRs which are specifically for web. plugin: cloud_firestore type: bug Something isn't working

Comments

@psygo
Copy link

psygo commented Jun 13, 2020

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.
@TahaTesser
Copy link

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

@TahaTesser TahaTesser added the blocked: customer-response Waiting for customer response, e.g. more information was requested. label Jun 15, 2020
@ditman
Copy link
Contributor

ditman commented Jul 15, 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.

@psygo
Copy link
Author

psygo commented Jul 26, 2020

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

@TahaTesser TahaTesser added blocked: customer-response Waiting for customer response, e.g. more information was requested. and removed blocked: customer-response Waiting for customer response, e.g. more information was requested. labels Jul 28, 2020
@google-oss-bot google-oss-bot added the Stale Issue with no recent activity label Aug 4, 2020
@google-oss-bot
Copy link

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!

@psygo
Copy link
Author

psygo commented Aug 4, 2020

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

@google-oss-bot google-oss-bot added Needs Attention This issue needs maintainer attention. and removed blocked: customer-response Waiting for customer response, e.g. more information was requested. Stale Issue with no recent activity labels Aug 4, 2020
@TahaTesser TahaTesser added platform: web Issues / PRs which are specifically for web. plugin: cloud_firestore type: bug Something isn't working and removed Needs Attention This issue needs maintainer attention. labels Aug 4, 2020
@liveaffiliates
Copy link

Check your Firebase rules

@Salakar
Copy link
Member

Salakar commented Aug 25, 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

@Salakar Salakar closed this as completed Aug 25, 2020
@firebase firebase locked and limited conversation to collaborators Sep 25, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
platform: web Issues / PRs which are specifically for web. plugin: cloud_firestore type: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ditman @Salakar @psygo @liveaffiliates @google-oss-bot @TahaTesser