Flutter web and Firebase authentication TypeError: Cannot read property 'app' of undefined

Question

Can anybody help me please? I try build a web application with Flutter, based on Google Firebase Auth and Cloud Firestore. The project on Android works fine, i can work with users and can get data from my Cloud Firestore database. I've maked a second app(webapp) do all the steps described in Firebase documentation (webapp is registred, hosted on Firebase), inserted all the dependencies in pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  firebase_core: ^0.4.4+3
  firebase: ^7.3.0
  firebase_auth: ^0.16.0

modified the index.html like so:

<body>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="/__/firebase/7.14.3/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="/__/firebase/7.14.3/firebase-analytics.js"></script>
  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script>
  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>  <!-- 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>
  <script>
    var firebaseConfig = {
      apiKey: "XXXXXXXXXX-6EL5qIBxWjurRQMcK3pf9W-o",
      authDomain: "xxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxx",
      storageBucket: "xxxxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxx6198",
      appId: "1:xxxxxxxx16198:web:cde3457e8dc734d045d227",
      measurementId: "X-XXXXXXXXXX"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.auth();
    firebase.analytics();
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>

but when i try Sign-In or register, Android Studio throws this error message:

TypeError: Cannot read property 'app' of undefined
    at Object.app$ [as app] (http://localhost:53262/packages/firebase/src/top_level.dart.lib.js:72:56)
    at firebase_auth_web.FirebaseAuthWeb.new.[_getAuth] (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:42:27)
    at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:197:34)
    at signInWithCredential.next (<anonymous>)
    at runBody (http://localhost:53262/dart_sdk.js:43135:34)
    at Object._async [as async] (http://localhost:53262/dart_sdk.js:43163:7)
    at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:196:20)
    at firebase_auth.FirebaseAuth.__.signInWithCredential (http://localhost:53262/packages/firebase_auth/firebase_auth.dart.lib.js:324:90)
    at signInWithCredential.next (<anonymous>)

What this exception means? What do i wrong? Thanks a lot for any help!

Frank Tz · Accepted Answer · 2020-10-31 05:42:55Z

I had the same problem, wasted a lot of time on it. The main reason for this problem atleast for me was with the cloud_firestore dependency. For me it turned out that it was just some issues with firebase security stuff because I was using a VPN to access internet, and chrome debug browser that ussually pops up doesn't allow to install an extension. For me everything was fine but I was just being blocked from accessing some firebase stuff. To try if this is the case for you run flutter run -d chrome --release and copy the localhost url and paste it in the normal browser not the popup. If everything works fine then you had the same problem as me, if not then maybe you have a different issue then. Hope this saves someone's time.

Remember your index.html file should be configured correctly, should also include every firebase dependency you have on pubspec.yaml. Below is and example of a well configured index.html, just the body tag:

<body id="app-container">

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

        <script>
          // Your web app's Firebase configuration
          // For Firebase JS SDK v7.20.0 and later, measurementId is optional
          var firebaseConfig = {
            apiKey: "xxxxxxxxxxxxx",
            authDomain: "xxxxxx.firebaseapp.com",
            databaseURL: "https://xxxxxx.firebaseio.com",
            projectId: "xxxxx",
            storageBucket: "xxxxx.appspot.com",
            messagingSenderId: "xxxxxxx",
            appId: "1:xxxxxxxxx:web:xxxxxxxxxx",
            measurementId: "G-NYEW95QM"
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
          firebase.analytics();

        </script>

    <script src="main.dart.js" type="application/javascript"></script>


</body>

And my pubspec.yaml file looks like this:

cupertino_icons: ^1.0.0
  firebase_auth: ^0.18.2
  cloud_firestore: ^0.14.2
  provider: ^4.3.2+2
  flutter_spinkit: ^4.1.2+1
  simple_animations: ^2.2.3
  firebase_core: ^0.5.1
  intl: ^0.16.1
  folding_cell: ^1.0.0
  charts_flutter: ^0.9.0
  flip_card: ^0.4.4
  progress_dialog: ^1.2.4
  image_picker_web: ^0.1.0+2
  url_launcher: ^5.7.8

  image: ^2.1.18
  animator: ^2.0.1
  timeago: ^2.0.28
  uuid: ^2.2.2

  font_awesome_flutter: ^8.10.0
  bubble: ^1.1.9+1
  google_fonts: ^1.1.1

Hi thanks for the tip. I have the same problem, could you solve the problem to work in debug mode ? — gbaccetta, Commented Apr 30, 2021 at 3:00
@gbaccetta, Making sure the firebase depencies in your pubspec.yaml file match with the one on the index.html and being updateded should work in debug mode too. — Frank Tz, Commented May 3, 2021 at 20:01

Павел Ковалев · Accepted Answer · 2020-05-24 13:57:38Z

3

You need fix dependencies.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  firebase_auth_web:

edited May 24, 2020 at 13:57

answered May 24, 2020 at 13:34

Павел Ковалев

613 bronze badges

Add a comment |

William Humphries · Accepted Answer · 2020-12-01 01:31:59Z

Try running flutter doctor to see if you have 'Chrome - develop for the web' in the summary

[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.18363.1198], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web  <- THIS
[√] Android Studio (version 4.0)
[√] Connected device (3 available)

If not try following the steps in this answer to switch to flutter beta channel and create the right files.

You may have to enable web support for your app as shown here

C.M Talha · Accepted Answer · 2022-08-15 17:36:15Z

0

I recently have the same issue, turns out that google had updated the firebase_auth plugin a few days ago after updating the package in pubspec.yaml to the latest version solved the issue.

answered Aug 15, 2022 at 17:36

C.M Talha

3812 silver badges6 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Flutter web and Firebase authentication TypeError: Cannot read property 'app' of undefined

4 Answers 4

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Linked

Related